Salin nilai variabel ke yang lain

Saya memiliki variabel yang memiliki objek JSON sebagai nilainya. Saya langsung menetapkan variabel ini ke beberapa variabel lain sehingga mereka memiliki nilai yang sama. Begini Cara kerjanya:

var a = $('#some_hidden_var').val(),
    b = a;

Ini berfungsi dan keduanya memiliki nilai yang sama. Saya menggunakan mousemoveevent handler untuk mengupdate bseluruh aplikasi saya. Pada satu klik tombol, saya ingin kembali bke nilai asli, artinya nilai yang disimpan a.

$('#revert').on('click', function(e){
    b = a;
});

Setelah ini, jika saya menggunakan mousemoveevent handler yang sama , ia memperbarui keduanya adan b, ketika sebelumnya hanya memperbarui bseperti yang diharapkan.

Saya bingung tentang masalah ini! Ada apa disini?

Penting untuk memahami apa yang =dilakukan dan tidak dilakukan oleh operator di JavaScript.

The =operator tidak membuat salinan data.

The =Operator menciptakan baru referensi ke yang sama data.

Setelah Anda menjalankan kode asli Anda:

var a = $('#some_hidden_var').val(),
    b = a;

adan bsekarang ada dua nama berbeda untuk objek yang sama .

Setiap perubahan yang Anda lakukan pada konten objek ini akan terlihat sama, baik Anda mereferensikannya melalui avariabel atau bvariabel. Mereka adalah objek yang sama.

Jadi, ketika Anda nanti mencoba untuk "kembali" bke aobjek asli dengan kode ini:

b = a;

Kode sebenarnya tidak melakukan apa - apa , karena adan bmerupakan hal yang persis sama. Kode tersebut sama seperti jika Anda menulis:

b = b;

yang jelas tidak akan melakukan apapun.

Mengapa kode baru Anda berfungsi?

b = { key1: a.key1, key2: a.key2 };

Di sini Anda membuat objek baru dengan {...}literal objek. Objek baru ini tidak sama dengan objek lama Anda. Jadi Anda sekarang menyetel bsebagai referensi ke objek baru ini, yang melakukan apa yang Anda inginkan.

Untuk menangani objek arbitrer, Anda dapat menggunakan fungsi kloning objek seperti yang tercantum dalam jawaban Armand, atau karena Anda menggunakan jQuery, cukup gunakan $.extend()fungsi tersebut . Fungsi ini akan membuat salinan dangkal atau salinan dalam dari suatu objek. (Jangan bingung ini dengan $().clone()metode untuk menyalin elemen DOM, bukan objek.)

Untuk salinan dangkal:

b = $.extend( {}, a );

Atau salinan dalam:

b = $.extend( true, {}, a );

Apa perbedaan antara salinan dangkal dan salinan dalam? Salinan dangkal mirip dengan kode Anda yang membuat objek baru dengan literal objek. Ini membuat objek tingkat atas baru yang berisi referensi ke properti yang sama seperti objek aslinya.

Jika objek Anda hanya berisi tipe primitif seperti angka dan string, salinan dalam dan salinan dangkal akan melakukan hal yang persis sama. Tetapi jika objek Anda berisi objek atau larik lain yang bersarang di dalamnya, salinan dangkal tidak akan menyalin objek bertingkat itu, itu hanya membuat referensi ke sana. Jadi, Anda bisa memiliki masalah yang sama dengan objek bersarang yang Anda miliki dengan objek level teratas. Misalnya, diberikan objek ini:

var obj = {
    w: 123,
    x: {
        y: 456,
        z: 789
    }
};

Jika Anda melakukan penyalinan dangkal dari objek tersebut, maka xproperti objek baru Anda adalah objek yang sama xdari aslinya:

var copy = $.extend( {}, obj );
copy.w = 321;
copy.x.y = 654;

Sekarang objek Anda akan terlihat seperti ini:

// copy looks as expected
var copy = {
    w: 321,
    x: {
        y: 654,
        z: 789
    }
};

// But changing copy.x.y also changed obj.x.y!
var obj = {
    w: 123,  // changing copy.w didn't affect obj.w
    x: {
        y: 654,  // changing copy.x.y also changed obj.x.y
        z: 789
    }
};

