版權(quán)聲明：文章首發(fā)于本人簡書賬號人生還有多少個二十年
歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明出處

前言

數(shù)組是編程語言中最為常見的數(shù)據(jù)類型之一，跟對象相比，它的突出特點是"有序"。JS的數(shù)組還有這些特點：數(shù)組成員類型可以不一致，數(shù)組長度可以動態(tài)調(diào)整，數(shù)組下標越界不報錯。

// 一個數(shù)組，可以同時包含多種數(shù)據(jù)類型的數(shù)據(jù)，而且，數(shù)組之中還可以嵌套數(shù)組
var arr = [1, "2", true, null, undefined, [{a:1,b:2,c:3}]];
arr.length; // 6
// 不會越界報錯，而是在指定索引處創(chuàng)建新元素，并自動更新數(shù)組的length屬性值。
arr[100] = 100; 
arr.length; // 101
// 數(shù)組的length屬性是可讀可寫
// length值調(diào)低，則會刪除部分元素；調(diào)高，則生成稀疏數(shù)組
arr.length = 6;
arr; // [1, "2", true, null, undefined, [{a:1,b:2,c:3}]]
arr.length = 10;
arr[7]; // undefined

數(shù)組的常用方法

接下來，以例子為主，解釋為輔，簡述相關(guān)知識

1. 增刪元素（push()、pop()、unshift()、shift()）

var arr = [];
arr.push("a", "b"); // 2
arr // ["a", "b"]
arr.pop(); // "b"
arr // ["a"]
arr.unshift("x", "y"); // 3
arr // ["x", "y", "a"]
arr.shift(); // "x"
arr // ["y", "a"]

• push()和unshift()都是向數(shù)組添加元素，可以同時添加多個元素，它們的返回值都是更新后的數(shù)組的長度；
• pop()和shift()都是從數(shù)組中移除元素，只移除一項，它們的返回值都是被移除的那個元素；
• push()和pop()的操作發(fā)生在數(shù)組尾部，unshift()和shift()的操作發(fā)生在數(shù)組頭部；
• 棧數(shù)據(jù)結(jié)構(gòu)的訪問規(guī)則是LIFO（后進先出），插入和刪除的操作發(fā)生在同一端；而隊列的訪問規(guī)則為FIFO（先進先出），插入和刪除的操作不在同一端；
• push()配合pop()可以模擬棧的行為；shift()和push()、unshift()和pop()都可以實現(xiàn)類似隊列的行為。

2. 排序（reverse()、sort()）

var arr1 = [1, 2, 3];
arr1.reverse(); // [3, 2, 1]
arr1; // [3, 2, 1]

var arr2 = [1, 3, 2];
arr2.sort(); // [1, 2, 3]
arr2; // [1, 2, 3]

• 從上面可以看出，reverse()和sort()都會改變原數(shù)組，并且它們的返回值都是排序之后的數(shù)組。
• reverse()用于反轉(zhuǎn)數(shù)組。
• sort()用于以升序或者降序的方式排列數(shù)組項。

為了實現(xiàn)排序，sort()方法會調(diào)用每個數(shù)組項的toString()方法，然后比較得到的字符串，以確定如何排序。即使數(shù)組中的每一項都是數(shù)值，sort()方法比較的也是字符串。

var arr3 = [1, 2, 10];
arr3.sort(); // [1, 10, 2]
var arr4 = ["a", "c", "b", "B"];
arr4.sort(); // ["B", "a", "b", "c"]

sort()可以接收一個函數(shù)，用于提供更實用的排序功能。
格式如下：sort(fn(arg1, arg2))

var arr5 = [1, 3, 2];
// 升序排列
arr5.sort(function(a, b){
    return a - b;
}); // [1, 2, 3]
arr5 //  [1, 2, 3]
// 降序排列
arr5.sort(function(a, b){
    return b - a;
}); // [3, 2, 1]

3. 操作方法（concat()、slice()、splice()）

// concat()：用于合并多個數(shù)組，生成新數(shù)組，對原數(shù)組沒有影響
// 數(shù)組合并過程中，各數(shù)組只拆除最外層的“[]”，合并操作并不是遞歸的
// 這表明，生成的新數(shù)組仍然可以含有數(shù)組
var arr1 = [];
arr1.concat([1], [2], [[3,4], [5, 6]]); // [1, 2, [3, 4], [5, 6]];
arr1; // []

