ES6+ fill()

1. 前言

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

2. 方法詳情

2.1 基本語法

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

語法使用：

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

參數(shù)解釋：

2.2 初始化一個默認值的數(shù)組

快速初始化一個數(shù)組，并填充一個值。

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

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

2.3 兩個參數(shù)時

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

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

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

2.3 三個參數(shù)時

有三個參數(shù)時，第三個參數(shù)是替換結(jié)束的位置，不包括結(jié)束的位置。

['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"]

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

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

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

3. 填充對象問題

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

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

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

4. 小結(jié)

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