React/js- 復制數組並編輯而不編輯原始數組

Question

我正在嘗試過濾數組，將結果傳遞給新數組並編輯新數組而不更改原始數組。

代碼如下所示：

 const personalDocs = [{ "IDcard": false, "passport": true, "documentnumber": "1", "dateofissue": "" }, { "IDcard": true, "passport": false, "documentnumber": "2", "dateofissue": "" }]; const passports = personalDocs.filter((doc) => doc.passport === true); const passportsCollection = [...passports]; // tried: const passportsCollection = passports.slice() passportsColection.forEach(object => { delete object['IDcard']; object.taken = "YES"; }); console.log("ALL PERSONAL DOCS:") console.log(personalDocs) // this becomes same as passportsCollection :( console.log("JUST PASSPORTS") console.log(passportsCollection)

此處提供實時代碼： https ://codesandbox.io/s/agitated-wilson-p9w8kt?file=/src/App.js

這與javascripts基礎或反應有關嗎？

謝謝你。

Answer 1

這條線沒有做你認為它做的事情：

const passportsCollection = [...passports];

它不會克隆項目。 它創建數組的副本，但引用相同的對象。

為什么？ 因為對象是通過引用傳遞的。 因此，兩個數組中的每一個中的每個項目都將是對同一（基本）對象的引用。

要克隆對象，您需要傳播它們中的每一個：

const passportsCollection = passports.map(i => ({ ...i }));

看到它工作：

 const personalDocs = [{ "IDcard": false, "passport": true, "documentnumber": "1", "dateofissue": "" }, { "IDcard": true, "passport": false, "documentnumber": "2", "dateofissue": "" } ]; const passports = personalDocs.filter((doc) => doc.passport === true); const passportsCollection = passports.map(i => ({ ...i })); // tried: const passportsCollection = passports.slice() passportsCollection.forEach(object => { delete object['IDcard']; object.taken = "YES"; }); console.log("ALL PERSONAL DOCS:") console.log(personalDocs) // this becomes same as passportsCollection :( console.log("JUST PASSPORTS") console.log(passportsCollection)

您遇到的另一個問題是您在輸入passportsCollection時錯過了一個l 。

---

在單獨的說明中，您正在做的事情可以簡化為：

const passportsCollection = personalDocs
  .filter(o => o.passport)
  .map(({ IDcard, ...o }) => ({ ...o, taken: 'YES'}))

 const personalDocs = [{ "IDcard": false, "passport": true, "documentnumber": "1", "dateofissue": "" }, { "IDcard": true, "passport": false, "documentnumber": "2", "dateofissue": "" } ]; console.log({ personalDocs, passportsCollection: personalDocs .filter(o => o.passport) .map(({ IDcard, ...o }) => ({ ...o, taken: 'YES'})) })

Answer 2

它與 JavaScript 基礎知識有關。

您復制了數組，但沒有復制數組內部的對象。

const copy = passports.map(object => ({ ...object})

請注意.map和.filter已經創建了數組的副本，因此您無需執行 `[...passports]

您也可以嘗試使用structuredClone

Answer 3

您可以直接使用map和filter而不是forEach來創建一個新數組。 您可以破壞對象以刪除IDcard而不是使用delete關鍵字

.map(({
  IDcard,
  ...object
})

請參閱下面的片段

 const personalDocs = [{ IDcard: false, passport: true, documentnumber: "1", dateofissue: "" }, { IDcard: true, passport: false, documentnumber: "2", dateofissue: "" } ]; const passports = personalDocs.filter(doc => doc.passport).map(({ IDcard, ...object }) => ({ ...object, taken: 'YES' })); console.log("ALL PERSONAL DOCS:"); console.log(personalDocs); console.log("JUST PASSPORTS"); console.log(passports);