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

 

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