ECMAScript 2016 中的 Array.prototype.fill() 方法的使用及常见错误

在 ECMAScript 2016 中，新增了 Array.prototype.fill() 方法，用于填充数组中的元素。该方法可以接受三个参数，分别是填充的值、起始索引和结束索引。本文将介绍该方法的使用及常见错误，并提供示例代码。

方法使用

语法

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

参数

• value：要填充的值。
• start：填充起始索引。默认值为 0。
• end：填充结束索引（不包含该索引）。默认值为数组长度。

返回值

填充后的数组。

示例

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

上述示例中，数组 [1, 2, 3, 4, 5] 中的索引 2 和 3 的元素被填充为 0。

常见错误

未指定填充值

如果未指定填充值，将会把数组中的元素全部设为 undefined。

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

起始索引大于结束索引

如果起始索引大于结束索引，将会返回原数组。

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

结束索引大于数组长度

如果结束索引大于数组长度，将会把数组中索引大于等于起始索引的元素全部填充为指定值。

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

上述示例中，结束索引为 7，大于数组长度 5，因此从索引 2 开始的元素都被填充为 0。

指导意义

Array.prototype.fill() 方法可以方便地填充数组中的元素，提高开发效率。但是，在使用该方法时需要注意参数的正确性，避免出现常见错误。同时，填充数组时需要考虑数组的长度和填充的索引范围，以免填充出错。

在实际开发中，可以结合其他数组方法使用 Array.prototype.fill() 方法，以达到更好的效果。例如，可以使用 Array.prototype.map() 方法先生成一个指定长度的数组，再使用 fill() 方法填充元素，以生成指定长度、指定元素的数组。

const arr = Array(5).fill().map(() => Math.random());
console.log(arr);

上述示例中，先使用 Array(5) 方法生成长度为 5 的数组，再使用 fill() 方法填充元素。最后使用 map() 方法生成指定元素的数组。

结论

Array.prototype.fill() 方法是 ECMAScript 2016 中的新增方法，用于填充数组中的元素。在使用该方法时需要注意参数的正确性，避免出现常见错误。同时，可以结合其他数组方法使用该方法，以达到更好的效果。

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