javascript - 有没有一种聪明的方法可以通过使用 JavaScript 的解构方法来修改对象中的数组？

Question

以下示例演示了我想要实现的目标：

const data_template = {
  key: 1,
  data_object: {
    data1: 1,
    data2: 2,
    data3: 3
  },
  data_array: [
    { key: 1, data1: 1 },
    { key: 2, data1: 2 },
    { key: 3, data1: 3 }
  ]
}

let data = [];

data.push({ ...data_template, key: 1 });
data.push({ ...data_template, key: 2 });

console.log(data);

通过使用解构，我可以轻松地修改我的“模板对象”（data_template），同时将它的实例添加到我的“数据数组”中。上面代码的结果是：

[
  {
    key: 1,
    data_object: { data1: 1, data2: 2, data3: 3 },
    data_array: [ [Object], [Object], [Object] ]
  },
  {
    key: 2,
    data_object: { data1: 1, data2: 2, data3: 3 },
    data_array: [ [Object], [Object], [Object] ]
  }
]

如您所见，我的数组 ( data) 中有 2 个对象，每个对象都有一个唯一键（分别为 1 和 2）。

现在我的问题是：如何修改 中的键data_array，这是我的“数据模板”中的一个数组？有没有一种聪明的方法可以通过解构来做到这一点？

标签： javascript

Answer 1

取决于你想要做什么。

如果您只想克隆带有额外元素的数组：

data.push({
    ...data_template,
    key: 1,
    data_array: [
        ...data_template.data_array,
        { key: 4, data1: 4},
    ],
});

如果你想为里面的所有对象添加一个新字段data_array：

const data_template = {
    key: 1,
    data_object: { data1: 1, data2: 2, data3: 3 },
    data_array: [ { key: 1, data1: 1 }, { key: 2, data1: 2 }, { key: 3, data1: 3 }]
}

console.log({
    ...data_template,
    key: 1,
    data_array: data_template.data_array.map(d => ({ ...d, newField: 123 })),
});

您也可以使用它来覆盖该key字段

否则，我无法立即想到您可以使用的任何其他解构“技巧”。