摘要：與稀疏數(shù)組對(duì)立的為密集數(shù)組，密集數(shù)組的索引會(huì)被持續(xù)的創(chuàng)建，并且其元素的數(shù)量等于其長(zhǎng)度。創(chuàng)建一個(gè)長(zhǎng)度為的數(shù)組，并初始化了個(gè)元素使用構(gòu)造函數(shù)創(chuàng)建數(shù)組對(duì)象的時(shí)候，關(guān)鍵字是可以省略的。另外使用和刪除元素是影響數(shù)組的長(zhǎng)度的。

說(shuō)明：
本文只總結(jié)了JavaScript數(shù)組在web端的行為，不包括NodeJs端的行為。
本文不涉及類(lèi)型化數(shù)組（TypedArray）的討論、總結(jié)。

數(shù)組，是有序的元素序列。數(shù)組中的每個(gè)值稱(chēng)為數(shù)組的一個(gè)元素，數(shù)組中每個(gè)元素都有一個(gè)位置，這個(gè)位置被稱(chēng)為索引（下標(biāo)），數(shù)組的索引是從0開(kāi)始的。

每種語(yǔ)言都有數(shù)組這種數(shù)據(jù)結(jié)構(gòu)，但是JavaScript語(yǔ)言中的數(shù)組和其他語(yǔ)言有很大的不同，主要體現(xiàn)在：

1、本質(zhì)上數(shù)組是一種類(lèi)列表對(duì)象

typeof([]) === "object" // true

上面的結(jié)果說(shuō)明typeof運(yùn)算符認(rèn)為數(shù)組的類(lèi)型就是對(duì)象，數(shù)組的原型中提供了遍歷和修改元素的相關(guān)操作。
所以我們可以使用一些對(duì)象的方法，比如使用Object.keys返回?cái)?shù)組所有的鍵名：

var list = ["a", "b", "c"];
Object.keys(list); // ["0", "1", "2"]

因?yàn)镴avaScript語(yǔ)言規(guī)定對(duì)象的屬性名必須是字符串，所以我們看上面的執(zhí)行結(jié)果中都是字符串類(lèi)型的數(shù)字，之所以可以用數(shù)值讀取，是因?yàn)榉亲址逆I名會(huì)被轉(zhuǎn)為字符串，所以list[1] 和 list["1"]是一樣的。

在JavaScript語(yǔ)言中，對(duì)象有兩種讀取成員的方法：“點(diǎn)”結(jié)構(gòu)（object.key）和方括號(hào)結(jié)構(gòu)（object[key]）。但是，對(duì)于數(shù)值的屬性名，不能使用點(diǎn)結(jié)構(gòu)，所以我們一般使用數(shù)組時(shí)都是方括號(hào)結(jié)構(gòu)，比如list[0]。數(shù)組也可以添加非整數(shù)數(shù)值類(lèi)的屬性，比如：

var list = ["a", "b", "c"];
list.name = "haha";
list["age"] = "25";
Object.keys(list); // ["0", "1", "2", "name", "age"]
console.log(list.length); // 3

可以看到上面的數(shù)組增加了name和age兩個(gè)屬性，并且包含在了Object.keys返回的屬性名中，但是非整數(shù)數(shù)值類(lèi)的屬性不會(huì)影響數(shù)組的length值。

另外，我們使用能轉(zhuǎn)換成整數(shù)的數(shù)值類(lèi)屬性名（索引），那么會(huì)先將該數(shù)值轉(zhuǎn)換成整數(shù)，比如：

var list = ["a", "b", "c"];
list[1.000] = "bb";
console.log(list[1]); // "bb"
list[1.01] = "ffffdd"; // 1.01不能轉(zhuǎn)換成整數(shù)，所以會(huì)生成一個(gè)新的屬性
console.log(list); // ["a", "bb", "c", 1.01: "ffffdd"]
list["1.00"] = "eeee"; // 字符串型也不會(huì)轉(zhuǎn)換成整數(shù)，也會(huì)生成新的屬性
console.log(list); // ["a", "bb", "c", 1.01: "ffffdd", 1.00: "eeee"]
console.log(list.length); // 3

