數(shù)組(array)是按次序排列的一組值。每個(gè)值的位置都有編號(hào)(從0開(kāi)始),整個(gè)數(shù)組用方括號(hào)表示。
var arr = ['a', 'b', 'c'];
上面代碼中的a
、b
、c
就構(gòu)成一個(gè)數(shù)組,兩端的方括號(hào)是數(shù)組的標(biāo)志。a
是0號(hào)位置,b
是1號(hào)位置,c
是2號(hào)位置。
除了在定義時(shí)賦值,數(shù)組也可以先定義后賦值。
var arr = [];
arr[0] = 'a';
arr[1] = 'b';
arr[2] = 'c';
任何類(lèi)型的數(shù)據(jù),都可以放入數(shù)組。
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;}
上面數(shù)組arr
的3個(gè)成員依次是對(duì)象、數(shù)組、函數(shù)。
如果數(shù)組的元素還是數(shù)組,就形成了多維數(shù)組。
var a = [[1, 2], [3, 4]];
a[0][1] // 2
a[1][1] // 4
本質(zhì)上,數(shù)組屬于一種特殊的對(duì)象。typeof
運(yùn)算符會(huì)返回?cái)?shù)組的類(lèi)型是object
。
typeof [1, 2, 3] // "object"
上面代碼表明,typeof
運(yùn)算符認(rèn)為數(shù)組的類(lèi)型就是對(duì)象。
數(shù)組的特殊性體現(xiàn)在,它的鍵名是按次序排列的一組整數(shù)(0,1,2...)。
var arr = ['a', 'b', 'c'];
Object.keys(arr)
// ["0", "1", "2"]
上面代碼中,Object.keys
方法返回?cái)?shù)組的所有鍵名??梢钥吹綌?shù)組的鍵名就是整數(shù)0、1、2。
由于數(shù)組成員的鍵名是固定的(默認(rèn)總是0、1、2...),因此數(shù)組不用為每個(gè)元素指定鍵名,而對(duì)象的每個(gè)成員都必須指定鍵名。JavaScript 語(yǔ)言規(guī)定,對(duì)象的鍵名一律為字符串,所以,數(shù)組的鍵名其實(shí)也是字符串。之所以可以用數(shù)值讀取,是因?yàn)榉亲址逆I名會(huì)被轉(zhuǎn)為字符串。
var arr = ['a', 'b', 'c'];
arr['0'] // 'a'
arr[0] // 'a'
上面代碼分別用數(shù)值和字符串作為鍵名,結(jié)果都能讀取數(shù)組。原因是數(shù)值鍵名被自動(dòng)轉(zhuǎn)為了字符串。
注意,這點(diǎn)在賦值時(shí)也成立。一個(gè)值總是先轉(zhuǎn)成字符串,再作為鍵名進(jìn)行賦值。
var a = [];
a[1.00] = 6;
a[1] // 6
上面代碼中,由于1.00
轉(zhuǎn)成字符串是1
,所以通過(guò)數(shù)字鍵1
可以讀取值。
上一章說(shuō)過(guò),對(duì)象有兩種讀取成員的方法:點(diǎn)結(jié)構(gòu)(object.key
)和方括號(hào)結(jié)構(gòu)(object[key]
)。但是,對(duì)于數(shù)值的鍵名,不能使用點(diǎn)結(jié)構(gòu)。
var arr = [1, 2, 3];
arr.0 // SyntaxError
上面代碼中,arr.0
的寫(xiě)法不合法,因?yàn)閱为?dú)的數(shù)值不能作為標(biāo)識(shí)符(identifier)。所以,數(shù)組成員只能用方括號(hào)arr[0]
表示(方括號(hào)是運(yùn)算符,可以接受數(shù)值)。
數(shù)組的length
屬性,返回?cái)?shù)組的成員數(shù)量。
['a', 'b', 'c'].length // 3
JavaScript 使用一個(gè)32位整數(shù),保存數(shù)組的元素個(gè)數(shù)。這意味著,數(shù)組成員最多只有 4294967295 個(gè)(232 - 1)個(gè),也就是說(shuō)length
屬性的最大值就是 4294967295。
只要是數(shù)組,就一定有length
屬性。該屬性是一個(gè)動(dòng)態(tài)的值,等于鍵名中的最大整數(shù)加上1
。
var arr = ['a', 'b'];
arr.length // 2
arr[2] = 'c';
arr.length // 3
arr[9] = 'd';
arr.length // 10
arr[1000] = 'e';
arr.length // 1001
上面代碼表示,數(shù)組的數(shù)字鍵不需要連續(xù),length
屬性的值總是比最大的那個(gè)整數(shù)鍵大1
。另外,這也表明數(shù)組是一種動(dòng)態(tài)的數(shù)據(jù)結(jié)構(gòu),可以隨時(shí)增減數(shù)組的成員。
length
屬性是可寫(xiě)的。如果人為設(shè)置一個(gè)小于當(dāng)前成員個(gè)數(shù)的值,該數(shù)組的成員數(shù)量會(huì)自動(dòng)減少到length
設(shè)置的值。
var arr = [ 'a', 'b', 'c' ];
arr.length // 3
arr.length = 2;
arr // ["a", "b"]
上面代碼表示,當(dāng)數(shù)組的length
屬性設(shè)為2(即最大的整數(shù)鍵只能是1)那么整數(shù)鍵2(值為c
)就已經(jīng)不在數(shù)組中了,被自動(dòng)刪除了。
清空數(shù)組的一個(gè)有效方法,就是將length
屬性設(shè)為0。
var arr = [ 'a', 'b', 'c' ];
arr.length = 0;
arr // []
如果人為設(shè)置length
大于當(dāng)前元素個(gè)數(shù),則數(shù)組的成員數(shù)量會(huì)增加到這個(gè)值,新增的位置都是空位。
var a = ['a'];
a.length = 3;
a[1] // undefined
上面代碼表示,當(dāng)length
屬性設(shè)為大于數(shù)組個(gè)數(shù)時(shí),讀取新增的位置都會(huì)返回undefined
。
如果人為設(shè)置length
為不合法的值,JavaScript 會(huì)報(bào)錯(cuò)。
// 設(shè)置負(fù)值
[].length = -1
// RangeError: Invalid array length
// 數(shù)組元素個(gè)數(shù)大于等于2的32次方
[].length = Math.pow(2, 32)
// RangeError: Invalid array length
// 設(shè)置字符串
[].length = 'abc'
// RangeError: Invalid array length
值得注意的是,由于數(shù)組本質(zhì)上是一種對(duì)象,所以可以為數(shù)組添加屬性,但是這不影響length
屬性的值。
var a = [];
a['p'] = 'abc';
a.length // 0
a[2.1] = 'abc';
a.length // 0
上面代碼將數(shù)組的鍵分別設(shè)為字符串和小數(shù),結(jié)果都不影響length
屬性。因?yàn)椋?code>length屬性的值就是等于最大的數(shù)字鍵加1,而這個(gè)數(shù)組沒(méi)有整數(shù)鍵,所以length
屬性保持為0
。
如果數(shù)組的鍵名是添加超出范圍的數(shù)值,該鍵名會(huì)自動(dòng)轉(zhuǎn)為字符串。
var arr = [];
arr[-1] = 'a';
arr[Math.pow(2, 32)] = 'b';
arr.length // 0
arr[-1] // "a"
arr[4294967296] // "b"
上面代碼中,我們?yōu)閿?shù)組arr
添加了兩個(gè)不合法的數(shù)字鍵,結(jié)果length
屬性沒(méi)有發(fā)生變化。這些數(shù)字鍵都變成了字符串鍵名。最后兩行之所以會(huì)取到值,是因?yàn)槿℃I值時(shí),數(shù)字鍵名會(huì)默認(rèn)轉(zhuǎn)為字符串。
檢查某個(gè)鍵名是否存在的運(yùn)算符in
,適用于對(duì)象,也適用于數(shù)組。
var arr = [ 'a', 'b', 'c' ];
2 in arr // true
'2' in arr // true
4 in arr // false
上面代碼表明,數(shù)組存在鍵名為2
的鍵。由于鍵名都是字符串,所以數(shù)值2
會(huì)自動(dòng)轉(zhuǎn)成字符串。
注意,如果數(shù)組的某個(gè)位置是空位,in
運(yùn)算符返回false
。
var arr = [];
arr[100] = 'a';
100 in arr // true
1 in arr // false
上面代碼中,數(shù)組arr
只有一個(gè)成員arr[100]
,其他位置的鍵名都會(huì)返回false
。
for...in
循環(huán)不僅可以遍歷對(duì)象,也可以遍歷數(shù)組,畢竟數(shù)組只是一種特殊對(duì)象。
var a = [1, 2, 3];
for (var i in a) {
console.log(a[i]);
}
// 1
// 2
// 3
但是,for...in
不僅會(huì)遍歷數(shù)組所有的數(shù)字鍵,還會(huì)遍歷非數(shù)字鍵。
var a = [1, 2, 3];
a.foo = true;
for (var key in a) {
console.log(key);
}
// 0
// 1
// 2
// foo
上面代碼在遍歷數(shù)組時(shí),也遍歷到了非整數(shù)鍵foo
。所以,不推薦使用for...in
遍歷數(shù)組。
數(shù)組的遍歷可以考慮使用for
循環(huán)或while
循環(huán)。
var a = [1, 2, 3];
// for循環(huán)
for(var i = 0; i < a.length; i++) {
console.log(a[i]);
}
// while循環(huán)
var i = 0;
while (i < a.length) {
console.log(a[i]);
i++;
}
var l = a.length;
while (l--) {
console.log(a[l]);
}
上面代碼是三種遍歷數(shù)組的寫(xiě)法。最后一種寫(xiě)法是逆向遍歷,即從最后一個(gè)元素向第一個(gè)元素遍歷。
數(shù)組的forEach
方法,也可以用來(lái)遍歷數(shù)組,詳見(jiàn)《標(biāo)準(zhǔn)庫(kù)》的 Array 對(duì)象一章。
var colors = ['red', 'green', 'blue'];
colors.forEach(function (color) {
console.log(color);
});
// red
// green
// blue
當(dāng)數(shù)組的某個(gè)位置是空元素,即兩個(gè)逗號(hào)之間沒(méi)有任何值,我們稱該數(shù)組存在空位(hole)。
var a = [1, , 1];
a.length // 3
上面代碼表明,數(shù)組的空位不影響length
屬性。雖然這個(gè)位置沒(méi)有值,引擎依然認(rèn)為這個(gè)位置是有效的。
需要注意的是,如果最后一個(gè)元素后面有逗號(hào),并不會(huì)產(chǎn)生空位。也就是說(shuō),有沒(méi)有這個(gè)逗號(hào),結(jié)果都是一樣的。
var a = [1, 2, 3,];
a.length // 3
a // [1, 2, 3]
上面代碼中,數(shù)組最后一個(gè)成員后面有一個(gè)逗號(hào),這不影響length
屬性的值,與沒(méi)有這個(gè)逗號(hào)時(shí)效果一樣。
數(shù)組的空位是可以讀取的,返回undefined
。
var a = [, , ,];
a[1] // undefined
使用delete
命令刪除一個(gè)數(shù)組成員,會(huì)形成空位,并且不會(huì)影響length
屬性。
var a = [1, 2, 3];
delete a[1];
a[1] // undefined
a.length // 3
上面代碼用delete
命令刪除了數(shù)組的第二個(gè)元素,這個(gè)位置就形成了空位,但是對(duì)length
屬性沒(méi)有影響。也就是說(shuō),length
屬性不過(guò)濾空位。所以,使用length
屬性進(jìn)行數(shù)組遍歷,一定要非常小心。
數(shù)組的某個(gè)位置是空位,與某個(gè)位置是undefined
,是不一樣的。如果是空位,使用數(shù)組的forEach
方法、for...in
結(jié)構(gòu)、以及Object.keys
方法進(jìn)行遍歷,空位都會(huì)被跳過(guò)。
var a = [, , ,];
a.forEach(function (x, i) {
console.log(i + '. ' + x);
})
// 不產(chǎn)生任何輸出
for (var i in a) {
console.log(i);
}
// 不產(chǎn)生任何輸出
Object.keys(a)
// []
如果某個(gè)位置是undefined
,遍歷的時(shí)候就不會(huì)被跳過(guò)。
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']
這就是說(shuō),空位就是數(shù)組沒(méi)有這個(gè)元素,所以不會(huì)被遍歷到,而undefined
則表示數(shù)組有這個(gè)元素,值是undefined
,所以遍歷不會(huì)跳過(guò)。
如果一個(gè)對(duì)象的所有鍵名都是正整數(shù)或零,并且有length
屬性,那么這個(gè)對(duì)象就很像數(shù)組,語(yǔ)法上稱為“類(lèi)似數(shù)組的對(duì)象”(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
上面代碼中,對(duì)象obj
就是一個(gè)類(lèi)似數(shù)組的對(duì)象。但是,“類(lèi)似數(shù)組的對(duì)象”并不是數(shù)組,因?yàn)樗鼈儾痪邆鋽?shù)組特有的方法。對(duì)象obj
沒(méi)有數(shù)組的push
方法,使用該方法就會(huì)報(bào)錯(cuò)。
“類(lèi)似數(shù)組的對(duì)象”的根本特征,就是具有length
屬性。只要有length
屬性,就可以認(rèn)為這個(gè)對(duì)象類(lèi)似于數(shù)組。但是有一個(gè)問(wèn)題,這種length
屬性不是動(dòng)態(tài)值,不會(huì)隨著成員的變化而變化。
var obj = {
length: 0
};
obj[3] = 'd';
obj.length // 0
上面代碼為對(duì)象obj
添加了一個(gè)數(shù)字鍵,但是length
屬性沒(méi)變。這就說(shuō)明了obj
不是數(shù)組。
典型的“類(lèi)似數(shù)組的對(duì)象”是函數(shù)的arguments
對(duì)象,以及大多數(shù) DOM 元素集,還有字符串。
// arguments對(duì)象
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
上面代碼包含三個(gè)例子,它們都不是數(shù)組(instanceof
運(yùn)算符返回false
),但是看上去都非常像數(shù)組。
數(shù)組的slice
方法可以將“類(lèi)似數(shù)組的對(duì)象”變成真正的數(shù)組。
var arr = Array.prototype.slice.call(arrayLike);
除了轉(zhuǎn)為真正的數(shù)組,“類(lèi)似數(shù)組的對(duì)象”還有一個(gè)辦法可以使用數(shù)組的方法,就是通過(guò)call()
把數(shù)組的方法放到對(duì)象上面。
function print(value, index) {
console.log(index + ' : ' + value);
}
Array.prototype.forEach.call(arrayLike, print);
上面代碼中,arrayLike
代表一個(gè)類(lèi)似數(shù)組的對(duì)象,本來(lái)是不可以使用數(shù)組的forEach()
方法的,但是通過(guò)call()
,可以把forEach()
嫁接到arrayLike
上面調(diào)用。
下面的例子就是通過(guò)這種方法,在arguments
對(duì)象上面調(diào)用forEach
方法。
// forEach 方法
function logArgs() {
Array.prototype.forEach.call(arguments, function (elem, i) {
console.log(i + '. ' + elem);
});
}
// 等同于 for 循環(huán)
function logArgs() {
for (var i = 0; i < arguments.length; i++) {
console.log(i + '. ' + arguments[i]);
}
}
字符串也是類(lèi)似數(shù)組的對(duì)象,所以也可以用Array.prototype.forEach.call
遍歷。
Array.prototype.forEach.call('abc', function (chr) {
console.log(chr);
});
// a
// b
// c
注意,這種方法比直接使用數(shù)組原生的forEach
要慢,所以最好還是先將“類(lèi)似數(shù)組的對(duì)象”轉(zhuǎn)為真正的數(shù)組,然后再直接調(diào)用數(shù)組的forEach
方法。
var arr = Array.prototype.slice.call('abc');
arr.forEach(function (chr) {
console.log(chr);
});
// a
// b
// c
更多建議: