如何高效使用JavaScript中的Array.fill方法

一、Array.fill()方法概述

在JavaScript中，Array.fill()方法是一種非常有用的數組方法，它可以將數組中的所有元素替換為固定值，同時返回新的數組。該方法接受三個參數：fillValue，startIndex和endIndex。其中，fillValue是用來填充數組的值，startIndex和endIndex分別是數組填充的起始位置和結束位置。

   const arr1 = [1, 2, 3, 4, 5];
   const arr2 = arr1.fill(0, 2, 4);
   console.log(arr1);  // [ 1, 2, 0, 0, 5 ]
   console.log(arr2);  // [ 1, 2, 0, 0, 5 ]

可以看到，上面的代碼將數組arr1的索引從2開始到4之前的位置全部填充為0，返回的arr2和修改後的arr1是一樣的。

二、使用Array.fill()方法初始化數組

在JavaScript中，使用for循環可以遍歷一個數組，並給每個元素都賦予一個默認值，但是這種方式比較繁瑣。使用fill()方法則可以非常方便地初始化一個數組。

   const arr = Array(5).fill(0);
   console.log(arr);  // [ 0, 0, 0, 0, 0 ]

上面的代碼使用fill()方法初始化了一個長度為5的數組，將數組中的所有元素都賦值為0。

三、使用Array.fill()方法替換數組元素

除了初始化數組之外，fill()方法還可以用於替換數組元素。

   const arr = [1, 2, 3, 4, 5];
   arr.fill(0, 2, 4);
   console.log(arr);  // [ 1, 2, 0, 0, 5 ]

上面的代碼將數組arr的索引從2到4之前的位置全部替換為0。

四、使用Array.fill()方法替換多維數組元素

在多維數組中，fill()方法同樣可以很方便地替換元素。

   const arr = Array(3).fill().map(() => Array(3).fill(0));
   console.log(arr);  // [ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ]

上面的代碼創建了一個3×3的二維數組，並將所有元素都賦值為0。

五、使用Array.fill()方法合併數組

使用fill()方法不僅可以替換數組元素，還可以將多個數組合併到一起。

   const arr1 = [1, 2, 3];
   const arr2 = [4, 5, 6];
   const arr3 = Array(3).fill(0);
   const arr4 = [...arr1, ...arr2, ...arr3];
   console.log(arr4);  // [ 1, 2, 3, 4, 5, 6, 0, 0, 0 ]

上面的代碼將三個數組合併為一個，並在最後添加了三個0。

六、使用Array.fill()方法生成連續的數字數組

fill()方法還可以用來生成一組連續的數字數組。

   const arr = Array(5).fill().map((item, index) => index + 1);
   console.log(arr);  // [ 1, 2, 3, 4, 5 ]

上面的代碼使用fill()方法創建了一個長度為5的數組，然後使用map()方法將每個元素轉化為連續的數字。

七、小結

通過上面的幾個例子，我們可以看到，使用Array.fill()方法可以幫助我們快速、方便地初始化和修改數組中的元素，同時也可以用來生成一組連續的數字數組。