使用 ES7 中的 Array.prototype.fill 方法实现数组操作-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 前端开发中，经常需要对数组进行填充、替换、截取等操作。ES7 中的 Array.prototype.fill 方法是一个非常方便的数组操作方法，可以实现快速填充数组的任务。

1. 基本用法

Array.prototype.fill 方法接受两个参数：value 和 start。value 表示填充的值，start 表示起始填充位置。如果没有传入 start 参数，则默认从数组的第一项开始填充。

示例代码：

const arr = new Array(5); // 创建一个长度为 5 的数组
arr.fill(0); // 数组每一项都填充为 0
console.log(arr); // [0, 0, 0, 0, 0]

如果想从某个位置开始填充，可以指定 start 参数：

const arr = new Array(5); // 创建一个长度为 5 的数组
arr.fill(1, 2); // 从数组的第三项开始，每一项都填充为 1
console.log(arr); // [undefined, undefined, 1, 1, 1]

Array.prototype.fill 方法不仅仅可以用来填充数组，还可以用来替换数组中的一段内容。如果想批量替换数组中的内容，可以结合 slice 方法和 concat 方法来实现。

示例代码：

let arr = [1, 2, 3, 4, 5];
arr = arr.slice(0, 2).concat(new Array(3).fill(0), arr.slice(5));
console.log(arr); // [1, 2, 0, 0, 0, 5]

上述代码中，arr.slice(0, 2) 表示截取数组中的前两项，arr.slice(5) 表示截取数组中的后两项。然后用 concat 方法将截取的数组和 new Array(3).fill(0) 组合起来，即可实现批量替换数组中的内容。

Array.prototype.fill 方法的参数可以是任意类型的值，包括引用类型。如果要对数组进行深拷贝操作，可以使用 Array.prototype.fill 方法。

示例代码：

const arr = [[1], [2], [3]];
const newArr = new Array(arr.length).fill().map((v, i) => [...arr[i]]);
console.log(newArr); // [[1], [2], [3]]

上述代码中，new Array(arr.length).fill() 创建了一个长度和原数组相同的、每一项都为 undefined 的数组。然后用 map 方法遍历这个数组，通过 ...arr[i] 操作将原数组中的每一项进行深拷贝，从而实现深拷贝数组的操作。

Array.prototype.fill 方法可以实现对数组的快速填充、替换、拷贝等操作，非常方便实用。在实际开发中，可以大大提高代码效率，同时也有助于提高代码可读性和可维护性。

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