如何在javascript中重复n次对象数组

介绍

在开发中，我们有时需要重复添加某个对象到数组中，如何能够重复n次添加对象到数组中呢？

解决方案

我们可以使用Array.prototype.fill()和Array.prototype.map()方法来解决这个问题。

方法1 - 使用Array.prototype.fill()

我们可以利用Array.prototype.fill()来填充数组，然后通过Array.prototype.map()来复制填充后的数组来实现我们重复添加对象到数组中的需求。下面是示例代码:

const obj = { name: '张三', age: 20 };
const n = 5;  //需要重复添加对象的次数
const arr = new Array(n).fill(obj);  //使用fill()方法填充数组
const result = arr.map(item => ({ ...item }));  //复制填充后的数组
console.log(result);  // [{name: "张三", age: 20}, {name: "张三", age: 20}, {name: "张三", age: 20}, {name: "张三", age: 20}, {name: "张三", age: 20}]

1. 按照需求，首先我们定义一个需要重复添加到数组中的对象obj，和需要重复添加对象的次数n。
2. 然后我们使用Array.prototype.fill()方法，用传入的参数来填充数组。这里我们使用obj来填充，因此数组arr中的每个元素都是相同的对象。
3. 最后我们使用Array.prototype.map()复制填充后的数组来得到一个新的数组result。由于我们在map()方法中采用了对象解构来复制对象，因此result中的每一个元素都是一个新的对象。

方法2 - 使用Array.from()

我们还可以使用Array.from()方法来实现重复添加对象到数组的需求，下面是示例代码：

const obj = { name: '张三', age: 20 };
const n = 5;  //需要重复添加对象的次数
const arr = Array.from({ length: n }, () => ({ ...obj })); //使用Array.from()方法得到一个新的数组
console.log(arr); // [{name: "张三", age: 20}, {name: "张三", age: 20}, {name: "张三", age: 20}, {name: "张三", age: 20}, {name: "张三", age: 20}]

1. 按照需求，我们也需要定义一个需要重复添加到数组中的对象obj，和需要重复添加对象的次数n。
2. 然后我们使用Array.from()方法来创建一个新的数组，该数组的元素个数由第一个参数指定，每个元素都是由第二个参数返回的结果。因此这里我们在第二个参数中使用对象解构来返回一个新的对象，而返回的新对象就是我们需要的对象的副本。

总结

在这篇文章中，我们介绍了如何利用Array.prototype.fill()和Array.from()方法来实现重复添加对象到数组的需求。这两个方法都不仅可以重复添加对象，还可以重复添加其他类型的元素。