如何在 ECMAScript 2016 中使用数组填充器来创建新的数组？

在 ECMAScript 2015 中，JavaScript 引入了许多新的语言特性，包括箭头函数、类和模板字符串。在 ECMAScript 2016 中，又引入了一个新的特性，数组填充器（Array.fill()），让我们能够更加方便地创建新的数组。本文将详细介绍数组填充器的使用，以及如何充分利用它来实现前端开发中的一些场景。

Array.fill()

Array.fill() 方法接受三个参数：填充值、起始索引和结束索引。它会将数组中指定范围内的元素全部替换为指定的填充值。

以下是 Array.fill() 方法的语法：

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

参数详解

• value：要填充到数组中的值
• start（可选）：起始索引，默认值为 0
• end（可选）：结束索引，默认值为数组的长度

示例

让我们来看一下如何使用 Array.fill() 方法。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.fill(0, 2, 5); // 将 arr 数组中从第 2 个元素到第 5 个元素，全部替换为 0
console.log(arr); // [1, 2, 0, 0, 0, 6, 7, 8, 9, 10]

在上面的例子中，我们传入了三个参数，分别是 0、2 和 5。这表示将数组 arr 中从第 2 个元素到第 5 个元素全部替换为 0。由于 start 参数和 end 参数都是可选的，所以我们也可以不传它们：

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.fill(0); // 将 arr 数组中所有的元素，全部替换为 0
console.log(arr); // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

使用 Array.fill() 来创建新的数组

在创建新的数组时，我们可以使用 Array.fill() 方法来初始化数组。以下是一个示例：

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

在这个示例中，我们使用 Array(5) 创建了一个长度为 5 的数组，并把它的每个元素都初始化为 0。

我们还可以将其与其他数组方法结合使用，以便更好地控制新数组的值。以下是一个示例：

const arr = Array(5).fill().map(() => Math.random());
console.log(arr); // [0.6379018113064383, 0.634482340757227, 0.47889919339993587, 0.8897660192300047, 0.6590061013001868]

在这个例子中，我们使用 Array(5) 创建一个长度为 5 的数组，并将所有元素初始化为空值。接着，我们使用 map() 方法来生成一个新数组，其中每个元素都是随机数。

总结

本文向您介绍了 ECMAScript 2016 中的数组填充器 Array.fill() 方法，并演示了如何使用它创建新的数组。我们还看到了如何将其与其他数组方法结合使用，以达到更好的效果。我希望这篇文章能够帮助您更好地理解数组填充器的使用，以及如何在前端开发中应用它。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a0a51dadd4f0e0ff8e5b78