2、數(shù)組的長(zhǎng)度可以動(dòng)態(tài)改變

每個(gè)數(shù)組都有一個(gè)length屬性，在JavaScript語(yǔ)言中l(wèi)ength屬性值是 0 至 2³²-1 之間的整數(shù)，并且不是只讀的，而是可以手動(dòng)修改的，例如我們經(jīng)常將一個(gè)數(shù)組的長(zhǎng)度置為0，來(lái)達(dá)到清空數(shù)組的目的：

var list = [1, 2, 3, 4, 5];
list.length = 0;
console.log(list); // []

那么我們?cè)龃髷?shù)組的 length 會(huì)怎么樣？這引出了數(shù)組中 length 和索引之間的關(guān)系

JavaScript中數(shù)組的length值并不完全等于數(shù)組中的元素?cái)?shù)量，實(shí)際上在默認(rèn)的情況下length屬性的值只是保證大于索引值中的最大值。

當(dāng)我們減小數(shù)組的length值時(shí)，數(shù)組就會(huì)舍棄那些小于和等于length值的索引和數(shù)據(jù)，當(dāng)我們?cè)黾訑?shù)組的length值時(shí)，因?yàn)楸旧砭头蟣ength屬性值的規(guī)則，所以數(shù)組除了length值外，元素“不會(huì)發(fā)生變化”：

var list = [1, 2, 3, 4, 5];
list.length = 10;
console.log(list); // (10)?[1, 2, 3, 4, 5, empty × 5]

如上面結(jié)果所示，當(dāng)length增加到10，打印數(shù)組中l(wèi)ength為10，元素中有5個(gè)empty元素，這就是說(shuō)數(shù)組中有5個(gè)“空氣”元素，使用 in 運(yùn)算符 和 Object.keys方法打印索引時(shí)會(huì)發(fā)現(xiàn)5，6，7，8，9這幾個(gè)索引并不存在：

4 in list // true
5 in list // false
Object.keys(list) // ["0", "1", "2", "3", "4"]

像上面這種存在“空氣”的數(shù)組叫做 “稀疏數(shù)組（sparse array）”，稀疏數(shù)組的索引不會(huì)持續(xù)的被創(chuàng)建。與稀疏數(shù)組對(duì)立的為“密集數(shù)組（dense array）”，密集數(shù)組的索引會(huì)被持續(xù)的創(chuàng)建，并且其元素的數(shù)量等于其長(zhǎng)度。

3、同一個(gè)數(shù)組中可以存儲(chǔ)不同類(lèi)型的數(shù)據(jù)

像Java等強(qiáng)類(lèi)型的編程語(yǔ)言中，一個(gè)數(shù)組只能存放一種類(lèi)型的數(shù)據(jù)，但是在JavaScript語(yǔ)言中，一個(gè)數(shù)組可以存放不同類(lèi)型的數(shù)據(jù)：

var list = [];
list[0] = 1;
list[1] = "a";
list[2] = {key: "name"};
list[3] = ["aaa"];
list[4] = null;
console.log(list); // [1, "a", {…}, Array(1), null]

上面的代碼中，一個(gè)數(shù)組的5個(gè)元素分別是數(shù)字、字符串、對(duì)象、數(shù)組、null。

數(shù)組主要有三種基本的創(chuàng)建方式：字面量方式、構(gòu)造函數(shù)方式和Array.of()

// 創(chuàng)建一個(gè)長(zhǎng)度為 0 的空數(shù)組數(shù)組
var array = [];
// 創(chuàng)建一個(gè)長(zhǎng)度為 3 的數(shù)組，并初始化了3 個(gè)元素："red" "green" "blue"
var colors = ["red", "green", "blue"];
// 創(chuàng)建了一個(gè)長(zhǎng)度為 4 的數(shù)組，數(shù)組中每一項(xiàng)的類(lèi)型都不同
var someArray = ["1", 2, {}, null];

