Shallow Copy vs Deep Copy dalam JavaScript

Apabila bekerja dengan JavaScript, memahami perbezaan antara salinan cetek dan salinan dalam adalah penting untuk manipulasi objek dan tatasusunan yang berkesan. Mari kita mendalami maksud istilah ini dan cara melaksanakan setiap jenis salinan dalam kod anda.

Salinan Cetek
Salinan cetek mencipta objek atau tatasusunan baharu yang memegang nilai yang sama seperti yang asal. Walau bagaimanapun, jika asal mengandungi objek atau tatasusunan bersarang, salinan cetek hanya menyalin rujukan kepada struktur bersarang ini, bukan struktur itu sendiri. Ini bermakna perubahan pada objek atau tatasusunan bersarang dalam struktur yang disalin juga akan mempengaruhi yang asal.

Contoh Kaedah Salinan Cetek:

1. Operator Spread ({...})

const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };

Di sini, shallowCopy ialah objek baharu, tetapi shallowCopy.b masih merujuk objek yang sama seperti original.b.

2.Object.assign()

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

1. Kaedah hirisan susunan

const originalArray = [1, 2, 3];
const shallowCopyArray = originalArray.slice();

Salinan Dalam
Salinan dalam mencipta objek atau tatasusunan baharu yang merupakan klon bebas yang lengkap daripada asal, termasuk semua objek dan tatasusunan bersarang. Perubahan kepada salinan dalam tidak menjejaskan yang asal dan sebaliknya.

Contoh Kaedah Salin Dalam:

1. JSON.stringify() dan JSON.parse()

const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));

Kaedah ini mensirikan objek kepada rentetan JSON dan kemudian menghuraikannya kembali kepada objek baharu. Walau bagaimanapun, ia tidak mengendalikan fungsi, rujukan tidak ditentukan atau bulatan.

2.Fungsi Rekursif

function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') return obj;

  const copy = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

1. StructuredClone() (dalam persekitaran JavaScript moden)

const deepCopy = structuredClone(original);

Bila Gunakan Setiap

• Salinan Cetek: Sesuai untuk objek atau tatasusunan ringkas tanpa struktur bersarang. Ia lebih pantas dan menggunakan kurang memori. Gunakannya apabila anda memerlukan salinan pantas di mana perubahan pada objek bersarang harus ditunjukkan dalam kedua-dua asal dan salinan.

• Salinan Dalam: Diperlukan untuk objek atau tatasusunan kompleks dengan struktur bersarang. Ia memastikan bahawa perubahan pada salinan tidak menjejaskan yang asal. Gunakannya apabila anda memerlukan klon bebas sepenuhnya.

Memahami perbezaan ini membantu mengelakkan pepijat yang timbul daripada rujukan dikongsi yang tidak diingini dan memastikan integriti data dalam aplikasi anda

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