คัดลอกลึกของวัตถุใน JavaScript โดยใช้structuralClone

หากคุณอยู่ที่นี่ ฉันพนันได้เลยว่าคุณใช้JSON.parse()+ JSON.stringify()หลอกหลายร้อยครั้งเพื่อสร้างสำเนาของวัตถุใน JavaScript คุณไม่ต้องการสิ่งนั้นอีกต่อไป คนพื้นเมืองstructuredClone()พร้อมช่วยเหลือคุณ

สำเนาตื้น vs สำเนาลึก

ก่อนอื่น มาจดจำความแตกต่างระหว่าง Shallow Copy และ Deep Copy:

• การคัดลอกแบบตื้น:หมายความว่า มีการคัดลอกเฉพาะระดับ แรกของวัตถุ มีการอ้างอิงระดับที่ลึกกว่า คุณสามารถทำได้ใน JavaScript โดยใช้โอเปอเรเตอร์ Spread ( …) หรือใช้Object.assign().
• Deep copy:หมายถึงการคัดลอกทุกระดับของวัตถุ นี่คือสำเนาที่แท้จริงของวัตถุ คุณสามารถทำได้โดยใช้JSON.parse()+ JSON.stringify()และตอนนี้คุณสามารถทำได้ด้วยภาษาstructuredClone()พื้นเมือง

Deep Copy โดยใช้structuralClone

วิธีการ ส่วนกลางstructuredClone()สร้างสำเนาเชิงลึกของค่าที่กำหนดโดยใช้อัลกอริทึมการโคลนที่มีโครงสร้าง

ดังที่คุณเห็นในข้อมูลโค้ดนี้:

• หลังจากอัพเดตคุณสมบัติในระดับแรกของอ็อบเจกต์โคลนแล้วคุณสมบัติดั้งเดิมจะไม่ถูกอัพเดต
• หลังจากอัปเดตพร็อพเพอร์ตี้ในระดับที่ลึกขึ้นแล้วพร็อพเพอร์ตี้เดิมจะไม่อัปเดตเลย สิ่งนี้เกิดขึ้นเนื่องจากในกรณีนี้ ระดับที่ลึกกว่าจะถูกคัดลอกด้วย

มีความสุขในการเข้ารหัส!