玩轉數組各類方法

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

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 新增的數組方法，敬請期待。。。