技巧收藏｜10個JavaScript常用陣列操作方法

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

在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：陣列技巧知多少》，原文作者：運氣男孩，

點擊關注，第一時間了解華為云新鮮技術~