JavaScript提供了许多方法来用初始数据初始化数组。让我们在这篇文章中看看哪些方法是最简单和流行的。
目录
1.用基元填充一个数组
假设你想用零来初始化一个长度为3 的数组。
数组实例上可用的array.fill(initalValue)方法是初始化一个数组的方便方法：当对一个数组调用该方法时，整个数组被填入initialValue ，然后返回修改后的数组。
但是你需要将array.fill(initialValue) 与Array(n) （数组构造函数）结合使用。
javascript
const length = 3;
const filledArray = Array(length).fill(0);
filledArray; // [0, 0, 0]
然后Array(length).fill(0) 方法用零填充数组，返回填充后的数组：[0, 0, 0] 。
Array(length).fill(initialValue) 是创建具有所需长度并以原始值（数字、字符串、布尔值）初始化的数组的一种方便方法。
2.用对象填充一个数组
如果你需要用对象来填充一个数组呢？这个要求略有不同，取决于你是想让数组填充初始对象的实例，还是不同的实例。
2.1 使用array.fill()
如果你不介意用相同的对象实例来初始化数组，那么你可以轻松地使用上面提到的array.fill() 方法。
javascript
const length = 3;
const filledArray = Array(length).fill({ value: 0 });
filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]
Array(length).fill({ value: 0 }) 创建一个长度为 的数组，并为每个项目分配 （注意：相同的对象实例）。3 { value: 0 }
这种方法创建了一个具有相同对象实例的数组。如果你碰巧修改了数组中的任何一个项目，那么数组中的每个项目都会受到影响。
javascript
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(array, mapperFunction) 接受2个参数：一个数组（或者一般是一个迭代器）和一个映射器函数。
Array.from() 在数组的每个项目上调用 ，mapperFunction将结果推送到一个新的数组，最后返回新映射的数组。
因此Array.from() 方法可以很容易地用不同的对象实例创建和初始化一个数组。
javascript
const length = 3;
const filledArray = Array.from(Array(length), () => {
return { value: 0 };
});
filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]
Array.from() 在数组的每个空槽上调用映射函数，用从映射函数返回的每个值创建一个新数组。
你会得到一个充满不同对象实例的数组，因为每个mapper函数调用都会返回一个新的对象实例。
如果你修改了数组中的任何一个项目，那么只有这个项目会受到影响，而其他项目不受影响。
javascript
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()与spread操作符
你可能会想：既然数组已经有了array.map()方法，为什么还要使用Array.from() 和它的mapper函数？
好问题!
当使用Array(length) 来创建数组实例时，它会创建稀疏的数组（即有空槽）。
javascript
const length = 3;
const sparseArray = Array(length);
sparseArray; // [empty × 3]
而问题是，array.map() 跳过了空槽。
javascript
const length = 3;
const filledArray = Array(length).map(() => {
return { value: 0 };
});
filledArray; // [empty × 3]
因此，直接使用Array(length).map(mapperFunc) ，会产生稀疏数组。
幸运的是，你可以使用传播操作符将稀疏数组转化为一个用undefined 初始化的项的数组。然后在该数组上应用array.map() 方法。
javascript
const length = 3;
const filledArray = [...Array(length)].map(() => {
return { value: 0 };
});
filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]
表达式[...Array(length)] 创建了一个数组，其项目初始化为undefined 。在这样一个数组上，array.map() 可以映射到新的对象实例。
我更喜欢用Array.from() 的方法来给数组填充对象，因为它涉及的魔法更少。
3.总结
JavaScript提供了一堆很好的方法来给数组填充初始值。
如果你想创建一个用原始值初始化的数组，那么最好的方法是Array(length).fill(initialValue) 。
要创建一个用对象实例初始化的数组，而且你不在乎每项都有相同的对象实例，那么Array(length).fill(initialObject) 。
否则，要用不同的对象实例填充一个数组，你可以使用Array.from(Array.length, mapper) 或[...Array(length)].map(mapper) ，其中mapper 是一个函数，每次调用都会返回一个新的对象实例。
你还知道哪些在JavaScript中填充数组的方法？