Anda dapat menghindari ini dengan salinan dalam. Salinan dalam berulang ke dalam setiap objek dan larik bersarang (dan Tanggal dalam kode Armand) untuk membuat salinan objek tersebut dengan cara yang sama seperti membuat salinan objek tingkat atas. Jadi, perubahan copy.x.ytidak akan berpengaruh obj.x.y.

Jawaban singkat: Jika ragu, Anda mungkin menginginkan salinan yang mendalam.

Saya menemukan menggunakan JSON berfungsi tetapi perhatikan referensi melingkar kami

var newInstance = JSON.parse(JSON.stringify(firstInstance));

pertanyaannya sudah terpecahkan sejak waktu yang cukup lama, tetapi untuk referensi di masa mendatang solusi yang mungkin adalah

b = a.slice(0);

Hati-hati, ini berfungsi dengan benar hanya jika a adalah larik angka dan string yang tidak bersarang

newVariable = originalVariable.valueOf();

untuk objek yang dapat Anda gunakan, b = Object.assign({},a);

Alasannya sederhana. JavaScript menggunakan referensi, jadi ketika Anda menetapkan b = aAnda menetapkan referensi bsehingga saat memperbarui aAnda juga memperbaruib

Saya menemukan ini di stackoverflow dan akan membantu mencegah hal-hal seperti ini di masa mendatang hanya dengan memanggil metode ini jika Anda ingin melakukan salinan mendalam dari suatu objek.

function clone(obj) {
    // Handle the 3 simple types, and null or undefined
    if (null == obj || "object" != typeof obj) return obj;

    // Handle Date
    if (obj instanceof Date) {
        var copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    }

    // Handle Array
    if (obj instanceof Array) {
        var copy = [];
        for (var i = 0, len = obj.length; i < len; i++) {
            copy[i] = clone(obj[i]);
        }
        return copy;
    }

    // Handle Object
    if (obj instanceof Object) {
        var copy = {};
        for (var attr in obj) {
            if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
        }
        return copy;
    }

    throw new Error("Unable to copy obj! Its type isn't supported.");
}

Saya tidak mengerti mengapa jawabannya begitu rumit. Dalam Javascript, primitif (string, angka, dll) diteruskan oleh nilai, dan disalin. Objek, termasuk array, diteruskan dengan referensi. Bagaimanapun, penugasan nilai baru atau referensi objek ke 'a' tidak akan mengubah 'b'. Tetapi mengubah konten 'a' akan mengubah konten 'b'.

var a = 'a'; var b = a; a = 'c'; // b === 'a'

var a = {a:'a'}; var b = a; a = {c:'c'}; // b === {a:'a'} and a = {c:'c'}

var a = {a:'a'}; var b = a; a.a = 'c'; // b.a === 'c' and a.a === 'c'

Tempel salah satu baris di atas (satu per satu) ke dalam node atau konsol javascript browser apa pun. Kemudian ketik variabel apa saja dan konsol akan menunjukkan nilainya.

Untuk string atau nilai input Anda cukup menggunakan ini:

var a = $('#some_hidden_var').val(),
b = a.substr(0);

Sebagian besar jawaban di sini menggunakan metode bawaan atau menggunakan perpustakaan / kerangka kerja. Metode sederhana ini seharusnya berfungsi dengan baik:

function copy(x) {
    return JSON.parse( JSON.stringify(x) );
}

// Usage
var a = 'some';
var b = copy(a);
a += 'thing';

console.log(b); // "some"

var c = { x: 1 };
var d = copy(c);
c.x = 2;

console.log(d); // { x: 1 }

Saya menyelesaikannya sendiri untuk saat ini. Nilai asli hanya memiliki 2 sub-properti. Saya mereformasi objek baru dengan properti dari adan kemudian menugaskannya b. Sekarang event handler saya hanya memperbarui b, dan yang asli atetap seperti itu.

var a = { key1: 'value1', key2: 'value2' },
    b = a;

$('#revert').on('click', function(e){
    //FAIL!
    b = a;

    //WIN
    b = { key1: a.key1, key2: a.key2 };
});

Ini bekerja dengan baik. Saya belum mengubah satu baris pun di kode saya kecuali yang di atas, dan berfungsi seperti yang saya inginkan. Jadi, percayalah, tidak ada lagi yang memperbarui a.

Solusi untuk AngularJS :

$scope.targetObject = angular.copy($scope.sourceObject)