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

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

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

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

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

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

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

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

因為JavaScript語言規(guī)定對象的屬性名必須是字符串，所以我們看上面的執(zhí)行結(jié)果中都是字符串類型的數(shù)字，之所以可以用數(shù)值讀取，是因為非字符串的鍵名會被轉(zhuǎn)為字符串，所以list[1] 和 list["1"]是一樣的。

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

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兩個屬性，并且包含在了Object.keys返回的屬性名中，但是非整數(shù)數(shù)值類的屬性不會影響數(shù)組的length值。

另外，我們使用能轉(zhuǎn)換成整數(shù)的數(shù)值類屬性名（索引），那么會先將該數(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ù)，所以會生成一個新的屬性
console.log(list); // ["a", "bb", "c", 1.01: "ffffdd"]
list["1.00"] = "eeee"; // 字符串型也不會轉(zhuǎn)換成整數(shù)，也會生成新的屬性
console.log(list); // ["a", "bb", "c", 1.01: "ffffdd", 1.00: "eeee"]
console.log(list.length); // 3

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

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

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

那么我們增大數(shù)組的 length 會怎么樣？這引出了數(shù)組中 length 和索引之間的關(guān)系

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

當(dāng)我們減小數(shù)組的length值時，數(shù)組就會舍棄那些小于和等于length值的索引和數(shù)據(jù)，當(dāng)我們增加數(shù)組的length值時，因為本身就符合length屬性值的規(guī)則，所以數(shù)組除了length值外，元素“不會發(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個empty元素，這就是說數(shù)組中有5個“空氣”元素，使用 in 運算符 和 Object.keys方法打印索引時會發(fā)現(xiàn)5，6，7，8，9這幾個索引并不存在：

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

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

3、同一個數(shù)組中可以存儲不同類型的數(shù)據(jù)

像Java等強類型的編程語言中，一個數(shù)組只能存放一種類型的數(shù)據(jù)，但是在JavaScript語言中，一個數(shù)組可以存放不同類型的數(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]

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

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

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

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

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

var colors = Array(5);

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

為了彌補new Array()和Array()在傳入不同個數(shù)的參數(shù)時輸出不一致的問題，ES6版本中新增了Array.of()方法創(chuàng)建數(shù)組，不論參數(shù)的個數(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ù)稱為“類數(shù)組（ArrayLike）”，類數(shù)組的定義為：

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

比如：

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

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

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

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

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

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

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對象中的length屬性值為5，則轉(zhuǎn)換后的數(shù)組長度為5，有"1"和"2"兩個符合規(guī)則的索引，所以填充到arr[1]和arr[2]的位置，其他位置則為empty，name不符合規(guī)則被拋棄了，最終也沒有體現(xiàn)在keys中。如果對象中沒有符合規(guī)則的索引，則數(shù)組中的元素全部為empty。

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

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

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

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

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

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

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

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

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

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

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 運算符深入剖析
關(guān)于如何精確的判定數(shù)組可以參看 嚴(yán)格判定JavaScript對象是否為數(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ù)組對象的全部key，所以不但能遍歷到索引的元素，還能遍歷到額外屬性的key。for...of是直接遍歷數(shù)組對象的元素，也只能遍歷到有索引的元素。

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

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

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看起來執(zhí)行一次，這種情況還可以使用for...of或者后面介紹的數(shù)組遍歷的api方法。

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

ES3版本API：

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

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

ES5新增API：

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

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

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

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

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

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

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"的項時，整個數(shù)組的第一個項被移除了，這導(dǎo)致所有剩下的項上移一個位置。因為元素 "four"現(xiàn)在在數(shù)組更前的位置，"three"會被跳過。 forEach()不會在迭代之前創(chuàng)建數(shù)組的副本。

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

ES6新增API：

ES7新增API：

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

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é)暫時先到這里，關(guān)于數(shù)組和API更全的說明可以參考MDN的資料：Array