原文資料:https://wangdoc.com/javascript/types/array.html
數組(array)是按次序排列的一組值。每個值的位置都有編號(從0開始),整個數組用方括號表示。
任何類型的數據,都可以放入數組。
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
數組的特殊性體現在,它的鍵名是按次序排列的一組整數(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]
表示(方括號是運算符,可以接受數值)。
length 屬性
數組的length
屬性,返回數組的成員數量。
['a', 'b', 'c'].length // 3
JavaScript 使用一個32位整數,保存數組的元素個數。這意味着,數組成員最多隻有 4294967295 個(232 - 1)個,也就是說length
屬性的最大值就是 4294967295。
只要是數組,就一定有length
屬性。該屬性是一個動態的值,等於鍵名中的最大整數加上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
上面代碼表示,數組的數字鍵不需要連續,length
屬性的值總是比最大的那個整數鍵大1
。另外,這也表明數組是一種動態的數據結構,可以隨時增減數組的成員。
length
屬性是可寫的。如果人爲設置一個小於當前成員個數的值,該數組的成員會自動減少到length
設置的值。
var arr = [ 'a', 'b', 'c' ];
arr.length // 3
arr.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{ -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
方法,也可以用來遍歷數組
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