建立 Array 的別種方法

有些時候蠻實用的。

以數列來舉例

假設想產生 1~10 的數列，有以下幾種做法：

Array(n) + map

console.log(Array(10).fill(0).map((elem, index) => index + 1))

步驟是這樣子：

Array(10) => [empty x 10]
fill(0) => [0, 0, 0, ...]
map((elem, index) => index + 1) => return 1, return 2, return 3, ...

因為元素一開始是 empty，map 是收不到的，所以一定要先用 fill 來填值 map 才能收到。

Array.from({length: n}) + map

console.log(Array.from({length: 10}).map((elem, index) => index + 1))

解釋一下，Array.from() 是在裡面塞 array-like 的物件來「產生新陣列」，而粗略一點來說只要有 length 屬性的物件都可以當作是 array-like，所以：

const newArr1 = Array.from('str')
const newArr2 = Array.from({a: '1', b: '2', c: '3'}) // 真的物件
const newArr3 = Array.from({a: '1', b: '2', c: '3', length: 3}, ) // array-like
const newArr4 = Array.from({0: 'A', 1: 'B', 2: 'C', length: 3}, ) // array-like
console.log(newArr1) // ['s', 't', 'r']
console.log(newArr2) // []
console.log(newArr3) // [undefined, undefined, undefined]
console.log(newArr4) // ['A', 'B', 'C']

Array.from 會試著用 obj[i] 去存取 key 對應到的 value，所以 newArr4 可以得到 'A' 'B' 'C' 但是 newArr3 只會得到 undefined（因為沒有對應的 key 值）

所以 Array.from({length: 10} 其實就是幫你產生 10 個 undefined 的元素，像這樣：

Array.from({length: 10}) => [undefined, undefined, undefined, undefined, ...]

接著再用 map 來改成我們希望的值而已，原理其實就跟第一種方法一模一樣：

[undefined, undefined,].map(elem, index) => index + 1) => [1, 2, 3, ...]

或其實整個程式碼還可以再縮寫成這樣：

console.log(Array.from({length: 10}, (elem, index) => index + 1))

因為 Array.from 的第二個參數就是 map。