一文详解 ES7 中的 Array.prototype.fill() 方法-JavaScript中文网-JavaScript教程资源分享门户

在 ES7 中，新增了一个非常方便的方法：Array.prototype.fill()。这个方法可以让我们轻松地填充一个数组，让数组中的每个元素都变成指定的值。本文将详细介绍这个方法的使用方法和一些使用技巧。

基本用法

Array.prototype.fill() 方法接受两个参数。第一个参数是填充的值，第二个参数是填充的起始位置和结束位置。如果省略第二个参数，则默认从数组的第一个元素开始填充到最后一个元素。

以下是填充数组的基本用法：

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

上面的代码将数组中的每个元素都填充成 0。

我们还可以指定填充的起始位置和结束位置：

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

上面的代码将数组中从索引 2 开始到索引 4 结束的元素都填充成 0。

填充对象

除了填充基本类型的值，我们还可以填充对象。这时候我们需要注意的是，填充的是对象的引用，而不是对象本身。也就是说，如果我们填充了两个元素为同一个对象的数组，那么这两个元素其实是指向同一个对象的。

const obj = { name: 'Tom' };
const arr = new Array(3).fill(obj);
arr[0].name = 'Jerry';
console.log(arr); // [{ name: 'Jerry' }, { name: 'Jerry' }, { name: 'Jerry' }]

上面的代码中，我们填充了一个长度为 3 的数组，每个元素都是同一个对象 obj。然后我们修改了数组中第一个元素的 name 属性，发现所有元素的 name 属性都发生了改变。这是因为这些元素其实都是指向同一个对象的。

使用技巧

填充数组的索引

有时候我们需要填充数组的索引，可以使用 Array.from() 方法结合 fill() 方法来实现：

const arr = Array.from({ length: 5 }, (v, i) => i);
console.log(arr); // [0, 1, 2, 3, 4]

上面的代码中，我们使用 Array.from() 方法创建了一个长度为 5 的数组，然后使用 fill() 方法填充了数组的索引。

填充多维数组

有时候我们需要填充多维数组，可以使用递归和 fill() 方法来实现：

// javascriptcn.com 代码示例
function fillMultiDimensionalArray(arr, value) {
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      fillMultiDimensionalArray(arr[i], value);
    } else {
      arr[i] = value;
    }
  }
}

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

上面的代码中，我们定义了一个 fillMultiDimensionalArray() 函数来填充多维数组。如果元素是数组，则递归调用 fillMultiDimensionalArray() 函数，否则填充元素的值。

总结

Array.prototype.fill() 方法是一个非常方便的方法，可以让我们快速地填充数组。除了基本用法外，我们还可以填充对象、填充数组的索引、填充多维数组等。希望本文对你有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65786435d2f5e1655d24d761