.定義

數組（array）是按次序排列的一組值。每個值的位置都有編號（從0開始），整個數組用方括號表示。

var arr=['a', 'b', 'c'];

上面代碼中的a、b、c就構成一個數組，兩端的方括號是數組的標志。a是0號位置，b是1號位置，c是2號位置。

除了在定義時賦值，數組也可以先定義后賦值。

var arr=[];
arr[0]='a';
arr[1]='b';
arr[2]='c';

任何類型的數據，都可以放入數組。

var arr=[
 {a: 1},
 [1, 2, 3], function() {return true;}
];
arr[0] 
// Object {a: 1}
arr[1] 
// [1, 2, 3]
arr[2] 
// function (){return true;}

上面數組arr的3個成員依次是對象、數組、函數。

如果數組的元素還是數組，就形成了多維數組。

var a=[[1, 2], [3, 4]];
a[0][1] 
// 2
a[1][1] 
// 4

2、數組的本質

本質上，數組屬于一種特殊的對象。typeof運算符會返回數組的類型是object。

typeof [1, 2, 3] 
// "object"

上面代碼表明，typeof運算符認為數組的類型就是對象。

數組的特殊性體現在，它的鍵名是按次序排列的一組整數（0，1，2...）。

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

上面代碼中，Object.keys方法返回數組的所有鍵名。可以看到數組的鍵名就是整數0、1、2。

由于數組成員的鍵名是固定的（默認總是0、1、2...），因此數組不用為每個元素指定鍵名，而對象的每個成員都必須指定鍵名。

JavaScript 語言規定，對象的鍵名一律為字符串，所以，數組的鍵名其實也是字符串。之所以可以用數值讀取，是因為非字符串的鍵名會被轉為字符串。

var arr=['a', 'b', 'c'];
arr['0'] 
// 'a'
arr[0] 
// 'a'

上面代碼分別用數值和字符串作為鍵名，結果都能讀取數組。原因是數值鍵名被自動轉為了字符串。

注意，這點在賦值時也成立。如果一個值總是先轉成字符串，再進行賦值。

var a=[];
a[1.00]=6;
a[1] // 6

上面代碼中，由于1.00轉成字符串是1，所以通過數字鍵1可以讀取值。

上一章說過，對象有兩種讀取成員的方法：點結構（object.key）和方括號結構（object[key]）。但是，對于數值的鍵名，不能使用點結構。

var arr=[1, 2, 3];
arr.0 // SyntaxError

上面代碼中，arr.0的寫法不合法，因為單獨的數值不能作為標識符（identifier）。所以，數組成員只能用方括號arr[0]表示（方括號是運算符，可以接受數值）。

3、length 屬性

數組的length屬性，返回數組的成員數量。

['a', 'b', 'c'].length // 3

JavaScript 使用一個32位整數，保存數組的元素個數。這意味著，數組成員最多只有 4294967295 個（2³² - 1）個，也就是說length屬性的最大值就是 4294967295。

只要是數組，就一定有length屬性。該屬性是一個動態的值，等于鍵名中的最大整數加上1。

var arr=['a', 'b'];
arr.length // 2arr[2]='c';
arr.length // 3arr[9]='d';
arr.length // 10arr[1000]='e';
arr.length // 1001

上面代碼表示，數組的數字鍵不需要連續，length屬性的值總是比最大的那個整數鍵大1。另外，這也表明數組是一種動態的數據結構，可以隨時增減數組的成員。

length屬性是可寫的。如果人為設置一個小于當前成員個數的值，該數組的成員會自動減少到length設置的值。

var arr=[ 'a', 'b', 'c' ];
arr.length // 3arr.length=2;
arr // ["a", "b"]

上面代碼表示，當數組的length屬性設為2（即最大的整數鍵只能是1）那么整數鍵2（值為c）就已經不在數組中了，被自動刪除了。

清空數組的一個有效方法，就是將length屬性設為0。

var arr=[ 'a', 'b', 'c' ];
arr.length=0;
arr // []

如果人為設置length大于當前元素個數，則數組的成員數量會增加到這個值，新增的位置都是空位。

var a=['a'];
a.length=3;
a[1] // undefined

上面代碼表示，當length屬性設為大于數組個數時，讀取新增的位置都會返回undefined。

如果人為設置length為不合法的值，JavaScript 會報錯。

