Salinan Jauh dari Objek dalam JavaScript menggunakan structuredClone

Feb 21 2023
Jika Anda di sini, saya yakin Anda telah menggunakan JSON.parse() + JSON.
Foto oleh Daniel K Cheung di Unsplash

Jika Anda di sini, saya yakin Anda telah menggunakan JSON.parse()+ JSON.stringify()trik ratusan kali untuk membuat salinan objek yang dalam di JavaScript. Anda tidak membutuhkan itu lagi, penduduk asli structuredClone()ada di sini untuk membantu Anda.

Salinan Dangkal vs Salinan dalam

Pertama-tama, mari kita ingat apa perbedaan antara Salinan Dangkal dan Salinan Dalam:

  • Salinan dangkal: artinya hanya level pertama objek yang disalin . Level yang lebih dalam direferensikan. Anda dapat melakukannya di JavaScript menggunakan operator Spread ( …) atau menggunakan Object.assign().
  • Salinan dalam: artinya semua level objek disalin . Ini adalah salinan sebenarnya dari objek tersebut. Anda dapat melakukannya menggunakan JSON.parse()+ JSON.stringify(), dan sekarang, Anda juga dapat melakukannya dengan native structuredClone().

Salin Dalam menggunakan StructuredClone

Metode global structuredClone()membuat salinan mendalam dari nilai yang diberikan menggunakan algoritma klon terstruktur .

Seperti yang Anda lihat di cuplikan kode ini:

  • Setelah memperbarui properti di tingkat pertama objek kloning, properti asli tidak diperbarui .
  • Setelah memperbarui properti di tingkat yang lebih dalam, properti asli tidak diperbarui . Ini terjadi karena, dalam hal ini, level yang lebih dalam juga disalin.

Selamat Coding!