在 JavaScript 中，我們往往會遇到需要使用某些默認(rèn)值來填充數(shù)組的情況，那么都有哪些方式可以完成這樣的功能呢？

方式一：使用Array.fill

數(shù)組實(shí)例上可用的array.fill(initalValue)方法是一種初始化數(shù)組的便捷方法：當(dāng)在數(shù)組上調(diào)用該方法時，整個數(shù)組都用填充初始值，并返回修改后的數(shù)組。比如：

const filledArray = Array(3).fill(0);filledArray; // [0, 0, 0]

如果需要用對象填充數(shù)組怎么辦？

const filledArray = Array(3).fill({ value: 0 });filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]

但是需要注意的是：這種方法創(chuàng)建了一個具有相同對象實(shí)例的數(shù)組。如果你碰巧修改了數(shù)組中的任何一項(xiàng)，那么數(shù)組中的每一項(xiàng)都會受到影響：

const filledArray = Array(3).fill({ value: 0 });filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]filledArray[1].value = 3;filledArray; // [{ value: 3 }, { value: 3 }, { value: 3 }]

方式二：使用Array.from()

Array.from(array, mapperFunction) 接受 2 個參數(shù)：一個數(shù)組（通常是一個可迭代的）和一個映射器函數(shù)。

mapperFunction對數(shù)組的每一項(xiàng)調(diào)用，將結(jié)果推送到新數(shù)組，最后返回新映射的數(shù)組。

因此Array.from()方法可以輕松地創(chuàng)建和初始化具有不同對象實(shí)例的數(shù)組：

const filledArray = Array.from(Array(3), () => {   return { value: 0 };});filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]filledArray[1].value = 3;filledArray; // [{ value: 0 }, { value: 3 }, { value: 0 }]

可以看到修改數(shù)組中的任何一個對象，則只有該對象會受到影響，其他對象是不受影響的。

方式三：使用展開操作符...加array.map()

我們知道直接使用Array(length)以創(chuàng)建數(shù)組的情況下，數(shù)組內(nèi)元素為empty，如下：

const sparseArray = Array(3);sparseArray; // [empty × 3]

new Array(arrayLength) 方式構(gòu)造的數(shù)組是一個稀疏數(shù)組，里面是沒有任何值的，只有長度。所以這個方式構(gòu)造出來的數(shù)組是無法遍歷的，也就無法用 map 遍歷填充值了。

這里我們通過使用展開操作符可以展開一個數(shù)組，然后從展開的數(shù)組中再創(chuàng)建一個新的數(shù)組。使用這種方式，我們避免了使用 fill 方法，但是我們依舊使用了 map 方法。

const filledArray = [...Array(3)].map(() => {  return { value: 0 };});filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]filledArray[1].value = 3;filledArray; // [{ value: 0 }, { value: 3 }, { value: 0 }]

方式四：使用Array.apply()加array.map()

我們可以通過下面方式創(chuàng)建一個長度為3的數(shù)組，里面的值都是 undefined。

Array.apply(null, Array(3))

apply 方法會把生成的稀疏數(shù)組展開并當(dāng)做參數(shù)再次傳給 Array 的構(gòu)造函數(shù)。其實(shí)等于：

Array.apply(null, [, , ,])

然后同方式三，使用map：

const filledArray = Array.apply(null, Array(3)).map(() => {  return { value: 0 };});filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]filledArray[1].value = 3;filledArray; // [{ value: 0 }, { value: 3 }, { value: 0 }]

結(jié)論

JavaScript 提供了很多用初始值填充數(shù)組的好方法。

如果你想創(chuàng)建一個用原始值初始化的數(shù)組，那么最好的方法是Array(length).fill(length)。

如果你數(shù)組內(nèi)存放的是對象，需要保證對象具有不同的實(shí)例，則不能使用方式一。使用使用Array.from()、展開操作符...加array.map()、Array.apply()加array.map()這幾種方式。

學(xué)習(xí)更多技能

請點(diǎn)擊下方公眾號