在ECMAScript 2018（ES9）中，JavaScript添加了一个新的方法：Array.prototype.fill()。这个方法可以很方便地填充一个数组，深受前端开发者们的喜爱。本文将详细介绍 fill() 的用途和语法，并提供一些实用示例。
什么是 fill()？
fill() 是一个原生的 JavaScript 数组方法，在 ES6 中引入，它可以为已有的数组通过重复给定的值来填充元素。到了 ES9，这个方法得到了升级，现在它支持使用可选参数 start 和 end 来指定要填充的范围。
fill() 方法接受两个参数：
- value： 填充的值
- start（可选）：起始索引，默认值是 0，也就是从第一个元素开始填充。
- end （可选）：结束索引，默认对应最后一个元素的下一个位置，即填充整个数组。
fill() 获取到值之后，将把指定区域内的所有元素替换成这个值。使用此方法的执行过程如下：
- 如果没有传递任何参数，则会在数组的每个位置填充 undefined。
- 否则，将会遍历数组从 start 到 end 的索引并填充 value。任何存在的元素都将被替换为该值。
fill() 的使用场景
fill() 在处理某些数据结构时非常有用，比如初始化数组或者创建一定长度的连续数列。因为在这些情形下，我们需要快速地填充一个确定大小的数组，并且每个元素都必须采用相同的值，在这种情况下，fill() 就派上用场了。
以下是一些简单的示例：
示例 1：初始化数组
const arr = new Array(5).fill(0); // [0, 0, 0, 0, 0]
在上面的例子中，Array 构造函数被调用并传入了一个长度为 5 的数组，然后 fill() 方法将用 0 来填充数组。结果会生成一个长度为 5 的全 0 数组。
示例 2：代替 for 循环
使用 JavaScript 中的 for 循环遍历更新数组元素值时，通常要写一些重复冗长的代码。
const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
arr[i] = 0;
}
// [0, 0, 0, 0, 0]现在，通过使用Array.prototype.fill()方法，我们可以更轻松地完成同样的操作：
const arr = [1, 2, 3, 4, 5].fill(0); // [0, 0, 0, 0, 0]
示例 3：根据索引填充数组
const arr = ['apple', 'banana', 'orange'].fill('peach', 1, 2);
// ["apple", "peach", "orange"]在上面的例子中，我们从索引1开始，到索引2结束的位置（不包括索引2本身）用"peach"填充。
总结
在本文中，我们介绍了 Array.prototype.fill() 方法的语法和使用场景。无论是初始化数组还是代替循环更新数组，fill() 都可以成为前端开发者的好帮手。我们鼓励大家尝试一下它的用法，并将其融入你的日常工作流程中！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651bb76095b1f8cacd358563