javascript - การคัดลอกอาเรย์แบบลึกใน Angular 2 + TypeScript

ฉันมีอาเรย์ของวัตถุซึ่งเป็นข้อมูลนำเข้า ให้เรียกมันว่า content

เมื่อพยายามคัดลอกเชิงลึก มันยังคงมีการอ้างอิงถึงอาเรย์ก่อนหน้าอยู่

ฉันจำเป็นต้องทำสำเนาอาร์เรย์อินพุตนั้น และเปลี่ยนคุณสมบัติหนึ่งของส่วนที่ทำสำเนา

นานมาแล้วที่ฉันได้ลองวิธีต่างๆ แต่ก็ไม่ประสบความสำเร็จ

วิธี ES6:

public duplicateArray() {
  arr = [...this.content]
  arr.map((x) => {x.status = DEFAULT});
  return this.content.concat(arr);
}

วิธี slice:

public duplicateArray() {
  arr = this.content.slice(0);
  arr.map((x) => {x.status = DEFAULT});
  return this.content.concat(arr);
}

ในทั้งสองนั้น วัตถุทั้งหมดภายในอาร์เรย์มี status: 'Default'

วิธีที่ดีที่สุดในการคัดลอกอาร์เรย์แบบลึกใน Angular 2 คืออะไร?

คำตอบ #1

ตรวจสอบนี่:

  let cloned = source.map(x => Object.assign({}, x));

คำตอบ #2

ง่าย

let objCopy  = JSON.parse(JSON.stringify(obj));

นี่ก็ใช้ได้เช่นกัน (เฉพาะกับอาเรย์)

let objCopy2 = obj.slice()

คำตอบ #3

นี่คือข้อเสนอของ Daria (ดูความคิดเห็นในคำถาม) ซึ่งใช้งานได้ตั้งแต่ TypeScript 2.1 และโดยพื้นฐานจะโคลนแต่ละองค์ประกอบจากอาร์เรย์:

this.clonedArray = theArray.map(e => ({ ... e }));

คำตอบ #4

นี่กำลังใช้ได้ผลสำหรับฉัน:

this.listCopy = Object.assign([], this.list);

คำตอบ #5

วิธีแก้ปัญหาเพียงอย่างเดียวที่ฉันพบ (เกือบจะทันทีหลังจากโพสต์คำถาม) คือการวนลูปผ่านอาร์เรย์และใช้ Object.assign()

แบบนี้:

public duplicateArray() {
  let arr = [];
  this.content.forEach((x) => {
    arr.push(Object.assign({}, x));
  })
  arr.map((x) => {x.status = DEFAULT});
  return this.content.concat(arr);
}

ฉันรู้ว่านี่ไม่ใช่วิธีที่ดีที่สุด และฉันสงสัยว่ามีวิธีแก้ปัญหาที่ดีกว่านี้หรือไม่

คำตอบ #6

วิธีที่สะอาดในการคัดลอกวัตถุอย่างลึกที่มีวัตถุซ้อนอยู่ข้างในคือการใช้เมทอด cloneDeep ของ lodash

สำหรับ Angular คุณสามารถทำได้แบบนี้:

ติดตั้ง lodash ด้วย yarn add lodash หรือ npm install lodash

ในคอมโพเนนต์ของคุณ นำเข้า cloneDeep และใช้งานมัน:

import * as cloneDeep from 'lodash/cloneDeep';
...
clonedObject = cloneDeep(originalObject);

มันเพิ่มเพียง 18KB ให้กับการสร้างของคุณ คุ้มค่ากับประโยชน์ที่ได้รับ

ฉันยังได้เขียนบทความไว้ที่นี่ด้วย หากคุณต้องการมุมมองเพิ่มเติมเกี่ยวกับเหตุผลในการใช้ cloneDeep ของ lodash