// 創(chuàng)建一個(gè)長(zhǎng)度為 0 的空數(shù)組
var array = new Array();
//創(chuàng)建一個(gè)長(zhǎng)度為 5 的數(shù)組，每個(gè)數(shù)組的元素的默認(rèn)值是 undefined。
var colors = new Array(5);
// 創(chuàng)建一個(gè)長(zhǎng)度為 3 的數(shù)組，并初始化了3 個(gè)元素："red" "green" "blue"
var colors = new Array("red", "green", "blue");

使用構(gòu)造函數(shù)創(chuàng)建數(shù)組對(duì)象的時(shí)候，new 關(guān)鍵字是可以省略的。 例如：

var colors = Array(5);

注意：使用構(gòu)造函數(shù)如果只傳入了一個(gè)Number值，則這個(gè)值必須 >= 0, 否則會(huì)報(bào)錯(cuò)。

為了彌補(bǔ)new Array()和Array()在傳入不同個(gè)數(shù)的參數(shù)時(shí)輸出不一致的問(wèn)題，ES6版本中新增了Array.of()方法創(chuàng)建數(shù)組，不論參數(shù)的個(gè)數(shù)多少，of方法的參數(shù)始終為數(shù)組的元素

Array.of(7); // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

在前端編程中還有一部分?jǐn)?shù)據(jù)，它們具有數(shù)組的部分特征，但又不是數(shù)組、不能使用全部的數(shù)組API，我們把這種數(shù)據(jù)稱(chēng)為“類(lèi)數(shù)組（ArrayLike）”，類(lèi)數(shù)組的定義為：

擁有l(wèi)ength屬性，并且length >= 0，其它屬性（索引）為非負(fù)整數(shù)或非負(fù)整數(shù)字符串，不具有數(shù)組所具有的方法。

比如：

var al = {"0": "abc", "1": "edf", length: 2};

上面的al對(duì)象就可以稱(chēng)為類(lèi)數(shù)組對(duì)象，要想把類(lèi)數(shù)組轉(zhuǎn)換成數(shù)組，一般使用數(shù)組的slice方法：

var arr = Array.prototype.slice.call(al);
console.log(arr); // ["abc", "edf"]

另外在ES6版本中新增了Array.from()方法用于將類(lèi)數(shù)組數(shù)據(jù)和可迭代的對(duì)象轉(zhuǎn)換成數(shù)組：

var arr = Array.from(al);
console.log(arr); // ["abc", "edf"]

類(lèi)數(shù)組轉(zhuǎn)換成數(shù)組的過(guò)程中，會(huì)創(chuàng)建和length的值相等長(zhǎng)度的數(shù)組，符合非負(fù)整數(shù)索引的屬性值會(huì)填充到相應(yīng)的位置，其他的不符合規(guī)則的屬性會(huì)被拋棄，比如：

var al = {"1": "abc", "2": "edf", "name": "haha", length: 5};
var arr = Array.prototype.slice.call(al);
console.log(arr); // [empty, "abc", "edf", empty × 2]
console.log(Object.keys(arr)); // ["1", "2"]

可以看到al對(duì)象中的length屬性值為5，則轉(zhuǎn)換后的數(shù)組長(zhǎng)度為5，有"1"和"2"兩個(gè)符合規(guī)則的索引，所以填充到arr[1]和arr[2]的位置，其他位置則為empty，name不符合規(guī)則被拋棄了，最終也沒(méi)有體現(xiàn)在keys中。如果對(duì)象中沒(méi)有符合規(guī)則的索引，則數(shù)組中的元素全部為empty。

在前端編程中經(jīng)常遇到的類(lèi)數(shù)組數(shù)據(jù)有函數(shù)的arguments對(duì)象、DOM元素集和字符串，我們都可以先把它們轉(zhuǎn)換數(shù)組再調(diào)用數(shù)組的API，另外在不轉(zhuǎn)換成數(shù)組的情況下還有一種方法可以讓類(lèi)數(shù)組對(duì)象使用數(shù)組的API，就是通過(guò)call()方法把數(shù)組的方法放到對(duì)象上面：

