ES6+ fill()

1. 前言

在定義一個數組時，需要給數組設置默認值進行填充，ES6 提供了 fill 方法，類似 copyWithin 都是替換數組中的值，fill 可以替換一個指定的值，copyWithin 則是復制數組中的值去替換指定位置的值，不能指定值。

2. 方法詳情

2.1 基本語法

fill 接收一個指定的值，替換數組中的指定位置的值，可以用于初始化默認值的數組。

語法使用：

arr.fill(value[, start[, end]])

參數解釋：

2.2 初始化一個默認值的數組

快速初始化一個數組，并填充一個值。

let arr = Array(5).fill(1)
console.log(arr)    // [1, 1, 1, 1, 1]

Array(5) 會創建一個長度為 5 的空數組，然后使用 fill 對每一項填充一個默認值是 1。

2.3 兩個參數時

有兩個參數時，會從第二個參數的指定位置進行填充。如果是負值時，則從數組的最后一項往前數第幾個位置開始算起。如下示例：

[1, 2, 3].fill(0, 0);      // [0, 0, 0]
[1, 2, 3].fill(0, 1);      // [1, 0, 0]
[1, 2, 3].fill(0, -1);     // [1, 2, 0]
[1, 2, 3].fill(0, -3);     // [0, 0, 0]

上面的代碼中，第一個值是要填充的目標元素，第二個參數是起始位置開始替換。當第二個參數是負值時，第 3 行中第二個參數是 -1 則從數組最后一個元素開始往前計算替換的長度，這里是的長度是 1，所以數組的最后一項被替換了。第 4 行中第二個參數是 -3 可以知道和數組的長度是一樣的，所以整個數組都被替換了。

2.3 三個參數時

有三個參數時，第三個參數是替換結束的位置，不包括結束的位置。

['a', 'b', 'c'].fill(4, 1, 2);    // ["a", 4, "c"]
['a', 'b', 'c'].fill(4, -3, -2);  // [4, "b", "c"]
['a', 'b', 'c'].fill(4, -3, 1);   // [4, "b", "c"]
['a', 'b', 'c'].fill(4, -2, 1);   // ["a", "b", "c"]

上面的代碼中，通過上面的示例我們可以總結一點就是，找到起始位置的元素和結束位置的元素，如果它們中間有值則把中間的值替換，起始位置的索引必須小于結束位置的索引，如果沒有則不會被替換。如：

• 第 2 行中 -3 的位置是 “a”，-2 的位置是 “b”，在數組中 “a” 和 “b” 直接沒有值，但是包含起始的 “a” 所以 “a” 會被替換。

• 第 4 行中第二個參數 -2 位置元素是 “b” 索引是 1，第三個參數 1 位置的元素是 “a” 索引是 0，起始位置的索引大于結束位置的索引，所以數組中沒有符合替換的元素。

3. 填充對象問題

值得注意的是，當使用 fill 對數組中的想填充的是對象時，對象是引用類型，更改其中一項其他項的值也會跟著改變，看以下示例：

var arr = Array(3).fill({})  // [{}, {}, {}]
arr[1].name = 'imooc';       // [{name: 'imooc'}, {name: 'imooc'}, {name: 'imooc'}] 

上面的代碼中，初始化一個默認值是一個空對象的數組，然后給數組中的其中一個元素添加屬性，其他值也會跟著改變。

4. 小結

fill 方法在初始化數組時非常實用可以快速地初始化一個帶默認值的數組，另外需要注意的是如果填充的是對象時，由于對象是引用類型的方式存儲的，所以改變其中一項中的值時其他項也會跟著改變。