4種JavaScript實作數組填充預設值的方式

在 JavaScript 中，我們往往會遇到需要使用某些預設值來填充數組的情況，那麼都有哪些方式可以完成這樣的功能呢？

方式一：使用Array.fill

數組執行個體上可用的array.fill(initalValue)方法是一種初始化數組的便捷方法：當在數組上調用該方法時，整個數組都用填充初始值，并傳回修改後的數組。比如：

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

如果需要用對象填充數組怎麼辦？

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

但是需要注意的是：這種方法建立了一個具有相同對象執行個體的數組。如果你碰巧修改了數組中的任何一項，那麼數組中的每一項都會受到影響：​

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 個參數：一個數組（通常是一個可疊代的）和一個映射器函數。

mapperFunction對數組的每一項調用，将結果推送到新數組，最後傳回新映射的數組。

是以Array.from()方法可以輕松地建立和初始化具有不同對象執行個體的數組：

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 }]      

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

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

我們知道直接使用Array(length)以建立數組的情況下，數組内元素為empty，如下：

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

new Array(arrayLength) 方式構造的數組是一個稀疏數組，裡面是沒有任何值的，隻有長度。是以這個方式構造出來的數組是無法周遊的，也就無法用 map 周遊填充值了。

這裡我們通過使用展開操作符可以展開一個數組，然後從展開的數組中再建立一個新的數組。使用這種方式，我們避免了使用 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()

我們可以通過下面方式建立一個長度為3的數組，裡面的值都是 undefined。

Array.apply(null, Array(3))      

apply 方法會把生成的稀疏數組展開并當做參數再次傳給 Array 的構造函數。其實等于：

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 }]      

結論

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

如果你想建立一個用原始值初始化的數組，那麼最好的方法是Array(length).fill(length)。

如果你數組記憶體放的是對象，需要保證對象具有不同的執行個體，則不能使用方式一。使用使用Array.from()、展開操作符...加array.map()、Array.apply()加array.map()這幾種方式。