ES2021 中的 Array.prototype.fill 方法的应用技巧

在前端开发中，经常需要对数组进行一些操作，比如填充数组。ES2021 中新增了 Array.prototype.fill 方法，可以更方便地对数组进行填充操作。本文将介绍 Array.prototype.fill 方法的详细用法和应用技巧。

Array.prototype.fill 方法介绍

Array.prototype.fill 方法用于填充一个数组，可以指定填充的值和起始位置和结束位置。该方法会修改原数组，并返回修改后的数组。

语法

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

参数

• value：填充的值。
• start：起始位置，默认为 0。
• end：结束位置，默认为数组长度。

返回值

修改后的数组。

Array.prototype.fill 方法的应用技巧

填充数组

Array.prototype.fill 方法最基本的应用就是填充数组。下面的代码演示了如何用指定的值填充一个数组：

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

替换数组元素

除了填充数组，Array.prototype.fill 方法还可以用来替换数组元素。下面的代码演示了如何用指定的值替换数组中的元素：

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

复制数组

有时候需要复制一个数组，可以使用 Array.prototype.fill 方法。下面的代码演示了如何复制一个数组：

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

填充二维数组

Array.prototype.fill 方法不仅可以填充一维数组，还可以填充二维数组。下面的代码演示了如何用指定的值填充一个二维数组：

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

需要注意的是，如果直接使用 new Array(5).fill([0, 0, 0, 0, 0]) 填充二维数组，会导致所有数组元素都指向同一个数组，修改一个元素会影响到所有元素。

总结

本文介绍了 ES2021 中新增的 Array.prototype.fill 方法的详细用法和应用技巧，包括填充数组、替换数组元素、复制数组和填充二维数组等。希望本文可以帮助读者更好地理解 Array.prototype.fill 方法的用法，从而更方便地处理数组。

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