JS 裏怎麼給數組填充默認值

今天看到一段代碼：

Array.apply(null, Array(30)).map(() => 4)

這代碼的寫法沒法讓人一下理解它的意圖。
Google 以後知道它的做用是構造一個長度爲 30 的數組，默認值是 4。

解析

可是爲何要寫得這麼彆扭呢？咱們來分解下它每一步在作什麼：

Array.apply(null, Array(30))

這一段代碼生成一個長度爲30的數組，裏面的值都是 undefined。
以後的 .map(() => 4) ：負責填充默認值

可是爲何構造一個空值數組須要這麼麻煩呢？還要用上 apply 方法，嘗試用 Array(30).map(() => 4) 來生成數組的話，你會獲得這樣的一個結果，根本就沒有值。

[ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ]

查看文檔 能夠看到 Array 的構造函數語法，能夠得知 Array 支持兩種構造方式。使用參數形式給定 N 個數組元素，或者給定一個數組長度。
不過比較重要的一點文檔裏沒提到，使用 new Array(arrayLength) 方式構造的數組是一個稀疏數組，裏面是沒有任何值的，只有長度。因此這個方式構造出來的數組是沒法遍歷的，也就沒法用 map 遍歷填充值了。

知道了上述的緣由，咱們就能理解：

Array.apply(null, Array(30))
其實等於
Array.apply(null, [, , , , , , , , , , , , , , , , , , , , , , , , , , , , ,]))

而後咱們要繼續瞭解 apply 方法，在這裏能夠看 apply 的做用 文檔解釋， 這裏不做介紹。apply 方法會把生成的稀疏數組展開並當作參數再次傳給 Array 的構造函數，就是這樣子：

Array(null,null,null......))

這樣最終就會獲得一個數組，這樣就不是稀疏數組了，裏面是有值的，雖然是 undefined。

[ undefined, undefined, undefined ......]

結語

總結下，其實就是 js 的 Array 的默認構造函數生成的是稀疏數組，是沒法用 map 遍歷填充的。因此才寫得這麼繞。

不過，說了這麼多，要實現本來的需求，其實有更簡單的方法啦：

Array(30).fill(4)

fill 方法的說明