ES6+ fill()

1. 前言

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

2. 方法詳情

2.1 基本語(yǔ)法

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

語(yǔ)法使用：

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

參數(shù)解釋：

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

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

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

Array(5) 會(huì)創(chuàng)建一個(gè)長(zhǎng)度為 5 的空數(shù)組，然后使用 fill 對(duì)每一項(xiàng)填充一個(gè)默認(rèn)值是 1。

2.3 兩個(gè)參數(shù)時(shí)

有兩個(gè)參數(shù)時(shí)，會(huì)從第二個(gè)參數(shù)的指定位置進(jìn)行填充。如果是負(fù)值時(shí)，則從數(shù)組的最后一項(xiàng)往前數(shù)第幾個(gè)位置開(kāi)始算起。如下示例：

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

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

2.3 三個(gè)參數(shù)時(shí)

有三個(gè)參數(shù)時(shí)，第三個(gè)參數(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"]

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

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

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

3. 填充對(duì)象問(wèn)題

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

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

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

4. 小結(jié)

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