當(dāng)數(shù)組中存在空位時(shí)，遍歷數(shù)組需要選擇合適的方法，不同的方法可能返回不同的結(jié)果，有些方法會(huì)跳過(guò)空位，有些則會(huì)返回undefined。

當(dāng)數(shù)組中存在空位時(shí)，遍歷數(shù)組需要選擇合適的方法，不同的方法可能返回不同的結(jié)果。

示例數(shù)組：

const arr = [1, 2, , 3, 4];

數(shù)組空位不會(huì)影響數(shù)組長(zhǎng)度，arr的長(zhǎng)度是 5。

for循環(huán)

最樸素的 for 循環(huán)會(huì)遍歷到數(shù)組的每一位，對(duì)于空位，訪問(wèn)時(shí)返回 undefined。

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

輸出：

1        
2        
undefined
4        
5  

forEach方法

forEach 方法會(huì)跳過(guò)空位，所以這里只遍歷到了4個(gè)數(shù)。

arr.forEach(el=>{
  console.log(el);
});

輸出：

1        
2        
4        
5

for in 方法

for-of 和普通的 for循環(huán)結(jié)果是一樣的，這里看 for-in 的結(jié)果。

for-in 遍歷數(shù)組對(duì)象的可枚舉屬性鍵，會(huì)跳過(guò)空位。

for(let key in arr){
  console.log(arr[key]);
}

輸出：

1
2
4
5

數(shù)組的entries方法

數(shù)組的 entries 方法返回一個(gè)包含數(shù)組中每個(gè)索引的鍵值對(duì)的迭代器對(duì)象。當(dāng)遇到空位時(shí)，對(duì)應(yīng)的值讀取為 undefined。

for (let [key, value] of arr.entries()) {
  console.log([key, value]);
}

輸出：

[ 0, 1 ]
[ 1, 2 ]
[ 2, undefined ]
[ 3, 4 ]
[ 4, 5 ]

思考：什么時(shí)候會(huì)忽略空位？

根據(jù)上面4種簡(jiǎn)單的情形，可以看到 forEach方法和for-in 循環(huán)會(huì)跳過(guò)空位，而其它則不會(huì)。

事實(shí)上，除了 forEach 方法，傳入一個(gè)回調(diào)函數(shù)遍歷數(shù)組的方法都會(huì)忽略空位，包括但不限于：map, filter, reduce, find。

而 for-in 循環(huán)之所以會(huì)忽略空位，是因?yàn)榭斩磳?duì)應(yīng)的索引沒(méi)有被創(chuàng)建為可枚舉屬性，因此不會(huì)被 for-in 遍歷到。

數(shù)組作為一種對(duì)象，key 是數(shù)字索引，value 是數(shù)組元素。

同理，如果使用 Object.keys()，Object.values()，Object.entries()遍歷數(shù)組對(duì)象，會(huì)發(fā)現(xiàn)空洞都會(huì)被忽略。

但是，數(shù)組原型上的.keys，.values，.entries方法，是為數(shù)組特殊設(shè)計(jì)的，用這些方法遍歷數(shù)組，就不會(huì)跳過(guò)空位。

for-of 循環(huán)遍歷數(shù)組為什么不會(huì)跳過(guò)空位？for-of 一個(gè)數(shù)組對(duì)象，會(huì)調(diào)用它的 [Symbol.iterator] 方法返回一個(gè)迭代器。而 Array.prototype.values 是 Array.prototype[Symbol.iterator]的默認(rèn)實(shí)現(xiàn)，于是 for-of 和.values方法保持一致，都不會(huì)跳過(guò)空位。

對(duì)比總結(jié)

• for：不忽略
• for in：忽略空位
• for of：不忽略

這仨原理不一樣，只是因?yàn)殚L(zhǎng)得像所以放一起。

for in 忽略空位是和下面的對(duì)象方法一個(gè)道理。

而 for of 不忽略空位和下面數(shù)組的values等方法是一個(gè)道理。

• 對(duì)象方法 Object.keys()，Object.values()，Object.entries()：忽略空位
• 數(shù)組方法：
  • forEach，map，filter，every，reduce等：忽略空位
  • keys，values，entries：不忽略空位