Deep Clone ใน Javascript
2 min read - Published at Fri Aug 11 2023
Deep Clone !!
โคลน คือ ดินร่วนปนดินหรือดินผสมกับน้ำ มันมักจะก่อตัวหลังจากฝนตกหรือใกล้แหล่งน้ำ ไม่ใช่ละ!! (Clone) คือ ขั้นตอนซึ่งพืชต้นใหม่สามารถถูกสร้างขึ้นจากกิ่งได้ และในทางคอมพิวเตอร์คือ สิ่งที่ทำขึ้นให้เหมือนกับของเดิม หรือเหมือนกับต้นฉบับ … กว่าจะรู้เรื่อง!!!
อะไรกันแน่
พอเราได้เรื่อง Clone คืออะไร แล้ว Deep แปลว่า ลึก,ลึกซึ้ง เพราะฉะนั้นจับสองคำมาร่วมกัน Deep Clone ก็คือ การทำให้เหมือนกันแบบไม่ขึ้นต่อกัน นั่นเอง.. — แปลเอง ไม่มีที่มา ขออภัย–
โค้ด
จากตัวอย่าง เราจะเห็นว่า การใช้วิธี a=b เมื่อเราแก้ arrayCopy ในตำแหน่งที่ 1 จะทำให้ข้อมูล array เปลี่ยนไปด้วย มันคือการไปแก้ที่ address ที่ในหน่วยความจำตำแหน่งเดียวกัน นั่นเอง เช่นเดียวกันกับตัวอย่างนี้
ก่อนอื่นใน JS ES5 เราจะใช้ Object.assign() ในการจะ Copy Object ชุดนึง และใน ES6 ก็จะใช้ spread operator แทนแบบเดิม
จากตัวอย่าง ด้านบน คือการใช้ spread operator โดยให้ obj2 โคลนจาก obj1 และแก้ไขตรง obj1.game[0] ปรากฎว่า ผลลัพท์ที่ได้ obj2.game[0] ก็มีการเปลี่ยนแปลงด้วย เพราะฉะนั้นแล้ว ทำอย่างไร ให้ทั้ง 2 object ไม่ขึ้นต่อกัน นั่นคือการใช้ deep clone ดังนี้
ตัวอย่างโค้ด คือการแปลงจาก object เป็น string แล้วจาก string ก็เป็น json อีกที แต่ๆ แต่ๆ ปัญหาเหล่านี้จะหายไป ถ้าใช้ Lib พวก lodash ครับ
Made with ❤️ Coding