玩轉陣列各種方法

掘金範兒發表於2018-08-01
陣列

陣列在我們前端開發中扮演著舉足輕重的角色，全面而熟悉的瞭解陣列各種方法的使用，對於開發可謂是事半功倍，下面進入正題。

JavaScript中建立陣列有兩種方式：

第一種是使用Array建構函式：

var  arr = new Array();//建立一個空陣列var arr = new Array(20);//建立一個包含20 項的陣列var arr = new Array('Lily','Lucy','Tom');//建立一個包含三個字元的陣列複製程式碼

第二種建立陣列的方式是使用陣列字面量表示法：

var arr = [];//建立一個空陣列var arr = [10];//建立一個包含一項的陣列複製程式碼

陣列方法：

join(), push(), pop(), shift(), unshift(), sort(), reverse(), concat(), slice(), splice(), indexOf(),
ES5新增：lastIndexOf(), forEach(), map(), filter(), every(), some(), reduce(), reduceRight(),
針對ES5新增的方法瀏覽器支援的情況：Opera 11+， Firefox 3.6+， Safari 5+， Chrome 8+， Internet Explorer 9+

1.join()方法：

join(separator):將陣列的元素按順序組成一個字串，separator作為分隔符，省略的話則預設以','作為分隔符。示例如下：

var arr = [1,2,3,4,5];var arr1 = arr.join();var arr2 = arr.join(',');var arr3 = arr.join('-');var arr4 = arr.join(':');console.log(arr); //[1, 2, 3, 4, 5]console.log(arr1);//1,2,3,4,5console.log(arr2);//1,2,3,4,5console.log(arr3);//1-2-3-4-5console.log(arr4);//1:2:3:4:5複製程式碼

注意：join()不會改變原始陣列，而返回新的陣列

2.push()和pop():

push(): 接收任意多個引數，把他們新增到陣列的末尾，並返回陣列的長度。

var arr = [1,2,3,4];
var arr1 = arr.push(5);
var arr2 = arr.push(6,7);
var arr3 = arr.push([8,9]);
var arr4 = arr.push([10,11],[12]);
console.log(arr); //[1,2,3,4,5,6,7,[8,9],[10,11],[12]]
console.log(arr1);//5
console.log(arr2);//7
console.log(arr3);//8
console.log(arr4);//10複製程式碼
注意：push()方法改變原來陣列。


pop(): 移除陣列最後一項，然後返回移除的項

var arr = [1,2,3,4,5];
var a = arr.pop();
console.log(arr);// [1,2,3,4];
console.log(a); // 5;複製程式碼

3. shift() 和 unshift()

shift(): 刪除原陣列第一項，並返回刪除元素的值，如果陣列為空則返回undefined；

var arr = [1,2,3,4,5];
var a = arr.shift();
console.log(arr);// [2,3,4,5];
console.log(a); // 1複製程式碼

unshift(): 將引數新增到原陣列開頭,可以有多個引數，並返回陣列的長度；

var arr = [4,5,6,7];
var a = arr.unshift(2);
console.log(arr);// [2,4,5,6,7]
console.log(a);// 5
var arr = [3,4,5,6];var a = arr.unshift(1,2);console.log(arr);//[1,2,3,4,5,5];console.log(a); //6複製程式碼
注意： shift 和 unshift 都會改變原陣列長度。

4.sort():

5.reverse(): 反轉陣列項的順序,原陣列改變，返回反轉後的結果

var arr = [3,4,5,6,7,8];var a = arr.reverse();

console.log(arr);[8,7,6,5,4,3]console.log(a);//[8,7,6,5,4,3]複製程式碼
注意： 改變原陣列；

6.concat(): 建立一個當前陣列的副本，將引數新增到副本中並且返回副本，原陣列不變；

var arr = [3,4,5];
var a = arr.concat(6);//
console.log(a);//[3,4,5,6]
var b = arr.concat([7,8]);
console.log(b);//[3,4,5,7,8]
var c = arr.concat(9,[10,11]);
console.log(c); //[3,4,5,9,10,11]
var d = arr.concat([6,[7,8]]);
console.log(d);//[3,4,5,6,[7,8]]
console.log(arr);//[3,4,5];複製程式碼
測試發現，如果新增的不是陣列，則直接將引數新增到副本的末尾，如果引數是陣列，則將陣列的各個項新增到副本末尾，如果引數是二維陣列，則如上所示。
注意： 不改變原陣列，返回新的陣列；

7.slice(): 當只有一個引數時，指刪除該引數索引位置以後的全部元素,當有兩個引數時，第一個引數代表開始刪除的索引位置，第二個引數代表結束的索引位置，刪除的元素包含起始位置，不包含結束位置。如果引數是負數，則該引數加上陣列的長度作為此處的值。

