JavaScript數組遍歷方法小結

前言

數組是JavaScript中重要的數據類型之一，而涉及到數組運用最關鍵的知識就是遍歷數組。所以，本文將總結JavaScript中數據遍歷的各類方法，以及遍歷數組時會遇到的各類特殊狀況。

數組類型的特殊性

數組本質是Object類型，同時又有不少相似數組的對象類型，例如：字符串、arguments對象、NodeList等，所以掌握好數組的遍歷方法，也間接掌握了普通對象、相似數組對象的遍歷方法。

數組的空位與屬性

數組是任意數據類型的有序集合，所以，數組中會存在空位的狀況，而不一樣的遍歷方法對於數組的空位處理狀況不盡相同。

數組本質上是對象，所以，數組也能夠像其餘對象同樣，添加額外的屬性，而有的遍歷方法不只會遍歷數組的元素，還會把數組的屬性也遍歷出來。

var a=[1,,3];

a.test='test';

for(var i in a){
	console.log(a[i]);
}

// 1
// 3
// test
複製代碼

for循環遍歷

1. for

var a=[1,,3];

a.test='test';

for(var i=0;i<a.length;i++){
	console.log(a[i]);
}

// 1
// undefined
//3
複製代碼

2. for...in

var a=[1,,3];

a.test='test';

for(var i in a){
	console.log(a[i]);
}

// 1
// 3
// test
複製代碼

3. for...of

var a=[1,,3];

a.test='test';

for(var i of a){
	console.log(i);
}

// 1
// undefined
// 3
複製代碼

若是使用for循環遍歷數組，推薦使用for...of。

數組自身的遍歷方法

1. forEach

var a=[1,,3];

a.test='test';

a.forEach(function(n){
	console.log(n);
})

// 1
// 3
無返回值
複製代碼

2. map

var a=[1,,3];

a.test='test';

a.map(function(n){
	console.log(n);
})
// 1
// 3
返回數組：
[undefined, empty, undefined]

a.map(function(n){
	console.log(n);
	return n;
})

// 1
// 3
返回數組：
[1, empty, 3]
複製代碼

map和forEach都是數組自身的遍歷方法，可是二者不一樣的是，map在遍歷完數組後，會返回新的數組，所以若是遍歷數組不須要返回值，推薦使用forEach。