在前端开发中，我们经常需要使用数组来存储和操作数据。ES7 中引入了 Array.prototype.fill() 方法，可以快速地填充数组。本文将介绍该方法的使用技巧和注意事项，并提供示例代码。
fill() 方法的基本使用
fill() 方法可以用来填充数组中的元素，其基本语法如下：
array.fill(value, start, end)
其中，value 表示要填充的值，start 和 end 分别表示要填充的起始和结束位置。如果不指定 start 和 end，则会填充整个数组。如果 start 和 end 超出数组的长度，则会自动调整为数组的长度。
下面是一个简单的示例：
const arr = [1, 2, 3, 4, 5]; arr.fill(0); // [0, 0, 0, 0, 0] arr.fill(1, 2, 4); // [0, 0, 1, 1, 0]
在上面的示例中，我们首先使用 fill() 方法将数组中的所有元素都填充为 0，然后再将数组中索引为 2 和 3 的元素填充为 1。
fill() 方法的注意事项
在使用 fill() 方法时需要注意以下几点：
fill() 方法会修改原始数组，而不是返回一个新的数组。如果需要保留原始数组，可以使用 slice() 方法来复制数组。
fill() 方法会改变数组的长度。如果填充的起始和结束位置超出了数组的长度，则会自动调整为数组的长度。
当填充的值为对象时，每个数组元素都会引用同一个对象。这意味着修改其中一个元素会影响到其他元素。
下面是一个示例，演示了 fill() 方法的第三个注意事项：
const arr = new Array(3).fill({}); // [{}, {}, {}] arr[0].name = 'Alice'; console.log(arr); // [{name: 'Alice'}, {name: 'Alice'}, {name: 'Alice'}]
在上面的示例中，我们使用 fill() 方法创建了一个包含三个空对象的数组。然后我们修改了第一个元素的 name 属性。由于每个元素都引用同一个对象，因此所有元素的 name 属性都被修改了。
fill() 方法的使用技巧
除了基本用法和注意事项之外，fill() 方法还有一些使用技巧。
- 使用 fill() 方法创建指定长度的数组
我们可以使用 fill() 方法创建指定长度的数组，然后使用 map() 方法对数组进行操作。下面是一个示例：
const arr = new Array(5).fill(0).map((_, index) => index + 1); // [1, 2, 3, 4, 5]
在上面的示例中，我们首先使用 fill() 方法创建了一个包含 5 个元素的数组，并将每个元素都填充为 0。然后我们使用 map() 方法将每个元素替换为其索引值加 1。
- 使用 fill() 方法创建二维数组
我们可以使用 fill() 方法创建二维数组，如下所示：
const arr = new Array(3).fill().map(() => new Array(3).fill(0)); // [[0, 0, 0], [0, 0, 0], [0, 0, 0]]
在上面的示例中，我们首先使用 fill() 方法创建了一个包含 3 个元素的数组。然后我们使用 map() 方法对每个元素进行操作，创建了一个包含 3 个元素的数组，并将每个元素都填充为 0。
总结
本文介绍了 ES7 中的 Array.prototype.fill() 方法。我们学习了该方法的基本用法和注意事项，并提供了示例代码。此外，我们还介绍了 fill() 方法的使用技巧，包括使用 fill() 方法创建指定长度的数组和二维数组。通过本文的学习，我们可以更好地掌握 fill() 方法的使用，提高数组操作的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65efe51b2b3ccec22f927e1f
