制作 N 个 JS 对象副本并在其中进行更改

Question

我有一个像这样的对象数组：

[
  {
    headerName: 'Make',
    field: 'make',
  },
  {
    headerName: 'Model',
    field: 'model',
  },
  {
    headerName: 'Price',
    field: 'price',
  },
]

我需要进行复杂的修改：

1) 创建一个新的数组，其中有 N 个起始数组的副本，例如 2：

[
  {
    headerName: 'Make',
    field: 'make',
  },
  {
    headerName: 'Model',
    field: 'model',
  },
  {
    headerName: 'Price',
    field: 'price',
  },
  {
    headerName: 'Make',
    field: 'make',
  },
  {
    headerName: 'Model',
    field: 'model',
  },
  {
    headerName: 'Price',
    field: 'price',
  },
]

2）为field字段中的每个对象设置索引

[
  {
    headerName: 'Make',
    field: 'make0',
  },
  {
    headerName: 'Model',
    field: 'model0',
  },
  {
    headerName: 'Price',
    field: 'price0',
  },
  {
    headerName: 'Make',
    field: 'make1',
  },
  {
    headerName: 'Model',
    field: 'model1',
  },
  {
    headerName: 'Price',
    field: 'price1',
  }
]

如何实现这个功能？

附注。我有自己的这个功能选项，但它不能正常工作：

[
  {
    headerName: 'Make',
    field: 'make',
  },
  {
    headerName: 'Model',
    field: 'model',
  },
  {
    headerName: 'Price',
    field: 'price',
  },
]

[
  {
    headerName: 'Make',
    field: 'make',
  },
  {
    headerName: 'Model',
    field: 'model',
  },
  {
    headerName: 'Price',
    field: 'price',
  },
  {
    headerName: 'Make',
    field: 'make',
  },
  {
    headerName: 'Model',
    field: 'model',
  },
  {
    headerName: 'Price',
    field: 'price',
  },
]

这个函数的结果是：

0: "make0"
1: "model0"
2: "price0"
3: "make01"
4: "model01"
5: "price01"
6: "make012"
7: "model012"
8: "price012"
9: "make0123"
10: "model0123"
11: "price0123"
12: "make01234"
13: "model01234"
14: "price01234"
15: "make012345"
16: "model012345"
17: "price012345"

我做错了什么，我该如何解决？

Answer 1

使用 来创建对象的其他副本时Array.from，获取映射器函数中的当前索引，并将其附加到field每个对象的值：

const copies = 3;

const arr = [{
    headerName: 'Make',
    field: 'make',
  },
  {
    headerName: 'Model',
    field: 'model',
  },
  {
    headerName: 'Price',
    field: 'price',
  },
];

const output = Array.from(
  { length: copies },
  (_, i) => arr.map(
    ({ field, ...rest }) => ({ ...rest, field: field + i })
  )
)
  .flat()
console.log(output);

或者，如果你想坚持你的for循环：

const copies = 3;

const arr = [{
    headerName: 'Make',
    field: 'make',
  },
  {
    headerName: 'Model',
    field: 'model',
  },
  {
    headerName: 'Price',
    field: 'price',
  },
];

let output = [];

for (let i = 0; i < copies; i++) {
  const copy = arr.slice().map(({ field, ...rest }) => ({ ...rest, field: field + i }));
  output = [...output, ...copy]
}
console.log(output);

你的原始代码的一个问题是，当你这样做时

let copy = columns.slice(0)
...copy.map(item => (item.field = item.field + i))

您不是在复制对象 -.slice仅创建数组的浅表副本，然后在 . 内部.map，您对现有对象进行变异，而不复制它们（然后返回item.field + i表达式的结果，这是不可取的）。

您需要在.map回调中完全复制对象，并返回一个带有更改的新对象field。