摘要：數(shù)組的本質(zhì)數(shù)組屬于一種特殊的對(duì)象。運(yùn)算符會(huì)返回?cái)?shù)組的類(lèi)型是對(duì)象的鍵名一律為字符串，所以，數(shù)組的鍵名其實(shí)也是字符串。數(shù)組的空位讀取遍歷無(wú)兩個(gè)逗號(hào)之間沒(méi)有任何值，我們稱該數(shù)組存在空位。數(shù)組的方法可以將類(lèi)似數(shù)組的對(duì)象變成真正的數(shù)組。

定義
數(shù)組的本質(zhì)
length 屬性
in 運(yùn)算符
for...in 循環(huán)和數(shù)組的遍歷
數(shù)組的空位
類(lèi)似數(shù)組的對(duì)象
參考鏈接

1.定義

任何類(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ù)組的元素還是數(shù)組，就形成了多維數(shù)組。

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

2.數(shù)組的本質(zhì)
數(shù)組屬于一種特殊的對(duì)象。typeof運(yùn)算符會(huì)返回?cái)?shù)組的類(lèi)型是object
var arr = ["a", "b", "c"];

Object.keys(arr)
// ["0", "1", "2"]

對(duì)象的鍵名一律為字符串，所以，數(shù)組的鍵名其實(shí)也是字符串。之所以可以用數(shù)值讀取，是因?yàn)榉亲址逆I名會(huì)被轉(zhuǎn)為字符串。

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

arr["0"] // "a"
arr[0] // "a"

對(duì)象的鍵名一律為字符串，所以，數(shù)組的鍵名其實(shí)也是字符串。之所以可以用數(shù)值讀取，是因?yàn)榉亲址逆I名會(huì)被轉(zhuǎn)為字符串。

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

arr["0"] // "a"
arr[0] // "a"

3.length 屬性
只要是數(shù)組，就一定有l(wèi)ength屬性。該屬性是一個(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ù)組的一個(gè)有效方法，就是將length屬性設(shè)為0。

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

arr.length = 0;
arr // []

讀取新增的位置都會(huì)返回undefined。

值得注意的是，由于數(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)?，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"

4.in 運(yùn)算符

檢查某個(gè)鍵名是否存在的運(yùn)算符in，適用于對(duì)象，也適用于數(shù)組。

注意，如果數(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。

5.for...in 循環(huán)和數(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ù)組的寫(xiě)法。最后一種寫(xiě)法是逆向遍歷，即從最后一個(gè)元素向第一個(gè)元素遍歷。

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

6.數(shù)組的空位delete length 讀取un 遍歷無(wú)

兩個(gè)逗號(hào)之間沒(méi)有任何值，我們稱該數(shù)組存在空位（hole）。

var a = [1, , 1];
a.length // 3但是非數(shù)字的不影響length 用delete也不影響

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ù)組的空位是可以讀取的，返回undefined。但是
如果是空位，使用數(shù)組的forEach方法、for...in結(jié)構(gòu)、以及Object.keys方法進(jìn)行遍歷，空位都會(huì)被跳過(guò)。

空值為undefined

如果某個(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ò)。

7.類(lèi)似數(shù)組的對(duì)象

如果一個(gè)對(duì)象的所有鍵名都是正整數(shù)或零，并且有l(wèi)ength屬性，那么這個(gè)對(duì)象就很像數(shù)組，語(yǔ)法上稱為“類(lèi)似數(shù)組的對(duì)象

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

沒(méi)有push方法
length靜態(tài)的

典型的“類(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