ECMAScript 2016 的新特性：Array.prototype.fill 方法详解

ECMAScript 2016 的新特性：Array.prototype.fill 方法详解

ECMAScript 2016 引入的 Array.prototype.fill() 方法，用于将一个数组的元素全部或部分地替换成静态值，该方法的使用方法和效果极为实用。下面将为大家详细介绍该方法的语法、参数及使用方法以及示例代码。

语法

arr.fill(value, start, end)

参数

value：替换数组元素的静态值。

start（可选）：开始替换的起始下标（默认值：0）

end（可选）：替换结束的下标（默认值：arr.length）

返回值

替换后的数组

使用方法

1.全量替换

假设我们有一个数组 a，需要将其所有元素替换成 0：

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

2.部分替换

我们万一只需要将该数组的第 2 个到第 4 个元素替换成 0，那么可以传入第二个参数 2 以及第三个参数 5：

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

3.使用负数下标

我们还可以使用负数下标，这将会从数组的末尾开始计算，假如我们需要将数组的倒数第 2 个元素到倒数第 1 个元素替换成 0，可以使用如下代码：

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

4.填充一个已存在数组

还有一种情况是需要用一个已存在的数组去填充另一个数组，可以将要填充的数组作为第二个参数传入 fill() 方法中：

const a = [1, 2, 3];
const b = Array(3).fill(a);
console.log(b); // [[1, 2, 3], [1, 2, 3], [1, 2, 3]]

该代码段中，Array(3) 创建了一个长度为 3 的数组，fill(a) 则将 a 数组作为填充内容赋值给了这个新的数组。最后打印 b 可以看到，b 是由三个长度为 3 的数组构成的数组。

总结

以上就是 ECMAScript 2016 的新特性 Array.prototype.fill() 方法的详细介绍，无论是全量替换还是部分替换以及使用负数下标和填充已存在的数组，都是相当方便的。我们可以通过这个新特性，在写前端项目的时候轻松愉悦地处理数组替换问题。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ffd38f95b1f8cacde1bdc0