为什么最后得到的数组中两个对象值会一样？

Question

如下代码，我想实现的是将currentData中每个对象abc的值改成copy的值，然后abc中的对象如果有跟copy中对应的id，那其a,b的值我就要取原先currentData中的值。不知道什么问题，现在得到的结果是得到两个对象是一样的，请问要怎么修改？

const currentData = [
  {
    abc: [
      { id: 1, a: 1, b: 2 },
      { id: 2, a: 2, b: 3 },
    ],
    df: 2,
  },
  {
    abc: [
      { id: 1, a: 23, b: 33 },
      { id: 2, a: 55, b: 65 },
    ],
    df: 3,
  },
];
const currentDataCopy1 = JSON.parse(JSON.stringify(currentData));
const currentDataCopy2 = JSON.parse(JSON.stringify(currentData));
const copy = [
  { id: 1, a: 1, b: 2 },
  { id: 2, a: 2, b: 3 },
  { id: 3, a: 0, b: 0 },
];

currentDataCopy1.forEach((item, index) => {
  item.abc = copy;
  item.abc.forEach((amount) => {
    const amountINdex = currentDataCopy2[index].abc.findIndex((items) => items.id === amount.id);
    if (amountINdex > -1) {
      amount.a = currentDataCopy2[index].abc[amountINdex].a;
      amount.b = currentDataCopy2[index].abc[amountINdex].b;
      console.log(
        amount,
        currentDataCopy2[index].abc[amountINdex].a,
        currentDataCopy2[index].abc[amountINdex].b,
        'amount',
      );
    }
  });
  console.log(item, 'items');
});

console.log(currentDataCopy1);
console.log(currentDataCopy2);

Answer 1

你的问题看得不是很明白，你看看这个是不是想要的

const dataCopy = currentData.map(({ abc, df }) => {
    return {
        // 结果数组是以 copy 为蓝本，所以从 copy 生成。
        // map 的逻辑是，如果在 dataCopy 中找到，就使用 dataCopy 中的对象为蓝本，否则用 copy 中的对象为蓝本
        // 然后用展开运算符生成一个新的对象（注意，只能处理一层属性的情况，所以多层还是用 JSON 吧
        abc: copy.map(it => ({ ...(abc.find(({ id }) => id === it.id) ?? it) })),
        df,
    };
});

[
  {
    abc: [
      { id: 1, a: 1, b: 2 },
      { id: 2, a: 2, b: 3 },
      { id: 3, a: 0, b: 0 }
    ],
    df: 2
  },
  {
    abc: [
      { id: 1, a: 23, b: 33 },
      { id: 2, a: 55, b: 65 },
      { id: 3, a: 0, b: 0 }
    ],
    df: 3
  }
]

我觉得你的问题主要是出在 item.abc = copy; 这里，这样 currentDataCopy1 的每个 abc 其实都是引用了同一个对象。如果改成 = JSON.parse(JSON.stringify(copy)) 能得到和我那个一样的结果。