function log() {
  Array.prototype.forEach.call(arguments, function (item, i) {
    console.log(i + " = " + item);
  });
}

不過(guò)這種方式要比數(shù)組調(diào)用API方式效率低，所以建議先轉(zhuǎn)換成數(shù)組后再調(diào)用數(shù)組API。

JavaScript中經(jīng)常用于判斷數(shù)據(jù)類(lèi)型的方法主要有typeof和instanceof，文章開(kāi)始時(shí)提到數(shù)組是特殊的對(duì)象

typeof([]) === typeof({}) // true

所以不能區(qū)別數(shù)組還是對(duì)象，使用instanceof可以判斷

var arr = [1, 2, 3];
console.log(arr instanceof Array); // true

但是使用instanceof檢測(cè)有一個(gè)弊端，不能跨頁(yè)面(iFrame)檢測(cè)數(shù)組，后來(lái)為了兼容跨頁(yè)面的情況，換了一種方式檢測(cè)：

var arr = [1, 2, 3];
console.log("[object Array]" === Object.prototype.toString.call(arr)); // true

鑒于上面說(shuō)的各種問(wèn)題，JavaScript在ECMAScript 5版本中加入了Array.isArray()方法來(lái)檢測(cè)數(shù)組，它相比instanceof也兼容了跨頁(yè)面的情況：

var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;
var arr = new xArray(1,2,3);

console.log(Array.isArray(arr));  // true
console.log(arr instanceof Array); // false

關(guān)于instanceof的工作原理可以參看 JavaScript instanceof 運(yùn)算符深入剖析
關(guān)于如何精確的判定數(shù)組可以參看 嚴(yán)格判定JavaScript對(duì)象是否為數(shù)組

遍歷數(shù)組主要使用for、for...in和ES6新增的for...of三種遍歷方式：

var arr = ["a", "b", "c"];
arr.name = "haha";

for (var i = 0, len = arr.length; i < len; i++) {
  console.log(i); // "0", "1", "2"
  console.log(arr[i]); // "a", "b", "c"
}

for (var i in arr) {
  console.log(i); // "0", "1", "2", "name"
  console.log(arr[i]); // "a", "b", "c", "haha"
}

for (var i of arr) {
  console.log(i); // "a", "b", "c"
}

這三種遍歷的區(qū)別在于，for循環(huán)是在遍歷循環(huán)變量i，把i當(dāng)作索引后取數(shù)組的元素。for...in是遍歷數(shù)組對(duì)象的全部key，所以不但能遍歷到索引的元素，還能遍歷到額外屬性的key。for...of是直接遍歷數(shù)組對(duì)象的元素，也只能遍歷到有索引的元素。

關(guān)于for...of的詳細(xì)機(jī)制可以參考ES6中的 Iterator 和 for...of循環(huán)。

大多數(shù)時(shí)候不推薦使用for...in方式遍歷數(shù)組，但是如果是稀疏數(shù)組，for...in就會(huì)比for有一定優(yōu)勢(shì)了

var arr = new Array(10); // [empty × 10]
arr[5] = 1; // [empty × 5, 1, empty × 4]

for (var i = 0, len = arr.length; i < len; i++) {
  console.log(i);
}
// 0、1、2、3、4、5、6、7、8、9

for (var key in arr) {
  console.log(key);
}
// 5

可以看到for循環(huán)執(zhí)行了10次，for...in看起來(lái)執(zhí)行一次，這種情況還可以使用for...of或者后面介紹的數(shù)組遍歷的api方法。

JavaScript語(yǔ)言為數(shù)組提供了很多API來(lái)操作和遍歷數(shù)組，根據(jù)時(shí)間順序整理如下

ES3版本API：

