Seberapa sering Anda mencoba mengkloning item dalam Javascript dan hasilnya tidak seperti yang Anda harapkan? Pada artikel ini, kami akan mengklarifikasi ide-ide penting yang mendorong kloning untuk memastikan bahwa Anda selalu menggunakan pilihan terbaik.

Membedakan antara Salinan Dangkal dan Penyalinan Dalam

Javascript memiliki 2 jenis salinan objek:

1. Salinan Dangkal : menyiratkan bahwa level pertama item direplikasi. Level yang lebih dalam dirujuk.

2. Deep Copy: artinya semua level objek disalin . Ini adalah salinan sebenarnya dari objek tersebut.

Untuk dan pengalaman mendalam, saya meminta ChatGPT untuk membuatkan saya objek bersarang dengan semua tipe data yang mungkin dan mengembalikan saya ini:

const nestedObject1 = {
    string: 'Hello, world!',
    number: 42,
    boolean: true,
    nullValue: null,
    undefinedValue: undefined,
    array: ['apple', 'banana', 'cherry'],
    object: {
        nestedString: 'This is a nested string',
        nestedNumber: 123,
        nestedBoolean: false
    },
    date: new Date(),
    regexp: /hello/g,
    function: function () {
        console.log('This is a function');
    },
    symbol: Symbol('symbol')
};

Metode paling dasar dan terburuk untuk menyalin adalah menggunakan operator equals(=).

let object2 = nestedObject1
object2.string = "Hello from object2"
object2.number = 45
object2.array[2] = "Strawberry"
object2.object.nestedNumber = 66

Salinan dangkal:

Untuk mencapai salinan dangkal, kita dapat menggunakan operator spread ({…}) atau fungsi Object.assign() .

1. Penyebar Operator

let object2 = { ...nestedObject1 }
object2.string = "Hello from object2"
object2.number = 45
object2.array[2] = "Strawberry"
object2.object.nestedNumber = 66

Ini karena salinan dangkal baru saja membuat penunjuk lain ke tingkat yang lebih dalam dan karenanya membuat referensi dan bukan salinan.

2. Fungsi Object.assign()

let object2 = Object.assign({}, nestedObject1)
object2.string = "Hello from object2"
object2.number = 45
object2.array[2] = "Strawberry"
object2.object.nestedNumber = 66

Kami melihat hasil yang mirip dengan operator spread.

Salinan Dalam

Salinan dalam mengacu pada pembuatan salinan baru dari objek atau larik yang sepenuhnya independen dari aslinya, sehingga setiap perubahan yang dibuat pada salinan tidak akan memengaruhi aslinya, dan sebaliknya. Salinan yang dalam memastikan bahwa semua properti dan objek atau larik bersarang juga disalin, bukan hanya menyalin referensi ke objek atau larik asli.

Untuk mencapai salinan yang dalam, kita akan melihat metode berikut:
- JSON.parse dan JSON.stringify hack
- menggunakan fungsi khusus
- menggunakan perpustakaan pihak ke-3 (lodash)
- API bawaan

1. JSON.parse dan JSON.stringify diretas

let object2 = JSON.parse(JSON.stringify(nestedObject1))
object2.string = "Hello from object2"
object2.number = 45
object2.array[2] = "Strawberry"
object2.object.nestedNumber = 66

Seperti yang dapat kita lihat bahwa objek baru mengalami kehilangan data yang sangat besar . Bersamaan dengan ini, metode seperti tanggal mengalami perubahan tipe.
Karenanya metode ini sangat tidak efisien ketika berhadapan dengan tipe data non primitif seperti fungsi, ekspresi reguler, simbol, tidak terdefinisi, dll.

2. Menggunakan fungsi kustom

Saya membuat fungsi salinan dalam bernama deepcopy() dan menulis banyak kode, dan menerapkan perubahan yang sama.

function deepCopy(obj) {
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    let copy = Array.isArray(obj) ? [] : {};
    Object.keys(obj).forEach((key) => {
        copy[key] = deepCopy(obj[key]);
    });
    return copy;
}
let object2 = deepCopy(nestedObject1)
object2.string = "Hello from object2"
object2.number = 45
object2.array[2] = "Strawberry"
object2.object.nestedNumber = 66

Seperti yang bisa kita lihat, metode ini juga menyebabkan hilangnya data secara besar-besaran mirip dengan metode JSON.parse & JSON.stringify.

3. Menggunakan library pihak ke-3 (lodash)

Sejauh ini, perpustakaan ini mengembalikan salinan data yang sangat bagus dengan kehilangan data paling minimal dan efisiensi maksimum.
Anda dapat memeriksanya dihttps://lodash.com/

Untuk menggunakan pustaka ini, Anda memerlukan npm atau benang dan skrip tipe modul.

const load = require('lodash');
const object2 = load.cloneDeep(nestedObject1);
object2.string = "Hello from object2"
object2.number = 45
object2.array[2] = "Strawberry"
object2.object.nestedNumber = 66

Ini adalah metode paling efisien untuk membuat salinan. Namun tantangannya di sini tetap bahwa, kita tidak selalu membutuhkan javascript format paket atau modul. Untuk ini, ada metode selanjutnya.

4. Menggunakan API bawaan

Menggunakan structuredClone API , kita dapat memperoleh salinan objek yang dalam dengan kehilangan data minimal. Namun metode ini tidak dapat melakukan penyalinan fungsi, simbol. Jadi untuk memodifikasi objek, kita sekarang punya

const nestedObject1 = {
    string: 'Hello, world!',
    number: 42,
    boolean: true,
    nullValue: null,
    undefinedValue: undefined,
    array: ['apple', 'banana', 'cherry'],
    object: {
        nestedString: 'This is a nested string',
        nestedNumber: 123,
        nestedBoolean: false
    },
    date: new Date(),
    regexp: /hello/g,
}

let object2 = structuredClone(nestedObject1)
object2.string = "Hello from object2"
object2.number = 45
object2.array[2] = "Strawberry"
object2.object.nestedNumber = 66

API kloning terstruktur bekerja pada browser, dan dengan batasan yang disebutkan di atas, ini masih memiliki solusi optimal dengan segala macam batasan.

Semoga Anda semua menemukan blog ini informatif dan sekarang telah belajar secara mendalam tentang berbagai metode penyalinan objek.