ECMAScript 2019（ES10）的 Array 的 Array.fill() 方法的使用教程

在 ECMAScript 2019（ES10）中，Array.fill() 方法被引入，它允许我们用一个指定的值填充一个数组中的所有元素。这个方法可以大大简化我们的代码，让我们更加高效地处理数组。

语法

Array.fill(value, start, end)

参数

• value：必需，用来填充数组元素的值。
• start：可选，起始索引，默认值为 0。
• end：可选，结束索引，默认值为数组的长度。

示例

基本用法

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

指定起始和结束位置

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

填充对象

const arr = [{name: 'Alice'}, {name: 'Bob'}, {name: 'Charlie'}];
const obj = {name: 'David'};
arr.fill(obj);
console.log(arr); // [{name: 'David'}, {name: 'David'}, {name: 'David'}]

填充函数

const arr = [1, 2, 3, 4, 5];
const func = () => Math.random();
arr.fill(func());
console.log(arr); // [0.123456, 0.123456, 0.123456, 0.123456, 0.123456]

深入理解

填充对象的注意事项

当我们用对象填充数组时，实际上填充的是对象的引用。也就是说，如果我们填充了一个对象，那么数组中的每个元素都会指向同一个对象。这可能会导致一些问题，比如修改一个元素会影响到其他元素。

const arr = [{name: 'Alice'}, {name: 'Bob'}, {name: 'Charlie'}];
const obj = {name: 'David'};
arr.fill(obj);

obj.name = 'Eve';
console.log(arr); // [{name: 'Eve'}, {name: 'Eve'}, {name: 'Eve'}]

填充函数的注意事项

当我们用函数填充数组时，函数只会被执行一次，然后将返回值用来填充数组。也就是说，如果我们填充了一个函数，那么数组中的每个元素都会是同一个值。这可能会导致一些问题，比如填充一个随机数或者日期。

const arr = [1, 2, 3, 4, 5];
const func = () => Math.random();
arr.fill(func());

console.log(arr); // [0.123456, 0.123456, 0.123456, 0.123456, 0.123456]

如果我们想要每个元素都是不同的值，那么我们需要在填充数组之前先生成一个数组。

const arr = [1, 2, 3, 4, 5];
const values = Array.from({length: arr.length}, () => Math.random());
arr.fill(values);

console.log(arr); // [0.123456, 0.789012, 0.345678, 0.901234, 0.567890]

总结

Array.fill() 方法是 ECMAScript 2019（ES10）中的一个新方法，它允许我们用一个指定的值填充一个数组中的所有元素。这个方法可以大大简化我们的代码，让我们更加高效地处理数组。当我们用对象或者函数填充数组时，需要注意一些问题。

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