Apa itu deep clone di javascript

Apakah Anda memperhatikan dalam contoh di atas kita tidak hanya menyalin objek, tetapi juga array bersarang, dan bahkan objek Tanggal?

Dan semua bekerja persis seperti yang diharapkan

Itu benar, structuredClone tidak hanya dapat melakukan hal di atas, tetapi juga sebagai tambahan

• Mengkloning objek dan array bersarang tanpa batas
• Kloning referensi melingkar
• Menggandakan berbagai jenis JavaScript, seperti Date, Set, Map, Error, RegExp, ArrayBuffer, Blob, File, structuredClone0, dan
• Transfer objek yang dapat dipindahtangankan

Jadi misalnya, kegilaan ini bahkan akan berhasil seperti yang diharapkan

Mengapa tidak menyebarkan objek saja?

Penting untuk dicatat bahwa kita berbicara tentang salinan yang dalam. Jika Anda hanya perlu melakukan salinan dangkal, alias salinan yang tidak menyalin objek atau array bersarang, maka kita cukup melakukan penyebaran objek

Atau bahkan salah satunya, jika Anda mau

Tapi begitu kami memiliki item bersarang, kami mengalami masalah

Seperti yang Anda lihat, kami tidak membuat salinan lengkap dari objek ini

Tanggal dan larik bersarang masih merupakan referensi bersama di antara keduanya, yang dapat menyebabkan masalah besar bagi kami jika kami ingin mengeditnya karena mengira kami hanya memperbarui objek acara kalender yang disalin

Mengapa tidak structuredClone1 ?

Ah ya, trik ini. Ini sebenarnya bagus, dan secara mengejutkan berkinerja, tetapi memiliki beberapa kekurangan yang structuredClone alamat

Ambil ini sebagai contoh

Jika kita mencatat structuredClone_3, kita akan mendapatkan

Bukan itu yang kami inginkan. structuredClone4 seharusnya menjadi objek Date, bukan string

Ini terjadi karena structuredClone6 hanya dapat menangani objek dasar, array, dan primitif. Jenis lain apa pun dapat ditangani dengan cara yang sulit diprediksi. Misalnya, Tanggal dikonversi menjadi string. Tapi Set_ hanya diubah menjadi structuredClone8

structuredClone6 bahkan sama sekali mengabaikan hal-hal tertentu, seperti Date0 atau fungsi

Misalnya, jika kita menyalin contoh Date_1 kita dengan metode ini

Ew

Oh ya, dan kami harus menghapus referensi melingkar yang awalnya kami miliki untuk ini, karena structuredClone6 hanya melempar kesalahan jika menemukan salah satu dari itu

Jadi, meskipun metode ini bagus jika persyaratan kami sesuai dengan kemampuannya, ada banyak hal yang dapat kami lakukan dengan structuredClone (alias semua hal di atas yang gagal kami lakukan di sini) yang tidak dapat dilakukan metode ini

Sampai saat ini, fungsi Date_4 Lodash telah menjadi solusi yang sangat umum untuk masalah ini

Dan ini, pada kenyataannya, berfungsi seperti yang diharapkan

Tapi, hanya ada satu peringatan di sini. Menurut ekstensi Biaya Impor di IDE saya, yang mencetak biaya kb dari apa pun yang saya impor, fungsi yang satu ini masuk secara keseluruhan 17. 4kb diperkecil (5. 3kb di-gzip)

Dan itu mengasumsikan Anda hanya mengimpor fungsi itu. Jika Anda malah mengimpor dengan cara yang lebih umum, tanpa menyadari bahwa pengocokan pohon tidak selalu berfungsi seperti yang Anda harapkan, Anda dapat secara tidak sengaja mengimpor hingga 25kb hanya untuk fungsi yang satu ini 😱

Meskipun itu tidak akan menjadi akhir dunia bagi siapa pun, itu tidak diperlukan dalam kasus kami, tidak ketika browser sudah memiliki structuredClone bawaan

Apa yang structuredClone tidak bisa digandakan

Fungsi tidak dapat dikloning

Mereka akan melontarkan pengecualian Date7 

Juga melontarkan pengecualian Date7

Deskriptor properti, setter, dan getter

Serta fitur mirip metadata yang serupa tidak dikloning

Misalnya, dengan pengambil, nilai yang dihasilkan digandakan, tetapi bukan fungsi pengambil itu sendiri (atau metadata properti lainnya)

Rantai prototipe tidak berjalan atau digandakan. Jadi jika Anda mengkloning instance dari Date_9, objek yang dikloning tidak akan lagi dikenal sebagai instance dari kelas ini (tetapi semua properti yang valid dari kelas ini akan dikloning)

Daftar lengkap jenis yang didukung

Sederhananya, apa pun yang tidak ada dalam daftar di bawah ini tidak dapat dikloning

Set0, ArrayBuffer, Set2, Set3, Date, Error jenis (yang tercantum secara khusus di bawah), Map , Set7 tetapi hanya benda biasa (e. g. dari literal objek), kecuali Set8 (alias Set9, Map0, Map1, Date0, Map3, Map4), RegExp, Set, ________3______7

Error, Map9, Error0, Error1, Error2, Error3, Error4

Error5, Blob, Error7, Error8, Error9, RegExp0, RegExp1, RegExp2, RegExp3, File, RegExp5, RegExp6, RegExp7, RegExp8, RegExp9, structuredClone0, ArrayBuffer1, ArrayBuffer2

Dukungan browser dan runtime

Dan inilah bagian terbaiknya - structuredClone didukung di semua browser utama, dan bahkan Node. js dan Deno

Catat saja peringatan dengan Web Worker yang memiliki dukungan lebih terbatas

Sudah lama datang, tapi kami akhirnya sekarang memiliki structuredClone untuk membuat objek kloning dalam JavaScript menjadi mudah. Terima kasih, Surma

Hai. Saya Steve, CEO Builder. io

Kami membuat cara drag + drop dengan komponen Anda untuk membuat halaman dan konten CMS lainnya di situs atau aplikasi Anda, secara visual

Anda dapat membaca selengkapnya tentang bagaimana hal ini dapat meningkatkan alur kerja Anda di sini

Anda mungkin menganggapnya menarik atau berguna

Bangun secara visual dengan komponen Anda

Pembangun. io adalah CMS Visual yang memungkinkan Anda menarik dan melepas untuk membuat konten di situs Anda secara visual, menggunakan komponen Anda

Apa itu klon dalam?

Apa itu klon dangkal vs klon dalam?

Apakah klon () salinan dalam atau salinan dangkal?

Bagaimana Anda mengkloning objek dalam JavaScript secara mendalam?