技巧收藏｜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：數組技巧知多少》，原文作者：運氣男孩。

 

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