摘要：這篇文章，向大家展示了在日常開發中，陣列有哪些小技巧值得借鑑和學習。

在web前端開發第二階段Javascript中，陣列是一個重要且常見的知識點，我們經常將資料儲存在陣列中，遍歷陣列或替換陣列元素日常開發我們都會用到。學習web前端開發，陣列也是會經常用到的。這篇文章，向大家展示了在日常開發中，陣列有哪些小技巧值得借鑑和學習，那讓我們開始說吧！

1.新增陣列元素

1）push() 在我們陣列的末尾新增一個或者多個數組元素，push在英文中也是推的意思

var arr = [1, 2, 3];
// arr. push(4,pink' );
console.1og(arr .push(4
 
, ' pink'));
console.1og(arr);

(1)push是可以給陣列追加新的元素

(2) push() 引數直接寫陣列元素就可以了

(3) push完畢之後，返回的結果是新陣列的長度

(4) 原陣列也會發生變化

2）. unshift 在我們陣列的開頭新增一個或者多個數組元素

console.1og(arr .unshift('red', ' purple'));
console.1og(arr);

(1) unshift是可以給陣列前面追加新的元素

(2) unshift() 引數直接寫陣列元素就可以了

(3) unshift完畢之後，返回的結果是新陣列的長度

(4) 原陣列也會發生變化|

2.刪除陣列元素

pop()它可以刪除陣列的最後一個元素

console .log(arr. pop());
console.log(arr);

1) pop是可以刪除陣列的最後一個元素記住一 次只能刪除個元素

2) pop() 沒有引數

3) pop完畢之後，返回的結果是刪除的那個元素

4) 原陣列也會發生變化

shift() 它可以刪除陣列的第一個元素

console.1og(arr .shift());
console.1og(arr);

(1) shift是可以刪除陣列的第一個元素記住一 次只能刪除個元素

(2) shift() 沒有引數

(3) shift完畢之後，返回的結果是刪除的那個元素

(4) 原陣列也會發生變化

3.陣列去重

怎麼對JS的陣列去重，有個非常快速且簡單的方法，使用new Set()以及Array.from()或者展開運算子(...)

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
// 方法一
var uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits); // 結果返回 [“banana”, “apple”, “orange”, “watermelon”, “grape”]
// 方法二
var uniqueFruits2 = [...new Set(fruits)];
console.log(uniqueFruits2); // 結果返回[“banana”, “apple”, “orange”, “watermelon”, “grape”]

4.替換陣列

日常開發中經常需要替換或者刪除一些指定的資料，遇到這種場景時一定要聯想到Array.protoType.splice這個方法。傳參時稍微複雜點，第一個引數是開始的索引，第二個引數是需要刪除的數量，剩下的就是需要新增的值（可以是一個或者多個）。

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];

fruits.splice(0, 2, “potato”, “tomato”);

console.log(fruits); // 結果返回[“potato”, “tomato”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]

5.遍歷陣列

在遍歷陣列建議使用for()迴圈或者for of；

//for of遍歷陣列

var arr=[1,2,3,4];
for(var value of arr){
console.log(value)；

var arr=[1,2,3,4];
for(arr = 0; arr < arr.length; j++) {
}

6.清空陣列

有時我們需要清空一個數組，比如使用者點選了清空購物車。可以一條一條地刪除，但是很少有像我這麼可愛的程式設計師，hhhhh。其實一行程式碼就能搞定，那就是直接將length設定成0就ok啦！

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.length = 0;
console.log(fruits); // 返回空 []

7.陣列轉換為物件

有時候需要將陣列轉換成物件的形式，使用.map()一類的迭代方法能達到目的，這裡還有個更快的方法，前提是你正好希望物件的key就是陣列的索引。

var fruits = [“banana”, “apple”, “orange”, “watermelon”];
var fruitsObj = { …fruits };
console.log(fruitsObj); 
// 結果返回{0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}

8.填充陣列

建立陣列的時候，你有沒有遇到過需要填充上預設值的場景，你肯定首先想到的就是迴圈這個陣列。可以用.fill這個方法

var newArray = new Array(10).fill(“1”);
console.log(newArray); 
// 結果返回的都是1 [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]

9.合併陣列

你知道如何合併陣列嗎，答案就是.concat()。

var fruits = [“apple”, “banana”, “orange”];
var meat = [“poultry”, “beef”, “fish”];
var vegetables = [“potato”, “tomato”, “cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food); 
//結果返回 [“apple”, “banana”, “orange”, “poultry”, “beef”, “fish”, “potato”, “tomato”, “cucumber”]

10.兩個陣列的交、差、補、並集

找出兩個陣列的交集的答案有很多，下面展示的是常用寫法，直接使用filter、concat來計算

var a = [1,2,3,4,5]
var b = [2,4,6,8,10]
//交集
var c = a.filter(function(v){ return b.indexOf(v) > -1 })
//差集
var d = a.filter(function(v){ return b.indexOf(v) == -1 })
//補集
var e = a.filter(function(v){ return !(b.indexOf(v) > -1) })
 .concat(b.filter(function(v){ return !(a.indexOf(v) > -1)}))
//並集
var f = a.concat(b.filter(function(v){ return !(a.indexOf(v) > -1)}));
console.log("陣列a：", a);
console.log("陣列b：", b);
console.log("a與b的交集：", c);
console.log("a與b的差集：", d);
console.log("a與b的補集：", e);
console.log("a與b的並集：", f);

小結

這篇文章，向小夥伴們展示了在JS中怎麼去運算元組的十種小技巧，其實在日常開發中，很可能還會遇到更加複雜的業務，希望你們能一一解剖成小問題，換個角度去思考，最終找到入手的地方來解決問題。

本文分享自華為雲社群《web前端開發之JavaScript：陣列技巧知多少》，原文作者：運氣男孩。

點選關注，第一時間瞭解華為雲新鮮技術~