根据数组长度多次复制对象 - Angular 2+/ JavaScript

Question

我有一个空值的对象。我需要复制这个对象，但是我的一个数组的长度是它的很多倍。因此，我将拥有两个具有相同属性但具有不同值的对象。

TS

add = [
    {
      type: 'Package',
      value: ''
    }
]

this.form.value.packages = [1,2,3]

//This should duplicate the object based on length of packages

let packageDup = Array(this.form.value.packages.length).fill(this.add[0])

packageDup.forEach((res, i) => {

     packageDup[i].value = this.form.value.packages[i]

})

这种方法的问题是值最终是相同的。例如，两个对象的值都等于 2。我觉得我想太多了。谢谢。

我想要的结果 ---

add = [
        {
          type: 'Package',
          value: '1'
        },
        {
          type: 'Package',
          value: '2'
        }, 
        {
          type: 'Package',
          value: '3'
        }
    ]

Answer 1

要创建对象'obj'的副本，我通常使用Object.assign({}, obj)

你可以使用这样的东西：

let packageDup = Array(this.form.value.packages.length)
    .fill(0) // needed to have some value and no empty value that would cause map to fail.
    .map(x => Object.assign({}, this.add[0]);

（正如 Daniel W Strimpel 在他的回答中提到的那样，请注意它只执行浅层副本，以防您有嵌套对象，您应该牢记这一点。）

let baseObject = { value: 1 }

let array = Array(3).fill(0).map(x => Object.assign({}, baseObject));

console.log(array);

array[1].value = 2;
array[2].value = 3;

console.log(array);

Answer 2

没有理由创建一个特定大小的数组并使用如下语法填充它：

Array(this.form.value.packages.length).fill(this.add[0])

您可以在 this.form.value.packages 数组上使用 map 运算符来跳过所有这些工作：

add = [
  {
    type: 'Package',
    value: ''
  }
]

this.form.value.packages = [1,2]

let packages = this.form.value.packages.map(v => {
    return Object.assign({}, this.add[0], { value: v });
});

作为一般说明，Object.assign(...) 做了一个浅拷贝，这对于您拥有的示例对象来说很好，但如果您有一个更复杂的对象，其属性是嵌套对象，这将不起作用。在这种情况下，您需要使用下划线之类的库来深度克隆您的 this.add[0] 对象。

正如@Eliseo 在下面的评论中指出的那样，如果你确实有一个像你展示的那样简单的对象，你可以简单地做：

let packages = this.form.value.packages.map(v => ({ type: 'Package', value: v }));