javascript - 克隆数组(不是引用副本)并修改新数组

Question

我认为我的问题很容易解决，但作为新手我无法到达那里。

const arr1 = [
  { department: "Lebensmittel", id: "id6", product: "Nudeln", status: false },
  { department: "Ceralien", id: "id5", product: "Marmelade", status: false },
  { department: "Ceralien", id: "id3", product: "Müsli", status: false },
  { department: "Ceralien", id: "id4", product: "Honig", status: false },
  { department: "Molkereiprodukte", id: "id1", product: "Milch", status: false }
];

let testArr = [...arr1];

testArr.forEach(obj => (obj.status = "test"));

console.log(arr1, testArr)

日志显示，forEach() 函数也应用于 arr1。为什么会这样，我如何才能保持 arr1 不可变？

arr1 = [
  { department: "Lebensmittel", id: "id6", product: "Nudeln", status: false },
  { department: "Ceralien", id: "id5", product: "Marmelade", status: false },
  { department: "Ceralien", id: "id3", product: "Müsli", status: false },
  { department: "Ceralien", id: "id4", product: "Honig", status: false },
  { department: "Molkereiprodukte", id: "id1", product: "Milch", status: false }
];

 testArr = [
  { department: "Lebensmittel", id: "id6", product: "Nudeln", status: false },
  { department: "Ceralien", id: "id5", product: "Marmelade", status: false },
  { department: "Ceralien", id: "id3", product: "Müsli", status: false },
  { department: "Ceralien", id: "id4", product: "Honig", status: false },
  { department: "Molkereiprodukte", id: "id1", product: "Milch", status: false }
];

Answer 1

arr1包含对象，所以只需克隆 arr1是不足够的。您需要克隆 arr1 中的对象也。
您可以使用 .map()函数和扩展运算符创建一个新数组，该数组包含 arr1 中对象的克隆。 .

const arr1 = [
  { department: "Lebensmittel", id: "id6", product: "Nudeln", status: false },
  { department: "Ceralien", id: "id5", product: "Marmelade", status: false },
  { department: "Ceralien", id: "id3", product: "Müsli", status: false },
  { department: "Ceralien", id: "id4", product: "Honig", status: false },
  { department: "Molkereiprodukte", id: "id1", product: "Milch", status: false }
];

let testArr = arr1.map(obj => ({...obj}));

testArr.forEach(obj => (obj.status = "test"));

console.log(arr1[0]);
console.log(testArr[0]);

.as-console-wrapper { max-height: 100% !important; top: 0; } 

使用 .map()函数还允许您更新返回的对象。所以你可以删除 forEach循环并使用 .map()函数不仅可以克隆对象，还可以更新 status克隆对象的属性。

const arr1 = [
  { department: "Lebensmittel", id: "id6", product: "Nudeln", status: false },
  { department: "Ceralien", id: "id5", product: "Marmelade", status: false },
  { department: "Ceralien", id: "id3", product: "Müsli", status: false },
  { department: "Ceralien", id: "id4", product: "Honig", status: false },
  { department: "Molkereiprodukte", id: "id1", product: "Milch", status: false }
];

let testArr = arr1.map(obj => ({...obj, status: 'test'}));

console.log(arr1[0]);
console.log(testArr[0]);

.as-console-wrapper { max-height: 100% !important; top: 0; }