JavaScript 數(shù)組

目錄

數(shù)組（array）是按次序排列的一組值。每個(gè)值的位置都有編號(hào)（從0開始），整個(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';

任何類型的數(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è)成員依次是對象、數(shù)組、函數(shù)。

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

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

本質(zhì)上，數(shù)組屬于一種特殊的對象。typeof運(yùn)算符會(huì)返回?cái)?shù)組的類型是object。

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

上面代碼表明，typeof運(yùn)算符認(rèn)為數(shù)組的類型就是對象。

數(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ù)組成員的鍵名是固定的，因此數(shù)組不用為每個(gè)元素指定鍵名，而對象的每個(gè)成員都必須指定鍵名。

JavaScript語言規(guī)定，對象的鍵名一律為字符串，所以，數(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)為了字符串。

需要注意的是，這一條在賦值時(shí)也成立。如果一個(gè)值可以被轉(zhuǎn)換為整數(shù)，則以該值為鍵名，等于以對應(yīng)的整數(shù)為鍵名。

var a = [];

a['1000'] = 'abc';
a[1000] // 'abc'

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

上面代碼表明，由于字符串“1000”和浮點(diǎn)數(shù)1.00都可以轉(zhuǎn)換為整數(shù)，所以視同為整數(shù)鍵賦值。

上一節(jié)說過，對象有兩種讀取成員的方法：“點(diǎn)”結(jié)構(gòu)（object.key）和方括號(hào)結(jié)構(gòu)（object[key]）。但是，對于數(shù)值的鍵名，不能使用點(diǎn)結(jié)構(gòu)。

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

上面代碼中，arr.0的寫法不合法，因?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è)（2³² - 1）個(gè)，也就是說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屬性是可寫的。如果人為設(shè)置一個(gè)小于當(dāng)前成員個(gè)數(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ì)上是對象的一種，所以我們可以為數(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 class="highlighter-rouge">length屬性的值就是等于最大的數(shù)字鍵加1，而這個(gè)數(shù)組沒有整數(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屬性沒有發(fā)生變化。這些數(shù)字鍵都變成了字符串鍵名。最后兩行之所以會(huì)取到值，是因?yàn)槿℃I值時(shí)，數(shù)字鍵名會(huì)默認(rèn)轉(zhuǎn)為字符串。

在JavaScript中，有些對象被稱為“類似數(shù)組的對象”（array-like object）。意思是，它們看上去很像數(shù)組，可以使用length屬性，但是它們并不是數(shù)組，所以無法使用一些數(shù)組的方法。

下面就是一個(gè)類似數(shù)組的對象。

var obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

obj[0] // 'a'
obj[2] // 'c'
obj.length // 3
obj.push('d') // TypeError: obj.push is not a function

上面代碼中，變量obj是一個(gè)對象，使用的時(shí)候看上去跟數(shù)組很像，但是無法使用數(shù)組的方法。這就是類似數(shù)組的對象。

類似數(shù)組的對象只有一個(gè)特征，就是具有length屬性。換句話說，只要有length屬性，就可以認(rèn)為這個(gè)對象類似于數(shù)組。但是，對象的length屬性不是動(dòng)態(tài)值，不會(huì)隨著成員的變化而變化。

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

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

典型的類似數(shù)組的對象是函數(shù)的arguments對象，以及大多數(shù)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

數(shù)組的slice方法將類似數(shù)組的對象，變成真正的數(shù)組。

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

遍歷類似數(shù)組的對象，可以采用for循環(huán)，也可以采用數(shù)組的forEach方法。

// for循環(huán)
function logArgs() {
  for (var i = 0; i < arguments.length; i++) {
    console.log(i + '. ' + arguments[i]);
  }
}

// forEach方法
function logArgs() {
  Array.prototype.forEach.call(arguments, function (elem, i) {
    console.log(i+'. '+elem);
  });
}

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

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

檢查某個(gè)鍵名是否存在的運(yùn)算符in，適用于對象，也適用于數(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)不僅可以遍歷對象，也可以遍歷數(shù)組，畢竟數(shù)組只是一種特殊對象。

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ù)組的寫法。最后一種寫法是逆向遍歷，即從最后一個(gè)元素向第一個(gè)元素遍歷。

數(shù)組的forEach方法，也可以用來遍歷數(shù)組，詳見《標(biāo)準(zhǔn)庫》一章的Array對象部分。

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

當(dāng)數(shù)組的某個(gè)位置是空元素，即兩個(gè)逗號(hào)之間沒有任何值，我們稱該數(shù)組存在空位（hole）。

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

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

需要注意的是，如果最后一個(gè)元素后面有逗號(hào)，并不會(huì)產(chǎn)生空位。也就是說，有沒有這個(gè)逗號(hào)，結(jié)果都是一樣的。

var a = [1, 2, 3,];

a.length // 3
a // [1, 2, 3]

上面代碼中，數(shù)組最后一個(gè)成員后面有一個(gè)逗號(hào)，這不影響length屬性的值，與沒有這個(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è)位置就形成了空位，但是對length屬性沒有影響。也就是說，length屬性不過濾空位。所以，使用length屬性進(jìn)行數(shù)組遍歷，一定要非常小心。

數(shù)組的某個(gè)位置是空位，與某個(gè)位置是undefined，是不一樣的。如果是空位，使用數(shù)組的forEach方法、for...in結(jié)構(gòu)、以及Object.keys方法進(jìn)行遍歷，空位都會(huì)被跳過。

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ì)被跳過。

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']

這就是說，空位就是數(shù)組沒有這個(gè)元素，所以不會(huì)被遍歷到，而undefined則表示數(shù)組有這個(gè)元素，值是undefined，所以遍歷不會(huì)跳過。

• Axel Rauschmayer, Arrays in JavaScript
• Axel Rauschmayer, JavaScript: sparse arrays vs. dense arrays
• Felix Bohm, What They Didn’t Tell You About ES5′s Array Extras
• Juriy Zaytsev, How ECMAScript 5 still does not allow to subclass an array