版權(quán)聲明：文章首發(fā)于本人簡(jiǎn)書(shū)賬號(hào)人生還有多少個(gè)二十年
歡迎轉(zhuǎn)載石窑，轉(zhuǎn)載請(qǐng)注明出處

前言

數(shù)組是編程語(yǔ)言中最為常見(jiàn)的數(shù)據(jù)類型之一蚓炬，跟對(duì)象相比，它的突出特點(diǎn)是"有序"经宏。JS的數(shù)組還有這些特點(diǎn)：數(shù)組成員類型可以不一致熄捍，數(shù)組長(zhǎng)度可以動(dòng)態(tài)調(diào)整余耽，數(shù)組下標(biāo)越界不報(bào)錯(cuò)。

// 一個(gè)數(shù)組币喧，可以同時(shí)包含多種數(shù)據(jù)類型的數(shù)據(jù)袱耽，而且，數(shù)組之中還可以嵌套數(shù)組
var arr = [1, "2", true, null, undefined, [{a:1,b:2,c:3}]];
arr.length; // 6
// 不會(huì)越界報(bào)錯(cuò)史翘，而是在指定索引處創(chuàng)建新元素冀续，并自動(dòng)更新數(shù)組的length屬性值洪唐。
arr[100] = 100; 
arr.length; // 101
// 數(shù)組的length屬性是可讀可寫(xiě)
// length值調(diào)低，則會(huì)刪除部分元素问欠；調(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ù)組的常用方法

接下來(lái)旗国，以例子為主滚澜，解釋為輔，簡(jiǎn)述相關(guān)知識(shí)

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í)添加多個(gè)元素，它們的返回值都是更新后的數(shù)組的長(zhǎng)度兼吓；
• pop()和shift()都是從數(shù)組中移除元素森枪，只移除一項(xiàng)，它們的返回值都是被移除的那個(gè)元素浑娜；
• push()和pop()的操作發(fā)生在數(shù)組尾部筋遭，unshift()和shift()的操作發(fā)生在數(shù)組頭部暴拄；
• 棧數(shù)據(jù)結(jié)構(gòu)的訪問(wèn)規(guī)則是LIFO（后進(jìn)先出），插入和刪除的操作發(fā)生在同一端次和；而隊(duì)列的訪問(wèn)規(guī)則為FIFO（先進(jìn)先出）踏施，插入和刪除的操作不在同一端；
• push()配合pop()可以模擬棧的行為畅形；shift()和push()日熬、unshift()和pop()都可以實(shí)現(xiàn)類似隊(duì)列的行為。

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()都會(huì)改變?cè)瓟?shù)組憎亚，并且它們的返回值都是排序之后的數(shù)組。
• reverse()用于反轉(zhuǎn)數(shù)組蝶锋。
• sort()用于以升序或者降序的方式排列數(shù)組項(xiàng)什往。

為了實(shí)現(xiàn)排序，sort()方法會(huì)調(diào)用每個(gè)數(shù)組項(xiàng)的toString()方法第献，然后比較得到的字符串庸毫，以確定如何排序衫樊。即使數(shù)組中的每一項(xiàng)都是數(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()可以接收一個(gè)函數(shù)臀栈，用于提供更實(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()：用于合并多個(gè)數(shù)組卖怜，生成新數(shù)組阐枣，對(duì)原數(shù)組沒(méi)有影響
// 數(shù)組合并過(guò)程中蔼两，各數(shù)組只拆除最外層的“[]”，合并操作并不是遞歸的
// 這表明娩贷，生成的新數(shù)組仍然可以含有數(shù)組
var arr1 = [];
arr1.concat([1], [2], [[3,4], [5, 6]]); // [1, 2, [3, 4], [5, 6]];
arr1; // []

// slice(): 用于截取子數(shù)組锁孟，且操作并不影響原數(shù)組
// 可以給定兩個(gè)參數(shù)品抽，一個(gè)是起始索引甜熔，一個(gè)是結(jié)束索引
var arr2 = ["a", "b", "c", "d"];
// 沒(méi)給定參數(shù)腔稀，相當(dāng)于復(fù)制數(shù)組
arr2.slice(); // ["a", "b", "c", "d"]
arr2 // ["a", "b", "c", "d"]
// 只給定起始索引，默認(rèn)從該索引處一直截取到末尾
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處開(kāi)始刪除元素敌呈，一直到數(shù)組末尾
arr3.splice(4); // ["b", "c"]
arr3 // ["1", "2", "3", "a"]
// 從索引為0處開(kāi)始，刪除2個(gè)元素
arr3.splice(0, 2); // ["1", "2"]
arr3 // ["3", "a"]
// 從索引為0處開(kāi)始匹舞，刪除0個(gè)元素线脚，并在該處插入1個(gè)元素"x"
arr3.splice(0, 0, "x"); // []
arr3 // ["x", "3", "a"]
// 刪除幾個(gè)元素，就插入幾個(gè)元素姊舵，可以實(shí)現(xiàn)splice()替換元素功能
arr3.splice(0, 1, "y"); // ["x"]
arr3 // ["y", "3", "a"]

4. 位置方法

// indexOf()和lastIndexOf()都可以用于查詢指定元素在數(shù)組中的位置,
// 返回第一個(gè)匹配的元素的索引括丁。
// 兩者的區(qū)別在于伶选，前者是從數(shù)組頭部開(kāi)始查找，后者則從尾部開(kāi)始查找
[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

這五個(gè)迭代方法都接收一個(gè)函數(shù)纹笼，并且對(duì)數(shù)組中的每一項(xiàng)都運(yùn)行給定函數(shù)允乐，這些迭代方法都不會(huì)改變?cè)瓟?shù)組削咆。它們的返回值如下：

• every()：給定函數(shù)對(duì)每一項(xiàng)都返回true拨齐，則返回true。
• some()：給定函數(shù)對(duì)任一項(xiàng)返回true，則返回true厦滤。
• filter()：返回該函數(shù)會(huì)返回true的項(xiàng)組成的數(shù)組援岩。
• map()：返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組。
• forEach()：沒(méi)有返回值掏导。

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()這兩個(gè)方法都會(huì)迭代數(shù)組的所有項(xiàng)，然后構(gòu)建一個(gè)最終返回的值趟咆。前者的迭代順序是從前往后添瓷，后者則相反

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

join()可以將數(shù)組轉(zhuǎn)換為字符串，相反值纱，split()可以將字符串轉(zhuǎn)換為數(shù)組鳞贷。
可以給它們指定分隔符虐唠，若未指定搀愧，則默認(rèn)使用逗號(hào)。

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"

技巧與提示

• 了解各個(gè)數(shù)組方法的功能疆偿，接收哪些參數(shù)咱筛，有沒(méi)有返回值，返回值是什么杆故，會(huì)不會(huì)改變?cè)瓟?shù)組眷蚓，瀏覽器兼容性如何。
• 位置方法反番、迭代方法和歸并方法都是ES5的標(biāo)準(zhǔn)。IE兼容性：IE9+叉钥。

參考資源

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