var arr = [3,4,5,6];
var a = arr.slice(1);
console.log(arr);//[3,4,5,6]
console.log(a);//[4,5,6]
var b = arr.slice(1,3)
console.log(arr);//[3,4,5,6]
console.log(b);//[4,5]
var c = arr.slice(1,-1);
console.log(c);//[4,5]
var d = arr.slice(-3,-1)
console.log(d);//[4,5]複製程式碼
注意： 不改變原陣列，返回新陣列。

8.splice():

刪除陣列，一個引數的時候，指刪除當前索引位置以後的元素並以此刪除的元素組成
新的陣列返回，兩個引數的時候，第一個引數為刪除的起始位置，第二個引數代表刪除的個數。

一個引數：
var arr = [2,3,4,5];
var a = arr.splice(2);
console.log(arr);//[2,3]
console.log(a);//[4,5]
兩個引數：
var arr = [3,4,5,6,7,8];
var b = arr.splice(1,3);
console.log(arr);//[3,7,8]
console.log(b);//[4,5,6]
複製程式碼

插入陣列：可以向指定位置插入任意數量的項，只需提供三個引數：起始位置、0、(要刪除的項數) 和要插入的項，返回空陣列。

var arr = [2,3,4,5,6,7,8,9];
var c = arr.splice(3,0,12,34,56);
console.log(arr);[2, 3, 4, 12, 34, 56, 5, 6, 7, 8, 9]
console.log(c);//[]複製程式碼

替換：可以向指定位置插入任意數量的項，且同時刪除任意數量的項，只需指定三個引數：起始位置、要刪除的項數和要插入的任意數量的項。

var arr = [2,3,4,5,6];
var d = arr.splice(2,2,12,33);
console.log(arr);[2, 3, 12, 33, 6]
console.log(d);[4,5]複製程式碼
注意：splice會改變原始陣列。

9.indexOf() 和 lastIndexOf(): 

indexOf(): 查詢給定元素在陣列中位置的索引值。
var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5));//2
console.log(arr.lastIndexOf(5));//5
console.log(arr.indexOf(3,3));//6  從索引3 開始查詢到第一個
console.log(arr.indexOf(10));//-1
console.log(arr.indexOf('10'));//-1複製程式碼

10. forEach(): 對陣列進行遍歷迴圈，對陣列中的每一項執行給定函式，這個方法沒有返回值。

var arr = [2,3,4,5,6,7];
arr.forEach(function(item, index, array){//item代表每一項，index當前項的索引，array 當前陣列；} )複製程式碼

11.map(): 指‘對映’, 對陣列中的每一項執行給定函式，返回每次函式呼叫的結果組成的陣列。

var arr =  [1,2,3,4,5,6,7];
var arr2 = arr.map(function(item) {return item * item;})
console.log(arr);//[1,2,3,4,5,6,7];
console.log(arr2);//[1, 4, 9, 16, 25, 36, 49];複製程式碼
注意： 不改變原始陣列。

12.filter(): ‘過濾’功能，陣列中的每一項執行給定的函式，返回滿足條件的項組成的新陣列。

var arr = [1,2,3,4,5,6];
var b = arr.filter(function(item,index, array) {//item為每一項的值，index為每一項的索引，array就是arr.return item % 2 == 0;})
console.log(arr);//[1,2,3,4,5,6]
console.log(b);//[2,4,6]複製程式碼

13.erery(): 判斷陣列中每一項是否都滿足給定函式執行的條件，只有所有項都滿足，才會返回true。

var arr = [1,2,3,4,5,6,7];
var a = arr.every(function(item) {return item < 10;})
console.log(arr);//[1,2,3,4,5,6,7]
console.log(a);//true複製程式碼

14.some():判斷陣列中是否存在滿足條件的項，只要有一項滿足條件，就會返回true，否則返回false

var arr = [2,3,4,5,6];
var b = arr.some(function(x) { 	return x > 4;})
console.log(arr);// [2,3,4,5,6];
console.log(b);//true複製程式碼

15.reduce() 和 reduceRight(): 這兩個方法都會實現迭代陣列的所有項，然後構建一個最終返回的值。reduce()方法從陣列的第一項開始，逐個遍歷到最後。而 reduceRight()則從陣列的最後一項開始，向前遍歷到第一項。這兩個方法都接收兩個引數：一個在每一項上呼叫的函式和（可選的）作為歸併基礎的初始值。傳給 reduce()和 reduceRight()的函式接收 4 個引數：前一個值、當前值、項的索引和陣列物件。這個函式返回的任何值都會作為第一個引數自動傳給下一項。第一次迭代發生在陣列的第二項上，因此第一個引數是陣列的第一項，第二個引數就是陣列的第二項。

var arr = [1,2,3,4,5,6,7];
var b = arr.reduceRight((prev,cur, index,array) => {	return prev + cur;})
console.log(arr);//[1,2,3,4,5,6,7]
console.log(b);//28複製程式碼

後續補充ECMAScript6 新增的陣列方法，敬請期待。。。


相關文章