Shallow Copy lwn. Deep Copy dalam JavaScript

Gambaran keseluruhan

Dalam JavaScript, menyalin objek atau tatasusunan boleh dikategorikan kepada salinan cetek dan salinan dalam. Memahami perbezaan adalah penting apabila berurusan dengan struktur data yang kompleks, terutamanya yang mengandungi objek atau tatasusunan bersarang.

Panduan ini menerangkan konsep ini, ciri-cirinya, kaedah untuk melaksanakannya dan masa untuk menggunakannya.

1. Salinan Cetek

Takrif
Salinan cetek mencipta pendua sifat peringkat atas sesuatu objek atau tatasusunan. Walau bagaimanapun, untuk objek atau tatasusunan bersarang, hanya rujukan yang disalin, bukan data sebenar.

Ciri-ciri

• Menyalin hanya tahap pertama sifat atau elemen.
• Objek atau tatasusunan bersarang berkongsi rujukan dengan objek/tatasusunan asal.
• Ringan dan cekap untuk struktur ringkas tetapi tidak sesuai untuk pendua bebas data bersarang.

1.1 Menggunakan Object.assign()

const original = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, original);

shallowCopy.b.c = 42; 
console.log(original.b.c); // OUTPUT: 42 (The original object also affected due to shared reference)

1.2 Menggunakan Operator Spread (...)

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

shallowCopy.b.c = 90;
console.log(original.b.c); // OUTPUT: 90

1.3 Mari lihat contoh salinan cetek pada Kaedah Tatasusunan (hirisan, concat)

const original = [1, 2, [3, 4]];
const shallowCopy = original.slice();

shallowCopy[2][0] = 10; 
console.log(original[2][0]); // OUTPUT: 10

2. Salinan Dalam

Takrif
Salinan dalam mencipta pendua bebas sepenuhnya bagi objek atau tatasusunan. Semua peringkat, termasuk struktur bersarang, disalin secara rekursif. Perubahan pada struktur yang disalin tidak menjejaskan yang asal, begitu juga sebaliknya.

Ciri-ciri

• Menyalin semua peringkat struktur secara rekursif.
• Objek atau tatasusunan bersarang adalah bebas daripada yang asal.
• Secara pengiraan lebih berat daripada salinan cetek.

2.1 Menggunakan JSON.stringify() dan JSON.parse()

• Menukar objek kepada rentetan JSON dan kemudian kembali kepada objek baharu.
• Penghadan: Tidak mengendalikan fungsi, Tarikh, RegExp atau rujukan bulat.

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

deepCopy.b.c = 42;
console.log(original.b.c); // OUTPUT: 2 (original remains unaffected)

2.2 Menggunakan structuredClone()
Kaedah moden untuk penyalinan dalam yang menyokong rujukan bulat dan objek khas seperti Tarikh.

const original = { a: 1, b: { c: 2 }, date: new Date() };
const deepCopy = structuredClone(original);

deepCopy.b.c = 42;
console.log(original.b.c); // OUTPUT: 2
console.log(original.date === deepCopy.date); // FALSE

2.3 Menggunakan Fungsi Rekursif Tersuai
Penyelesaian yang fleksibel untuk mengendalikan kes kompleks secara manual.

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

  if (Array.isArray(obj)) return obj.map(deepCopy); 

  const copy = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

const original = { a: 1, b: { c: 2 } };
const deepCopyObj = deepCopy(original);

deepCopyObj.b.c = 42;
console.log(original.b.c); // OUTPUT: 2

3. Bila hendak menggunakan setiap satu?

Salinan Cetek

• Untuk objek rata atau tatasusunan tanpa struktur bersarang.
• Apabila prestasi adalah kritikal dan rujukan dikongsi untuk objek bersarang boleh diterima.

Salinan Dalam

• Untuk objek/tatasusunan yang kompleks dan bersarang dalam.
• Apabila anda memerlukan kebebasan sebenar antara salinan dan yang asal.

4. Rumusan

Salinan Cetek

• Mudah dan cekap.
• Sesuai untuk struktur rata atau apabila rujukan dikongsi boleh diterima.

Salinan Dalam

• Teguh dan memastikan kemerdekaan sepenuhnya.
• Sesuai untuk struktur bersarang dalam atau kompleks.

Ini ialah penjelasan mendalam tentang salinan Cetek dan salinan Deep objek dalam JavaScript. Pilih kaedah yang sesuai berdasarkan kes penggunaan dan keperluan prestasi anda.

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