在 JavaScript 中，我们往往会遇到需要使用某些默认值来填充数组的情况，那么都有哪些方式可以完成这样的任务呢？今天就为大家介绍 4 种填充数组的方式，并且会讲解一下每一种方式的优缺点。

Array.fill

Array.fill 应该是很直观的一种方式。如下代码所示，我们想要使用 "hello" 字符串把长度为 10 的数组填充满，代码就像下面这样：

let filledarray= new Array(10). fill('hello')

上述代码对于不可变的值，例如数值、字符串和布尔类型工作的很好。但是如果我们想要使用一个对象来填充呢？

let filledarray= new Array(10). fill({'hello':'goodbye'})

当我们使用对象来填充一个数组的时候，数组里面的每个索引处填充的值指向的都是这同一个对象，所以如果我们修改对象的时候：

filledarray[0].hello='adios'

它将会把数组中的所有值都改变掉，大多数情况下这都不是我们想要的行为。所以如果想要填充对象的话，得需要借助 map 来为每一个槽位单独填充对象才可以：

let filledArray=new Array(10).fill(null).map(()=>({'hello':'goodbye'}))

但是你应该要考虑到，map 方法是一个代价比较高的方法。它会生成一个新的数组，而不是直接操作原来的数组，数据量一大的话，性能会急剧下降。所以可以试试其他方法。

for 循环

我们可以先创建一个数组：

let filledArray=new Array(10);

然后使用一个 for 循环一一赋值即可：

for(let i=0;i<bucket size;i++){
filledArray[i]={'hello':'goodbye'};
}

这样可以避免使用 map 方法。

Array.from

另外一种可选的方式是使用 Array.from 方法。Array.from 方法可以让你从一个像数组或可迭代的对象中创建数组。像数组的对象指的是这个对象有一个 length 属性，并且它的元素可以根据索引查询到。可迭代对象就是像 Map 或 Set 一类的。下面这行代码就将对象一一填充到数组的对应位置：

let filledArray=Array.from({length:10},()=>({'hello':'goodbye'}))

展开（Spread）操作符

最后一种方法是使用展开操作符：

let filledArray=[...new Array(10)].map(()=>{'hello':'goodbye'})

使用展开操作符可以让我们展开一个数组，然后从展开的数组中再创建一个新的数组。使用这种方式，我们避免了使用 fill 方法，但是我们依旧使用了 map 方法。

结论

上述填充数组的各种方法都有优缺点，不知道小伙伴们平常使用哪个方法来完成这个任务呢？