// 設置負值
[].length=-1
// RangeError: Invalid array length
// 數組元素個數大于等于2的32次方
[].length=Math.pow(2, 32)
// RangeError: Invalid array length
// 設置字符串
[].length='abc'
// RangeError: Invalid array length

值得注意的是，由于數組本質上是一種對象，所以可以為數組添加屬性，但是這不影響length屬性的值。

var a=[];
a['p']='abc';
a.length // 0
a[2.1]='abc';
a.length // 0

上面代碼將數組的鍵分別設為字符串和小數，結果都不影響length屬性。因為，length屬性的值就是等于最大的數字鍵加1，而這個數組沒有整數鍵，所以length屬性保持為0。

如果數組的鍵名是添加超出范圍的數值，該鍵名會自動轉為字符串。

var arr=[];
arr[-1]='a';
arr[Math.pow(2, 32)]='b';
arr.length 
// 0
arr[-1] 
// "a"
arr[4294967296] 
// "b"

上面代碼中，我們為數組arr添加了兩個不合法的數字鍵，結果length屬性沒有發生變化。

這些數字鍵都變成了字符串鍵名。最后兩行之所以會取到值，是因為取鍵值時，數字鍵名會默認轉為字符串。

in 運算符

檢查某個鍵名是否存在的運算符in，適用于對象，也適用于數組。

var arr=[ 'a', 'b', 'c' ];
2 in arr 
// true
'2' in arr 
// true
4 in arr 
// false

上面代碼表明，數組存在鍵名為2的鍵。由于鍵名都是字符串，所以數值2會自動轉成字符串。

注意，如果數組的某個位置是空位，in運算符返回false。

var arr=[];
arr[100]='a';
100 in arr 
// true
1 in arr 
// false

上面代碼中，數組arr只有一個成員arr[100]，其他位置的鍵名都會返回false。

for...in 循環和數組的遍歷

for...in循環不僅可以遍歷對象，也可以遍歷數組，畢竟數組只是一種特殊對象。

var a=[1, 2, 3];for (var i in a) { 
 console.log(a[i]);
}
 // 1// 2// 3

但是，for...in不僅會遍歷數組所有的數字鍵，還會遍歷非數字鍵。

var a=[1, 2, 3];
a.foo=true;for (var key in a) { 
console.log(key);
}// 0// 1// 2// foo

上面代碼在遍歷數組時，也遍歷到了非整數鍵foo。所以，不推薦使用for...in遍歷數組。

數組的遍歷可以考慮使用for循環或while循環。

var a=[1, 2, 3];
// for循環
for(var i=0; 
i < a.length; i++) { 
console.log(a[i]);
}
// while循環
var i=0;
while (i < a.length) { 
console.log(a[i]);
 i++;
}
var l=a.length;
while (l--) { 
console.log(a[l]);
}

上面代碼是三種遍歷數組的寫法。最后一種寫法是逆向遍歷，即從最后一個元素向第一個元素遍歷。

數組的forEach方法，也可以用來遍歷數組，詳見《標準庫》的 Array 對象一章。

var colors=['red', 'green', 'blue'];
colors.forEach(
function (color) { 
console.log(color);
});
// red
// green
// blue

數組的空位

當數組的某個位置是空元素，即兩個逗號之間沒有任何值，我們稱該數組存在空位（hole）。

var a=[1, , 1];
a.length // 3

上面代碼表明，數組的空位不影響length屬性。

需要注意的是，如果最后一個元素后面有逗號，并不會產生空位。也就是說，有沒有這個逗號，結果都是一樣的。

var a=[1, 2, 3,];
a.length 
// 3
a 
// [1, 2, 3]

上面代碼中，數組最后一個成員后面有一個逗號，這不影響length屬性的值，與沒有這個逗號時效果一樣。

數組的空位是可以讀取的，返回undefined。

var a=[, , ,];
a[1] 
// undefined

使用delete命令刪除一個數組成員，會形成空位，并且不會影響length屬性。

var a=[1, 2, 3];
delete a[1];
a[1] 
// undefined
a.length 
// 3

上面代碼用delete命令刪除了數組的第二個元素，這個位置就形成了空位，但是對length屬性沒有影響。也就是說，length屬性不過濾空位。所以，使用length屬性進行數組遍歷，一定要非常小心。

