ES7 中如何使用 Array.prototype.fill() 方法
在 JavaScript 中，数组是一种非常常见且方便的数据结构。而在 ES7 中，为了更加方便地操作数组，增加了 Array.prototype.fill() 方法。这个方法可以将数组中的所有元素替换为一个指定的值。在本文中，我们将学习如何使用这个方法，并且提供示例代码。
什么是 Array.prototype.fill() 方法？
在 ES7 中，我们可以使用 Array.prototype.fill() 方法来初始化数组中的元素。这个方法可以用一个指定的值替换数组中的所有元素，也可以用一个指定的值替换一部分数组中的元素。它接受三个参数：
- value: 用来填充数组元素的值。
- start: 开始填充的位置（默认值为 0）。
- end: 结束填充的位置（默认值为数组的长度）。
如果省略 start 和 end 参数， fill() 方法将替换整个数组。
使用 Array.prototype.fill() 方法
下面我们来看一个例子。假设我们有一个长度为 5 的数组：
let arr = [1, 2, 3, 4, 5];
现在我们想将这个数组中的元素全部替换成 0。我们可以这样做：
arr.fill(0); console.log(arr); // [0, 0, 0, 0, 0]
这个例子中，我们调用了 fill() 方法并将参数设置为 0，于是数组中的每个元素都被替换成了 0。
下面是一些其他的示例：
-- -------------------- ---- ------- --- --- - --- -- -- -- --- -- -------- ----------- -- --- ----------------- -- --- -- -- -- -- -- ------------- ----------- --- ----------------- -- --- -- -- -- -- -- --------- ---------- ----- ------ --- ----------------- -- -- ----- ------ -- - ----- ------ -- - ----- ------ -- - ----- ------ -- - ----- ------ --
Array.prototype.fill() 方法在数组的初始化中也非常有用：
let arr1 = Array(5).fill(0); // [0, 0, 0, 0, 0] // 创建一个 2D 数组 let arr2 = Array(3).fill().map(() => Array(5).fill(0)); console.log(arr2); // [[0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0]]
array.fill(value, start, end) 并不会改变原数组 array。
array.slice(start, end) 则会返回原数组的一部分（从起始到结束，不包括结束），原数组仍然不会改变。
指导意义
Array.prototype.fill() 方法对于处理数字和对象数组非常有用。使用 fill() 方法可以让代码更加简洁和易读，并且可以避免一些潜在的错误。例如，使用 fill() 方法来初始化数组可以避免输入错误的数据类型，以及在访问未初始化的数组元素时引发异常。
需要注意的是，如果你需要在浏览器中支持 Array.prototype.fill() 方法，你需要引入 polyfill 或者使用 babel 转码。
总结
- 在 ES7 中，我们可以使用 Array.prototype.fill() 方法来初始化数组中的元素，它接受三个参数。
- fill() 方法可以用一个指定的值替换数组中的所有元素，也可以用一个指定的值替换一部分数组中的元素。
- 在处理数字和对象数组时，使用 fill() 方法可以让代码更加简洁和易读，并且可以避免一些潜在的错误。
- 需要注意的是，如果你需要在浏览器中支持 Array.prototype.fill() 方法，你需要引入 polyfill 或者使用 babel 转码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64649aae968c7c53b057c3ce