web 前端培训： JavaScript 中初始值如何填充数组

​

1. 用 primitives 填充数组

假设我们想用给定值初始化一个长度为 3 的数组。

array.fill() 方法可以用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。

再结合使用 Array(n)：

const length = 3;

const filledArray = Array(length).fill(0);

filledArray; // [0, 0, 0]

Array(length).fill(initialValue) 是一种创建具有前端培训所需长度并使用原始值（数字、字符串、布尔值）初始化的数组的便捷方法。

2. 用对象填充数组

如果需要用对象填充数组怎么办？

2.1 使用 array.fill()

上述方法同样支持传递对象为初始值：

const length = 3;

const filledArray = Array(length).fill({ value: 0 });

filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]

Array(length).fill({ value: 0 })创建一个 length 数组 3，并为每个项目分配{ value: 0 }，要注意的是：分配相同的对象实例。

这种方法创建了一个具有相同对象实例的数组。如果碰巧修改了数组中的任何一项，那么数组中的每一项都会受到影响：

const length = 3;

const filledArray = Array(length).fill({ value: 0 });

filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]

filledArray[1].value = 3;

filledArray; // [{ value: 3 }, { value: 3 }, { value: 3 }]

改变数组的第二个项目 filledArray[1].value = 3 会改变数组中的所有项目。

2.2 使用 Array.from()

Array.from() 方法对一个数组或可迭代对象创建一个新的，浅拷贝的数组实例。

因此利用 Array.from() 方法可以轻松地创建和初始化具有不同对象实例的数组：

const length = 3;

const filledArray = Array.from(Array(length), () => {

return { value: 0 };

});

filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]

如果修改数组中的任何项目，则只有该项目会受到影响，其他项目不受影响：

const length = 3;

const filledArray = Array.from(Array(length), () => {

return { value: 0 };

});

filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]

filledArray[1].value = 3;

filledArray; // [{ value: 0 }, { value: 3 }, { value: 0 }]

filledArray[1].value = 3 只修改数组的第二项。

2.3 使用 array.map() 结合 array.fill()

既然 Array(n) 返回一个数组，web前端培训为何还需要使用 Array.from 呢，直接使用 map 不好吗，问题是 array.map()跳过 empty 元素：

const length = 3;

const filledArray = Array(length).map(() => {

return { value: 0 };

});

filledArray; // [empty × 3]

解决方法很简单，将 empty 数组 fill null 即可：

const length = 3;

const filledArray = Array(length).fill(null).map(() => {

return { value: 0 };

});

filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]

文章来源于 story

​