// slice(): 用于截取子數(shù)組，且操作并不影響原數(shù)組
// 可以給定兩個參數(shù)，一個是起始索引，一個是結(jié)束索引
var arr2 = ["a", "b", "c", "d"];
// 沒給定參數(shù)，相當于復(fù)制數(shù)組
arr2.slice(); // ["a", "b", "c", "d"]
arr2 // ["a", "b", "c", "d"]
// 只給定起始索引，默認從該索引處一直截取到末尾
arr2.slice(2); //  ["c", "d"]
arr2 // ["a", "b", "c", "d"]
// 記清楚了！從起始索引截取到結(jié)束索引之前，并不包含結(jié)束索引處的元素
arr2.slice(1, 3); // ["b", "c"]
arr2 //  ["a", "b", "c", "d"] 

// splice(): 增、刪、替換數(shù)組元素，直接修改原數(shù)組
// 該操作的返回值是被刪除的元素組成的數(shù)組
var arr3 = ["1", "2", "3", "a", "b", "c"];
// 從索引為4處開始刪除元素，一直到數(shù)組末尾
arr3.splice(4); // ["b", "c"]
arr3 // ["1", "2", "3", "a"]
// 從索引為0處開始，刪除2個元素
arr3.splice(0, 2); // ["1", "2"]
arr3 // ["3", "a"]
// 從索引為0處開始，刪除0個元素，并在該處插入1個元素"x"
arr3.splice(0, 0, "x"); // []
arr3 // ["x", "3", "a"]
// 刪除幾個元素，就插入幾個元素，可以實現(xiàn)splice()替換元素功能
arr3.splice(0, 1, "y"); // ["x"]
arr3 // ["y", "3", "a"]

4. 位置方法

// indexOf()和lastIndexOf()都可以用于查詢指定元素在數(shù)組中的位置,
// 返回第一個匹配的元素的索引。
// 兩者的區(qū)別在于，前者是從數(shù)組頭部開始查找，后者則從尾部開始查找
[1,2,4,-1,2].indexOf(2) // 1
[1,2,4,-1,2].lastIndexOf(2) // 4

5. 迭代方法（every()、some()、filter()、map()、forEach()）

[1,2,3].every(function(item, index, array){return item > 0;});
// true
[1,2,3].every(function(item, index, array){return item > 2;});
// false
[1,2,3].some(function(item, index, array){return item > 2;});
// true
[1,2,3].filter(function(item, index, array){return item > 2;});
// [3]
[1,2,3].map(function(item, index, array){   return item * 2;});
// [2, 4, 6]
var sum = 0;
[1,2,3].forEach(function(item, index, array){sum += item;});
sum // 6

這五個迭代方法都接收一個函數(shù)，并且對數(shù)組中的每一項都運行給定函數(shù)，這些迭代方法都不會改變原數(shù)組。它們的返回值如下：

• every()：給定函數(shù)對每一項都返回true，則返回true。
• some()：給定函數(shù)對任一項返回true，則返回true。
• filter()：返回該函數(shù)會返回true的項組成的數(shù)組。
• map()：返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組。
• forEach()：沒有返回值。

6. 歸并方法（reduce()、reduceRight()）

[1,2,3].reduce(function(prev, cur){return prev + cur});
// 6
[1,2,3].reduceRight(function(prev, cur){return prev + cur});
// 6

reduce()和reduceRight()這兩個方法都會迭代數(shù)組的所有項，然后構(gòu)建一個最終返回的值。前者的迭代順序是從前往后，后者則相反

7. 轉(zhuǎn)換方法（join()）

join()可以將數(shù)組轉(zhuǎn)換為字符串，相反，split()可以將字符串轉(zhuǎn)換為數(shù)組。
可以給它們指定分隔符，若未指定，則默認使用逗號。

var arr = [1,2,3];
arr.join(); // "1,2,3"
arr.join(""); // "123"
arr.join("-"); // "1-2-3"
arr.join().split(); // ["1,2,3"]

var str = "abc";
str.split(); // ["abc"]
str.split(""); // ["a", "b", "c"]
str.split("-"); // ["abc"]
str.split().join(); // "abc"

技巧與提示

• 了解各個數(shù)組方法的功能，接收哪些參數(shù)，有沒有返回值，返回值是什么，會不會改變原數(shù)組，瀏覽器兼容性如何。
• 位置方法、迭代方法和歸并方法都是ES5的標準。IE兼容性：IE9+。

參考資源

• 《JavaScript高級程序設(shè)計（第3版）》
• 《JavaScript權(quán)威指南》
• MDN