JavaScript Shallow Copy vs Deep Copy: Contoh dan Amalan Terbaik

Apabila bekerja dengan objek dan tatasusunan dalam JavaScript, membuat salinan struktur data adalah tugas biasa. Walau bagaimanapun, pembangun sering menghadapi cabaran apabila membuat keputusan antara salinan cetek dan salinan mendalam. Salah faham perbezaan boleh membawa kepada kesan sampingan yang tidak diingini dalam kod anda. Mari selami konsep ini, perbezaannya dan masa untuk menggunakannya.

---

? Muat turun eBuku - JavaScript: dari ES2015 hingga ES2023

---

Apakah Salinan Cetek?

Salinan cetek mencipta objek baharu dengan salinan sifat peringkat atas objek asal. Untuk sifat yang primitif (cth., nombor, rentetan, boolean), nilai itu sendiri disalin. Walau bagaimanapun, untuk sifat yang merupakan objek (seperti tatasusunan atau objek bersarang), hanya rujukan yang disalin—bukan data sebenar.

Ini bermakna walaupun objek baharu mempunyai salinan sifat peringkat atasnya sendiri, objek atau tatasusunan bersarang kekal dikongsi antara yang asal dan salinan.

Contoh Salinan Cetek

const original = {
  name: "Alice",
  details: {
    age: 25,
    city: "Wonderland"
  }
};

// Shallow copy
const shallowCopy = { ...original };

// Modify the nested object in the shallow copy
shallowCopy.details.city = "Looking Glass";

// Original object is also affected
console.log(original.details.city); // Output: "Looking Glass"

Cara Membuat Salinan Cetek

1. Menggunakan Operator Spread (...):

   const shallowCopy = { ...originalObject };

1. Menggunakan Object.assign():

   const shallowCopy = Object.assign({}, originalObject);

Walaupun kaedah ini pantas dan mudah, kaedah ini tidak sesuai untuk objek bersarang dalam.

---

Apakah Salinan Dalam?

Salinan dalam menduplikasi setiap sifat dan sub-sifat objek asal. Ini memastikan bahawa salinan adalah bebas sepenuhnya daripada yang asal dan perubahan pada salinan tidak menjejaskan objek asal.

Penyalinan dalam adalah penting apabila berurusan dengan struktur data yang kompleks seperti objek atau tatasusunan bersarang, terutamanya dalam senario di mana integriti data adalah kritikal.

Contoh Salinan Dalam

const original = {
  name: "Alice",
  details: {
    age: 25,
    city: "Wonderland"
  }
};

// Shallow copy
const shallowCopy = { ...original };

// Modify the nested object in the shallow copy
shallowCopy.details.city = "Looking Glass";

// Original object is also affected
console.log(original.details.city); // Output: "Looking Glass"

Cara Membuat Salinan Dalam

1. Menggunakan JSON.stringify() dan JSON.parse():
   • Menukar objek kepada rentetan JSON dan kemudian menghuraikannya semula menjadi objek baharu.
   • Kehadan:
     • Tidak boleh mengendalikan rujukan pekeliling.
     • Abaikan sifat seperti fungsi, tidak ditentukan atau Simbol.

   const shallowCopy = { ...originalObject };

1. Menggunakan Perpustakaan:
   • Perpustakaan seperti Lodash menyediakan kaedah pengklonan mendalam yang mantap.

   const shallowCopy = Object.assign({}, originalObject);

1. Fungsi Rekursif Tersuai:
   • Untuk kawalan penuh, anda boleh menulis fungsi rekursif untuk mengklon objek bersarang.

---

Membandingkan Salinan Cetek dan Salinan Dalam

Ciri Salinan Cetek Salinan Dalam

Feature	Shallow Copy	Deep Copy
Scope	Copies only top-level properties.	Copies all levels, including nested data.
References	Nested references are shared.	Nested references are independent.
Performance	Faster and lightweight.	Slower due to recursive operations.
Use Cases	Flat or minimally nested objects.	Deeply nested objects or immutable structures.

Skop Menyalin hanya sifat peringkat teratas. Menyalin semua peringkat, termasuk data bersarang. Rujukan Rujukan bersarang dikongsi. Rujukan bersarang adalah bebas. Prestasi Lebih pantas dan ringan. Lebih perlahan disebabkan oleh operasi rekursif. Kes Penggunaan Objek rata atau bersarang minimum. Objek bersarang dalam atau struktur tidak boleh ubah.

---

Bila Gunakan Shallow Copy

• Objek Rata: Apabila berurusan dengan objek mudah tanpa sifat bersarang.
• Prestasi: Apabila kelajuan adalah penting dan anda tidak perlu mengendalikan data bersarang dalam.
• Perubahan Sementara: Apabila anda berhasrat untuk mengubah suai sifat peringkat teratas tetapi berkongsi data bersarang.

Contoh Kes Penggunaan

Menyalin objek tetapan pengguna untuk membuat pelarasan pantas:

const original = {
  name: "Alice",
  details: {
    age: 25,
    city: "Wonderland"
  }
};

// Shallow copy
const shallowCopy = { ...original };

// Modify the nested object in the shallow copy
shallowCopy.details.city = "Looking Glass";

// Original object is also affected
console.log(original.details.city); // Output: "Looking Glass"

---

Bila Menggunakan Deep Copy

• Struktur Kompleks: Untuk objek dengan pelbagai peringkat sarang.
• Mengelakkan Kesan Sampingan: Apabila anda perlu memastikan bahawa perubahan dalam salinan tidak menjejaskan salinan asal.
• Pengurusan Negeri: Dalam rangka kerja seperti React atau Redux, di mana kebolehubahan adalah kritikal.

Contoh Kes Penggunaan

Menduakan keadaan permainan atau aplikasi:

   const shallowCopy = { ...originalObject };

---

Kesilapan dan Kesalahan Biasa

1. Andaikan Salinan Cetek Sentiasa Mencukupi:

   • Pembangun sering tersilap menggunakan kaedah salinan cetek untuk objek bersarang, yang membawa kepada perubahan yang tidak diingini dalam data asal.

2. Menggunakan Kaedah JSON secara berlebihan:

   • Walaupun JSON.stringify/JSON.parse mudah, ia tidak berfungsi untuk semua objek (mis., objek yang mengandungi kaedah atau rujukan bulat).

3. Mengabaikan Prestasi:

   • Kaedah salinan dalam boleh menjadi lebih perlahan, terutamanya untuk objek besar, jadi gunakannya dengan bijak.

---

Kesimpulan

Memahami perbezaan antara salinan cetek dan salinan dalam adalah penting untuk menulis kod JavaScript bebas pepijat. Salinan cetek adalah cekap untuk struktur rata, manakala salinan dalam amat diperlukan untuk objek yang kompleks dan bersarang. Pilih kaedah yang sesuai berdasarkan struktur data dan keperluan aplikasi anda, dan elakkan kemungkinan perangkap dengan mengetahui batasan setiap pendekatan.

---

? Muat turun eBuku - JavaScript: dari ES2015 hingga ES2023

Atas ialah kandungan terperinci JavaScript Shallow Copy vs Deep Copy: Contoh dan Amalan Terbaik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!