例

假設(shè)你需要生成一個從0到99的數(shù)組。你要怎么做呢？下面是一種解法：

const arr=[];
for (let i=0; i < 100; i++) {
 arr[i]=i;
}

如果你和我一樣，看到這種使用傳統(tǒng)的for循環(huán)的方式會有點不大習(xí)慣了。事實上，我已經(jīng)好多年不使用for循環(huán)寫代碼了。畢竟，各種高階函數(shù)，像forEach, map, filter, reduce足以讓我寫出各種漂亮的代碼。

也許你還沒有沉醉于函數(shù)式編程的美妙，那么你會認為上面的解法足矣。不過，如果你用過高階函數(shù)編程，你也許就會想：一定還有更加優(yōu)雅的實現(xiàn)方法。

我的第一直覺就是：首選創(chuàng)建一個長度為100的空數(shù)組，然后由map用index去初始化每一個元素。在JavaScript中，你可以用Array構(gòu)造函數(shù)來創(chuàng)建數(shù)組：

const arr=Array(100);

接下來你只需要用map就可以解決問題了：

const arr=Array(100).map((_, i)=> i);
console.log(arr[0]===undefined); // true

可是，為什么第一個元素不是0而是undefined？

解釋

為了理解為何沒有生效，我需要首先講清楚一個非常重要的技術(shù)點。在內(nèi)部，JavaScript數(shù)組實際上是對象，對象里面的屬性名是數(shù)字，對應(yīng)數(shù)組的下標(biāo)。舉個例子：

['a', 'b', 'c']

它實際上等價于：

{
 0: 'a',
 1: 'b',
 2: 'c',
 length: 3
}

當(dāng)你去訪問數(shù)組的第0個元素的時候，實際上訪問的是對象中屬性名為0的元素。接下來我們會解釋為何剛剛的代碼沒有效果。

當(dāng)你使用Array構(gòu)造函數(shù)來新建一個數(shù)組，那么它會創(chuàng)建一個新的數(shù)組對象，并且將長度length設(shè)定為指定的值。但是，對象里面沒有數(shù)組索引：

{
 //no index keys!
 length: 100
}

當(dāng)你去訪問數(shù)組的第0個元素的時候，返回值為undefined。但并不是指第0個元素得值為undefined，而是當(dāng)數(shù)組下標(biāo)不存在的時候，默認的返回值。

并且如果數(shù)組下標(biāo)不存在的話，其實map函數(shù)并沒有真正的對每一個元素執(zhí)行操作。因為只有當(dāng)下標(biāo)存在的時候，map的回調(diào)函數(shù)才會執(zhí)行。

解法

因此，我們只需要在數(shù)組對象中構(gòu)造出數(shù)組的下標(biāo)就可以了。最好的方法就是用展開運算符：

const arr=[...Array(100)].map((_, i)=> i);
console.log(arr[0]);
// 0

使用展開運算符后的數(shù)組對象：

{
 0: undefined,
 1: undefined,
 2: undefined,
 ...
 99: undefined,
 length: 100
}

就可以順利使用map函數(shù)了。

關(guān)于Fundebug

Fundebug專注于JavaScript、微信小程序、小游戲BUG監(jiān)控，自從2016年雙十一正式上線，F(xiàn)undebug已經(jīng)服務(wù)了一年半時間，累計處理了5億+錯誤事件，得到了眾多知名用戶的認可。Fundebug支持主流前端框架的bug監(jiān)控，歡迎各位老鐵體驗！

補充一個方法：

Array.from({length: 100}, (_, i)=> i);

解決。