Deep clone object in JavaScript

18 Oct 2018

Share to:

สวัสดีครับ ไม่ได้เขียน Blog มานาน วันนี้เอาซะหน่อยเป็นเรื่องสั้นๆที่เกี่ยวกับการ Clone object ใน Javascript

ปกติ Object ใน Javascript จะเป็น Referent type หมายความว่า เมื่อเราสร้าง Object ขึ้นมา มันจะสร้าง Reference variable ไว้ใน Stack memory และใช้ Variable ที่เราประกาศ ชี้ไปยัง data ที่อยู่ในหน่วยความจำส่วนของ Heap memory อีกที

เพื่อความเข้าใจมาดูตัวอย่างนี้ครับ

val obj1 = {
  counter: 1
}

val obj2 = obj1

obj2.counter++

// Output "Counter in obj1 is: 2"
console.log("Counter in obj1 is: " + obj1.counter)

จากตัวอย่าง จะเห็นว่า obj1 และ Obj2 ชี้ไปยัง Object เดียวกัน ทําให้เมื่อเปลี่ยนแปลงข้อมูลที่อยู่ใน obj2 ส่งผลให้ obj1 เปลี่ยนแปลงตามไปด้วย

ถ้าหากว่าถ้าเราต้องการจะ Clone object ละ จะทําอย่างไร?

ในบทความนี้ผมจะเสนอวิธีการ Clone สองวิธีดังนี้

Clone object แบบที่1 ใช้ JSON.parse และ JSON.stringify

const deepClone = (obj) => {
  return JSON.parse(JSON.stringify(obj));
};

let testObject = {
  counter: 1,
};

let newObject = deepClone(testObject);

newObject.counter++;

console.log('testObject data is ' + testObject.counter);
console.log('newObject data is ' + newObject.counter);

ลองรัน Code ได้ที่นี่ es6console.com/jnenhefu/

การทํางานคือจะแปลง Object เป็น Json String ก่อน แล้วก็แปลงกลับ เป็น Object อีกครั้ง

Clone object แบบที่2

const deepClone = (obj, output = Array.isArray(obj) ? [...obj] : { ...obj }) => {
  Object.keys(obj).forEach((key) => {
    if (typeof obj[key] === 'object') {
      output[key] = Array.isArray(obj[key]) ? [...obj[key]] : { ...obj[key] };
      deepCopy(obj[key], output[key]);
    }
  });

  return output;
};

let testObject = {
  counter: 1,
};

let newObject = deepClone(testObject);

newObject.counter++;

console.log('testObject data is ' + testObject.counter);
console.log('newObject data is ' + newObject.counter);

ทดลองรันได้ที่นี่ jsfiddle.net/kr81zq67/3/

ทั้งสองแบบสามารถใช้งานได้เหมือนกัน แต่จะมีข้อแตกต่างคือ แบบที่1 จะไม่สามารถใช้กับ Object ที่มีข้อมูลเป็น Fuction ได้ ส่วนแบบที่2 สามารถใช้กับ Object ที่มีข้อมูลทุกประเภท

Suggestion blogs

[Raspberry pi] ทํา image file จาก sd card

สวัสดีครับ ในบทความนี้จะเกี่ยวข้องกับ raspberry pi คือเราจะมาทํา image file จาก sd card กัน ปกติเวลาเราลงโปรแกรม และพัฒนาโปรแกรมบน raspberry pi บางที่เราอยากจะ backup หรือ clone เก็บไว้ เป็น image file ต้นฉบับของเราเอง เราจะสามารถทําได้โดยมีขั้นตอนดังนี้

เริ่มต้น DigitalOcean

มาทําความรู้จัก DigitalOcean กันก่อนDigitalOcean เป็น Simple Cloud Hosting คือผู้ให้บริการ Hosting ที่เราสามารถทําอะไรกับเครื่องได้ทุกอย่าง เหมือนกับว่าเรามีเครื่อง server มาใช้ทําอะไรก็ได้ตามที่เราต้องการ จุดเด่นของ DigitalOcean คือ ค่าบริการที่ถูกมาก เริ่มต้นเพียงเดือนละ $5 หรือ ประมาณ 180 บาท นอกจากค่าบริการที่ถูกแล้วยัง **ใช้งานง่าย **อีกด้วย หลังจากที่ผมได้ใช้งานมาสักพัก การ support ปัญหาต่างๆดีมาก

[ภาษาซี] การรับข้อมูล (input)

function ที่ใช้ในการรับข้อมูลจากคีย์บอร์ด คือ scanf (scan formatted) รูปแบบการใช้งานคือ


Copyright © 2019 - 2024 thiti.dev |  v1.34.0 |  Privacy policy | 

Build with ❤️ and Astro.

Github profile   Linkedin profile   Instagram   X profile   Youtube channel   Telegram   Email contact   วงแหวนเว็บ