使用 ES7 的 Array.Prototype.fill() 方法给数组元素填充默认值

在前端开发中，我们经常需要对数组进行操作，其中一个常见的操作就是填充数组元素的默认值。在 ES6 中，我们已经可以使用 Array.prototype.fill() 方法来实现这个功能，而在 ES7 中，更加方便的是我们可以直接在方法内传入要填充的默认值，从而简化代码。

什么是 Array.prototype.fill() 方法

Array.prototype.fill() 方法可以将一个数组中的所有元素替换为指定的值。

语法如下：

arr.fill(value[, start = 0[, end = this.length]])

其中，value 表示要填充的值，start 和 end 分别表示开始和结束填充的位置。如果省略 start 和 end 那么默认为 0 和 this.length。

使用方法示例

下面我们以一个示例来说明 fill() 方法的使用。

let arr1 = [1, 2, 3, 4, 5];
let arr2 = Array(5).fill(0);

console.log(arr1);  // [1, 2, 3, 4, 5]
console.log(arr2);  // [0, 0, 0, 0, 0]

我们可以看到，在上面的示例中，我们首先定义了一个长度为 5 的 arr1 数组，然后使用 Array(5).fill(0) 方法来定义了一个长度为 5 的 arr2 数组，这个数组中的每一个值都被赋值为 0。这个方法就相当于是我们手动对数组中的每一个元素进行赋值，并且省去了手动编写循环的步骤。

深度分析

fill() 方法不仅仅可以用于数组元素的填充，也可以用于数组长度的调整。

我们可以看下面的代码：

let arr3 = [1, 2, 3, 4, 5];
arr3.length = 3;
arr3.fill(0);

console.log(arr3);  // [0, 0, 0]

在上述示例中，我们首先定义了一个长度为 5 的 arr3 数组，然后将数组的长度改为 3，最后使用 fill() 方法将数组中的所有元素赋值为 0。在这个示例中，fill() 方法的开始位置默认为 0，而结束位置默认为数组的长度，所以我们的操作会影响到被删除的 2 和 3。

总结

在前端开发中，填充数组默认值是一个非常常见的操作。而使用 ES7 中新增的 fill() 方法可以让我们更加方便快捷地实现该功能，并且在代码结构和可读性方面也提高了很多。

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