如何基于数组长度重复对象并赋值？Angular 2+/JavaScript

你当前的代码遇到了一个典型的引用类型陷阱——用Array.fill(this.add[0])填充数组时，数组里的每一项其实都是同一个对象的引用。这就意味着，当你修改其中一个对象的value属性时，所有对象的value都会跟着改变，因为它们指向的是内存里的同一个对象。

正确的实现方案 #

我们需要为数组的每个位置创建独立的对象实例，而不是复用同一个引用。这里有两种简单可靠的方式：

方式一：利用Array.from()生成独立对象

Array.from()允许我们在创建数组的同时，为每个元素生成新的对象副本：

const add = [{ type: 'Package', value: '' }];
const packages = this.form.value.packages;

// 基于packages数组的长度，为每个索引创建新对象
const packageDup = Array.from({ length: packages.length }, (_, i) => ({
  ...add[0], // 浅拷贝原对象的所有属性
  value: packages[i] // 赋值对应索引的packages元素
}));

方式二：直接用map()遍历packages数组

既然我们已经有了packages数组，直接遍历它来生成目标对象会更直观：

const add = [{ type: 'Package', value: '' }];
const packages = this.form.value.packages;

const packageDup = packages.map(pkgItem => ({
  ...add[0],
  value: pkgItem // 直接将当前packages元素作为value
}));

原代码问题的根源 #

Array.fill()方法对于引用类型（比如对象），只会把同一个引用地址填充到数组的所有位置。也就是说，packageDup里的每一项都是add[0]的“别名”，它们共享同一块内存空间，所以修改任意一项的属性都会影响所有项。

而上面两种方法中，我们通过对象展开运算符...对原对象进行了浅拷贝，确保每个数组元素都是独立的新对象，修改其中一个不会影响其他项。

内容的提问来源于stack exchange，提问作者userlkjsflkdsvm