數組空位元素的處理

以前看到知乎上的這道題：如何不使用loop循環，建立一個長度爲100的數組，而且每一個元素的值等於它的下標？，在這個問題裏面題主提到，他寫了這麼一段代碼：

'use strict'
let arr = Array(100).map( (item,idx) =>  idx)

結果arr是一個有100個空位的數組:

這說明Array.prototype.map()會跳過空位元素嘛。

而後我在下面的答案裏看到這麼一條：

Array.from(new Array(100), (item, idx) => idx)

//or the alternative
Array.from({length: 5}, (item, idx) => idx)

我原本是以爲，這個確定也不行嘛，這倆都是用Array構造函數新建了一個全是空位的數組嘛，怎麼會不同呢？結果試了一下以後發現竟然成功地獲得了數組。我開始懷疑Array.from的map函數的實現和Array.prototype.map有不同的地方。再加上MDN的文檔也來搗亂：

Array.from(arrayLike[, mapFn[, thisArg]])

#arrayLike

An array-like or iterable object to convert to an array.

#mapFn

Optional. Map function to call on <every element of the array>.

#thisArg

Optional. Value to use as this when executing mapFn.

在這裏mapFn下面明確地指出mapFn會調用every element of the array.

而在map函數那邊：

callback is invoked only for indexes of the array which have assigned values, including undefined. It is not called for missing elements of the array.

明確說明會跳過空位元素，因此我就想是否是這倆傢伙的map方法自己不一致。

固然結論並無這麼厲害 Orz...後來我偶然間發現原來是由於Array.from()方法會把數組的空位轉爲undefined.也就是說數組空位元素的處理和map方法的實現是無關的。

---

數組空位元素的處理

• forEach(), filter(), every() 和some()都會跳過空位。

• map()會跳過空位，但會保留這個值

• join()和toString()會將空位視爲undefined，而undefined和null會被處理成空字符串

// forEach方法
[,'a'].forEach((x,i) => log(i)); // 1

// filter方法
['a',,'b'].filter(x => true) // ['a','b']

// every方法
[,'a'].every(x => x==='a') // true

// some方法
[,'a'].some(x => x !== 'a') // false

// map方法
[,'a'].map(x => 1) // [,1]

// join方法
[,'a',undefined,null].join('#') // "#a##"

// toString方法
[,'a',undefined,null].toString() // ",a,,"

ES6則是明確將空位轉爲undefined,Array.from方法會將數組的空位轉爲undefined,也就是說，這個方法不會忽略空位:

Array.from(['a',,'b'])
// [ "a", undefined, "b" ]

擴展運算符（...）也會將空位轉爲undefined:

[...['a',,'b']]
// [ "a", undefined, "b" ]

for...of循環也會遍歷空位:

let arr = [, ,];
for (let i of arr) {
  console.log(1);
}
// 1
// 1

entries()、keys()、values()、find()和findIndex()會將空位處理成undefined:

// entries()
[...[,'a'].entries()] // [[0,undefined], [1,"a"]]

// keys()
[...[,'a'].keys()] // [0,1]

// values()
[...[,'a'].values()] // [undefined,"a"]

// find()
[,'a'].find(x => true) // undefined

// findIndex()
[,'a'].findIndex(x => true) // 0

參考：阮一峯ES2015