在上面這些api中大家應(yīng)該多留意可以改變?cè)瓟?shù)組的api，尤其是sort、reverse、splice這幾個(gè)方法，
有時(shí)忽略了改變?cè)瓟?shù)組的行為，造成很難排查的問(wèn)題。
另外使用`pop()`和`shift()`刪除元素是影響數(shù)組的長(zhǎng)度的。
也可以使用`delete`方式刪除元素，但這種是不影響長(zhǎng)度的，被刪除的元素會(huì)變成`empty`。

var arr = [1 ,2, 3];
delete arr[1];
console.log(arr); // [1, empty, 3]

ES5新增API：

ES5版本新增的遍歷數(shù)組的API有一些共同特點(diǎn)：

第一個(gè)參數(shù)是函數(shù)，對(duì)數(shù)組的每個(gè)元素調(diào)用一次該函數(shù)

如果是稀疏數(shù)組，對(duì)不存在的元素不調(diào)用傳遞的函數(shù)

都不主動(dòng)修改原始數(shù)組（可以通過(guò)參數(shù)引用修改，但是不推薦）

這些新增的遍歷API和for循環(huán)相比更加簡(jiǎn)潔和明確，但是大多數(shù)方法都不能從后往前遍歷數(shù)組，對(duì)數(shù)組本身進(jìn)行增刪元素比較麻煩。雖然可以通過(guò)參數(shù)引用修改原數(shù)組元素甚至增刪元素，但是往往會(huì)改變遍歷的行為，所以使用這類(lèi)方法時(shí)最好不要對(duì)原數(shù)組進(jìn)行修改，以forEach為例，MDN上給出的解釋為：

forEach 遍歷的范圍在第一次調(diào)用 callback 前就會(huì)確定。調(diào)用forEach 后添加到數(shù)組中的項(xiàng)不會(huì)被 callback訪(fǎng)問(wèn)到。如果已經(jīng)存在的值被改變，則傳遞給 callback 的值是 forEach 遍歷到他們那一刻的值。已刪除的項(xiàng)不會(huì)被遍歷到。如果已訪(fǎng)問(wèn)的元素在迭代時(shí)被刪除了(例如使用 shift()) ，之后的元素將被跳過(guò)。

var words = ["one", "two", "three", "four"];
words.forEach(function(word) {
  console.log(word);
  if (word === "two") {
    words.shift();
  }
});
// one
// two
// four

上面的例子輸出"one", "two", "four"。當(dāng)?shù)竭_(dá)包含值"two"的項(xiàng)時(shí)，整個(gè)數(shù)組的第一個(gè)項(xiàng)被移除了，這導(dǎo)致所有剩下的項(xiàng)上移一個(gè)位置。因?yàn)樵?"four"現(xiàn)在在數(shù)組更前的位置，"three"會(huì)被跳過(guò)。 forEach()不會(huì)在迭代之前創(chuàng)建數(shù)組的副本。

使用這些遍歷的api時(shí)大家應(yīng)該了解每個(gè)方法的參數(shù)要求和執(zhí)行邏輯，以便在不同的業(yè)務(wù)邏輯下使用正確的方法。

ES6新增API：

ES7新增API：

目前我們判斷數(shù)組是否包含一個(gè)元素一般都是使用indexOf()，相比而言includes()更加語(yǔ)義化，同時(shí)它的底層實(shí)現(xiàn)也不是嚴(yán)格的使用===來(lái)判斷，這點(diǎn)在NaN的判定上可以體現(xiàn)，但是對(duì)象的判斷也還是需要是相同的引用

var arr = [NaN];
arr.indexOf(NaN); // -1
arr.includes(NaN); // true

var obj = {a: 1};
var arr = [obj];
arr.indexOf(obj); // 0
arr.includes(obj); // true
arr.indexOf({a: 1}); // -1
arr.includes({a: 1}); // false

關(guān)于數(shù)組的總結(jié)暫時(shí)先到這里，關(guān)于數(shù)組和API更全的說(shuō)明可以參考MDN的資料：Array