數組的某個位置是空位，與某個位置是undefined，是不一樣的。如果是空位，使用數組的forEach方法、for...in結構、以及Object.keys方法進行遍歷，空位都會被跳過。

var a=[, , ,];
a.forEach(function (x, i) { 
console.log(i + '. ' + x);
})
// 不產生任何輸出
for (var i in a) { 
console.log(i);
}
// 不產生任何輸出
Object.keys(a)
// []

如果某個位置是undefined，遍歷的時候就不會被跳過。

var a=[undefined, undefined, undefined];
a.forEach(function (x, i) { 
console.log(i + '. ' + x);
});
// 0. undefined
// 1. undefined
// 2. undefined
for (var i in a) { 
console.log(i);
}// 0
// 1
// 2
Object.keys(a)
// ['0', '1', '2']

這就是說，空位就是數組沒有這個元素，所以不會被遍歷到，而undefined則表示數組有這個元素，值是undefined，所以遍歷不會跳過。

類似數組的對象

如果一個對象的所有鍵名都是正整數或零，并且有length屬性，那么這個對象就很像數組，語法上稱為“類似數組的對象”（array-like object）。

var obj={ 
0: 'a', 1: 'b', 2: 'c', 
length: 3};
obj[0] 
// 'a'
obj[1] 
// 'b'
obj.length 
// 3
obj.push('d') 
// TypeError: obj.push is not a function

上面代碼中，對象obj就是一個類似數組的對象。但是，“類似數組的對象”并不是數組，因為它們不具備數組特有的方法。對象obj沒有數組的push方法，使用該方法就會報錯。

“類似數組的對象”的根本特征，就是具有length屬性。只要有length屬性，就可以認為這個對象類似于數組。但是有一個問題，這種length屬性不是動態值，不會隨著成員的變化而變化。

var obj={ length: 0};
obj[3]='d';
obj.length // 0

上面代碼為對象obj添加了一個數字鍵，但是length屬性沒變。這就說明了obj不是數組。

典型的“類似數組的對象”是函數的arguments對象，以及大多數 DOM 元素集，還有字符串。

// arguments對象
function args() { 
return arguments }
var arrayLike=args('a', 'b');
arrayLike[0] 
// 'a'
arrayLike.length 
// 2
arrayLike instanceof Array 
// false// DOM元素集
var elts=document.getElementsByTagName('h3');
elts.length // 3
elts instanceof Array 
// false// 字符串
'abc'[1] // 'b'
'abc'.length 
// 3
'abc' instanceof Array 
// false

上面代碼包含三個例子，它們都不是數組（instanceof運算符返回false），但是看上去都非常像數組。

數組的slice方法可以將“類似數組的對象”變成真正的數組。

var arr=Array.prototype.slice.call(arrayLike);

除了轉為真正的數組，“類似數組的對象”還有一個辦法可以使用數組的方法，就是通過call()把數組的方法放到對象上面。

function print(value, index) { 
console.log(index + ' : ' + value);
}
Array.prototype.forEach.call(arrayLike, print);

上面代碼中，arrayLike代表一個類似數組的對象，本來是不可以使用數組的forEach()方法的，但是通過call()，可以把forEach()嫁接到arrayLike上面調用。

下面的例子就是通過這種方法，在arguments對象上面調用forEach方法。

// forEach 方法
function logArgs() { 
Array.prototype.forEach.call(
arguments, function (elem, i) { 
console.log(i + '. ' + elem);
 });
}
// 等同于 for 循環
function logArgs() { for (var i=0; 
i < arguments.length; i++) { 
console.log(i + '. ' + arguments[i]);
 }
}

字符串也是類似數組的對象，所以也可以用Array.prototype.forEach.call遍歷。

Array.prototype.forEach.call('abc', 
function (chr) { 
console.log(chr);
});
// a
// b
// c

注意，這種方法比直接使用數組原生的forEach要慢，所以最好還是先將“類似數組的對象”轉為真正的數組，然后再直接調用數組的forEach方法。

var arr=Array.prototype.slice.call('abc');
arr.forEach(function (chr) { 
console.log(chr);
});
// a
// b
// c

推薦閱讀：

「JavaScript 教程」數據類型-對象

js之arguments詳解

JavaScript 2018 中即將迎來的新功能

詳解 js 閉包（圖文版）

CSS 3D 的魅力（二）