Selamat tinggal `JSON.stringify()` dan `{...obj}`, Hello `structuredClone()`!

• Apakah structuredClone()?

  • structuredClone() ialah fungsi global yang diperkenalkan pada 2022 yang membolehkan pengklonan mendalam objek JavaScript. Tidak seperti kaedah tradisional seperti JSON.stringify() dan JSON.parse(), yang bergelut dengan struktur kompleks dan rujukan bulat, structuredClone() mengendalikan cabaran ini dengan mudah.

• Mengapa ia menjadi penukar permainan?

  • Ia adalah alat yang teguh untuk mencipta klon dalam yang sebenar, memelihara integriti objek bersarang dan rujukan bulat tanpa memerlukan logik tambahan atau penyelesaian. Selain itu, ia tersedia dalam persekitaran moden, termasuk Pekerja Web.

1. Pengklonan Objek Mudah: Asas

• Menggunakan {...obj} (Salinan Cetek)

  const original = { name: "Alice", details: { age: 25 } };
  const shallowCopy = { ...original };

  shallowCopy.details.age = 30;

  console.log(original.details.age); // 30
  console.log(shallowCopy.details.age); // 30

• Apa yang berlaku?

  • Pengendali hamparan {...obj} hanya mencipta salinan cetek. Objek butiran tidak diklon secara mendalam, jadi perubahan kepada shallowCopy.details mempengaruhi butiran asal juga.
  • Menggunakan JSON.stringify() + JSON.parse() (Deep Copy)

  const original = { name: "Alice", details: { age: 25 } };
  const deepCopy = JSON.parse(JSON.stringify(original));

  deepCopy.details.age = 30;

  console.log(original.details.age); // 25
  console.log(deepCopy.details.age); // 30

• Apa yang berlaku?

  • Kaedah ini menghasilkan salinan yang mendalam, tetapi ia mempunyai had: ia tidak boleh mengendalikan fungsi, rujukan yang tidak ditentukan atau bulatan.
  • Menggunakan structuredClone() (Deep Copy)

  const original = { name: "Alice", details: { age: 25 } };
  const clone = structuredClone(original);

  clone.details.age = 30;

  console.log(original.details.age); // 25
  console.log(clone.details.age); // 30

• Apa yang berlaku?
  • structuredClone() mencipta klon dalam, mengekalkan struktur tanpa sebarang had JSON.stringify() dan mengendalikan jenis data yang kompleks seperti rujukan bulat dan undefined.

2. Mengendalikan Rujukan Pekeliling: Satu Cabaran

• Rujukan Pekeliling dengan {...obj}

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const shallowCopy = { ...original }; // TypeError: Converting circular structure to JSON

• Apa yang berlaku?

  • {...obj} tidak dapat mengendalikan rujukan bulat, mengakibatkan ralat.
  • Rujukan Pekeliling dengan JSON.stringify()

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const jsonCopy = JSON.parse(JSON.stringify(original)); // TypeError: Converting circular structure to JSON

• Apa yang berlaku?

  • JSON.stringify() juga gagal dengan rujukan bulat, melemparkan ralat.
  • Rujukan Pekeliling dengan structuredClone()

  const original = { name: "Alice" };
  original.self = original;

  const clone = structuredClone(original);

  console.log(clone !== original); // true
  console.log(clone.self === clone); // true

• Apa yang berlaku?
  • structuredClone() mengendalikan rujukan bulat dengan lancar, mencipta klon dalam yang betul tanpa ralat.

3. Pengklonan dengan Fungsi dan tidak ditentukan: Satu Lagi Ujian

• Menggunakan {...obj}

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const shallowCopy = { ...original };

  console.log(shallowCopy.greet()); // "Hello!"
  console.log(shallowCopy.value); // undefined

• Apa yang berlaku?

  • {...obj} menyalin fungsi dan tidak ditentukan seperti yang dijangkakan, tetapi hanya secara cetek.
  • Menggunakan JSON.stringify()

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const jsonCopy = JSON.parse(JSON.stringify(original));

  console.log(jsonCopy.greet); // undefined
  console.log(jsonCopy.value); // undefined

• Apa yang berlaku?

  • JSON.stringify() tidak boleh mensirikan fungsi atau undefined, mengakibatkan kehilangannya dalam objek klon.
  • Menggunakan structuredClone()

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const clone = structuredClone(original);

  console.log(clone.greet); // undefined
  console.log(clone.value); // undefined

• Apa yang berlaku?
  • structuredClone() juga tidak mengklonkan fungsi tetapi mengekalkan nilai yang tidak ditentukan, menjadikannya lebih dipercayai daripada JSON.stringify() untuk objek kompleks.

4. Kelajuan dan Kecekapan: Nota Prestasi

• Kecekapan dengan Data Besar

  const largeArray = new Array(1e6).fill({ key: "value" });

  console.time("structuredClone");
  const clone = structuredClone(largeArray);
  console.timeEnd("structuredClone");

  console.time("JSON.stringify + JSON.parse");
  const jsonCopy = JSON.parse(JSON.stringify(largeArray));
  console.timeEnd("JSON.stringify + JSON.parse");

• Apa yang berlaku?
  • structuredClone() selalunya lebih pantas daripada JSON.stringify() + JSON.parse() untuk data yang besar dan kompleks dan mengelakkan perangkap penyiaran dan penyahserikatan.

5. Kesimpulan: Mengapa structuredClone() ialah Masa Depan

• Kebolehpercayaan: Mengendalikan rujukan bulat, fungsi dan nilai yang tidak ditentukan dengan lebih mudah diramalkan.
• Kecekapan: Melakukan pengklonan dalam dengan lebih pantas untuk set data yang besar dan tidak memerlukan penyelesaian.
• Kesederhanaan: Satu kaedah untuk mengawal kesemuanya—tiada lagi memilih antara {...obj}, JSON.stringify(), atau fungsi klon dalam tersuai.

Atas ialah kandungan terperinci Selamat tinggal `JSON.stringify()` dan `{...obj}`, Hello `structuredClone()`!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!