Bagaimana Anda mengkloning Array Objek di Javascript?

... di mana setiap objek juga memiliki referensi ke objek lain dalam array yang sama?

Ketika saya pertama kali datang dengan masalah ini saya hanya memikirkan sesuatu seperti

var clonedNodesArray = nodesArray.clone()

akan ada dan mencari info tentang cara mengkloning objek dalam javascript. Saya memang menemukan pertanyaan tentang StackOverflow (dijawab oleh @JohnResig yang sama) dan dia menunjukkan bahwa dengan jQuery Anda bisa melakukannya

var clonedNodesArray = jQuery.extend({}, nodesArray);

untuk mengkloning suatu objek. Saya mencoba ini, ini hanya menyalin referensi objek dalam array. Jadi kalau saya

nodesArray[0].value = "red"
clonedNodesArray[0].value = "green"

nilai dari kedua nodesArray [0] dan cloningNodesArray [0] akan berubah menjadi "hijau". Lalu saya mencoba

var clonedNodesArray = jQuery.extend(true, {}, nodesArray);

yang dalam menyalin Obyek, tetapi saya mendapat " terlalu banyak rekursi " dan " control stack overflow " pesan dari Firebug dan Opera Dragonfly.

Bagaimana Anda melakukannya? Apakah ini sesuatu yang seharusnya tidak dilakukan? Apakah ada cara yang dapat digunakan kembali untuk melakukan ini dalam Javascript?

Masalah dengan salinan dangkal Anda adalah bahwa semua objek tidak dikloning. Meskipun referensi untuk setiap objek unik di setiap array, setelah Anda akhirnya mengambilnya, Anda berurusan dengan objek yang sama seperti sebelumnya. Tidak ada yang salah dengan cara Anda mengkloningnya ... hasil yang sama akan terjadi menggunakan Array.slice ().

Alasan salinan Anda yang dalam mengalami masalah adalah karena Anda berakhir dengan referensi objek lingkaran. Deep akan sedalam itu bisa, dan jika Anda memiliki lingkaran, itu akan terus berlanjut hingga browser pingsan.

Jika struktur data tidak dapat direpresentasikan sebagai grafik asiklik terarah, maka saya tidak yakin Anda akan dapat menemukan metode serba guna untuk kloning dalam. Grafik siklik menyediakan banyak kasing sudut yang rumit, dan karena ini bukan operasi umum, saya ragu ada yang menulis solusi lengkap (jika itu mungkin - mungkin tidak! Tapi saya tidak punya waktu untuk mencoba menulis bukti yang kuat sekarang.). Saya menemukan beberapa komentar bagus tentang masalah di halaman ini .

Jika Anda memerlukan salinan mendalam dari Array Objek dengan referensi melingkar, saya yakin Anda harus memberi kode metode Anda sendiri untuk menangani struktur data khusus Anda, sehingga itu adalah kloning multi-pass:

1. Di babak pertama, buat klon dari semua objek yang tidak mereferensikan objek lain dalam array. Catat asal usul setiap objek.
2. Pada ronde kedua, hubungkan benda-benda itu menjadi satu.

Selama objek Anda mengandung konten JSON-serializable (tidak ada fungsi, tidak Number.POSITIVE_INFINITY, dll.) Tidak perlu ada loop untuk mengkloning array atau objek. Berikut ini adalah solusi satu garis vanila murni.

var clonedArray = JSON.parse(JSON.stringify(nodesArray))

Untuk meringkas komentar di bawah ini, keuntungan utama dari pendekatan ini adalah bahwa ia juga mengkloning isi array, bukan hanya array itu sendiri. Kelemahan utama adalah batasnya hanya bekerja pada konten JSON-serializable, dan kinerjanya (yang secara signifikan lebih buruk daripada slicependekatan berbasis).

Saya memecahkan kloning array objek dengan Object.assign

const newArray = myArray.map(a => Object.assign({}, a));

atau bahkan lebih pendek dengan sintaksis spread

const newArray = myArray.map(a => ({...a}));

Jika yang Anda butuhkan hanyalah salinan dangkal, cara yang sangat mudah adalah:

new_array = old_array.slice(0);

Cara terbaik dan terbaru untuk melakukan klon ini adalah sebagai berikut:

Menggunakan ...operator penyebaran ES6.

Inilah Contoh yang paling sederhana:

var clonedObjArray = [...oldObjArray];

Dengan cara ini kami menyebarkan array ke nilai individual dan meletakkannya di array baru dengan operator [].

Berikut ini contoh yang lebih panjang yang menunjukkan berbagai cara kerjanya:

let objArray = [ {a:1} , {b:2} ];

let refArray = objArray; // this will just point to the objArray
let clonedArray = [...objArray]; // will clone the array

console.log( "before:" );
console.log( "obj array" , objArray );
console.log( "ref array" , refArray );
console.log( "cloned array" , clonedArray );

objArray[0] = {c:3};

console.log( "after:" );
console.log( "obj array" , objArray ); // [ {c:3} , {b:2} ]
console.log( "ref array" , refArray ); // [ {c:3} , {b:2} ]
console.log( "cloned array" , clonedArray ); // [ {a:1} , {b:2} ]

Ini bekerja untuk saya:

var clonedArray = $.map(originalArray, function (obj) {
                      return $.extend({}, obj);
                  });

Dan jika Anda membutuhkan salinan objek dalam array:

var clonedArray = $.map(originalArray, function (obj) {
                      return $.extend(true, {}, obj);
                  });

$.evalJSON($.toJSON(origArray));

Peta akan membuat array baru dari yang lama (tanpa referensi ke yang lama) dan di dalam peta Anda membuat objek baru dan beralih ke properti (kunci) dan menetapkan nilai dari objek Array lama ke properti yang sesuai dengan objek baru.

Ini akan membuat array objek yang persis sama.

let newArray = oldArray.map(a => {
               let newObject = {};
               Object.keys(a).forEach(propertyKey => {
                    newObject[propertyKey] = a[propertyKey];
               });
               return newObject ;
});

Saya mungkin memiliki cara sederhana untuk melakukan ini tanpa harus melakukan rekursi yang menyakitkan dan tidak mengetahui semua detail objek yang dipertanyakan. Menggunakan jQuery, cukup konversikan objek Anda menjadi JSON menggunakan jQuery $.toJSON(myObjectArray), lalu ambil string JSON Anda dan evaluasi kembali ke suatu objek. BAM! Selesai, dan selesai! Masalah terpecahkan. :)

var oldObjArray = [{ Something: 'blah', Cool: true }];
var newObjArray = eval($.toJSON(oldObjArray));

Saya menjawab pertanyaan ini karena sepertinya tidak ada solusi yang sederhana dan eksplisit untuk masalah "kloning array objek dalam Javascript":

function deepCopy (arr) {
    var out = [];
    for (var i = 0, len = arr.length; i < len; i++) {
        var item = arr[i];
        var obj = {};
        for (var k in item) {
            obj[k] = item[k];
        }
        out.push(obj);
    }
    return out;
}

// test case

var original = [
    {'a' : 1},
    {'b' : 2}
    ];

var copy = deepCopy(original);

// change value in copy
copy[0]['a'] = 'not 1';

// original[0]['a'] still equals 1

Solusi ini mengulangi nilai-nilai array, kemudian mengulangi kunci objek, menyimpan yang terakhir ke objek baru, dan kemudian mendorong objek baru itu ke array baru.

Lihat jsfiddle . Catatan: sederhana .slice()atau [].concat()tidak cukup untuk objek dalam array.

Extend JQuery berfungsi dengan baik, hanya Anda perlu menentukan bahwa Anda mengkloning array daripada objek ( perhatikan [] alih-alih {} sebagai parameter ke metode extended ):

var clonedNodesArray = jQuery.extend([], nodesArray);

Metode ini sangat sederhana dan Anda dapat memodifikasi klon Anda tanpa mengubah array asli.

// Original Array
let array = [{name: 'Rafael'}, {name: 'Matheus'}];

// Cloning Array
let clone = array.map(a => {return {...a}})

// Editing the cloned array
clone[1].name = 'Carlos';


console.log('array', array)
// [{name: 'Rafael'}, {name: 'Matheus'}]

console.log('clone', clone)
// [{name: 'Rafael'}, {name: 'Carlos'}]

Seperti Daniel Lew sebutkan, grafik siklik memiliki beberapa masalah. Jika saya punya masalah ini saya akan menambahkan khususclone() metode ke objek bermasalah atau ingat objek yang sudah saya salin.

Saya akan melakukannya dengan variabel copyCountyang bertambah 1 setiap kali Anda menyalin kode Anda. Objek yang memiliki copyCountproses copy yang lebih rendah dari saat ini disalin. Jika tidak, salinan yang sudah ada harus dirujuk. Ini membuatnya perlu untuk menghubungkan dari aslinya ke salinannya.

Masih ada satu masalah: Memori. Jika Anda memiliki referensi ini dari satu objek ke objek lain, kemungkinan peramban tidak dapat membebaskan objek-objek tersebut, karena mereka selalu dirujuk dari suatu tempat. Anda harus membuat langkah kedua di mana Anda mengatur semua referensi-salinan ke Null. (Jika Anda melakukan ini, Anda tidak harus memiliki copyCounttetapi boolean isCopiedakan cukup, karena Anda dapat mengatur ulang nilai di pass kedua.)

Array.slice dapat digunakan untuk menyalin array atau bagian dari array .. http://www.devguru.com/Technologies/Ecmascript/Quickref/Slice.html Ini akan bekerja dengan string dan angka .. - mengubah string dalam satu array tidak akan mempengaruhi yang lain - tetapi objek masih hanya disalin oleh referensi sehingga perubahan ke objek yang direferensikan dalam satu array akan mempengaruhi array lainnya.

Berikut ini adalah contoh dari manajer undo JavaScript yang dapat bermanfaat untuk ini: http://www.ridgway.co.za/archive/2007/11/07/simple-javascript-undo-manager-for-dtos.aspx

Pendekatan saya:

var temp = { arr : originalArray };
var obj = $.extend(true, {}, temp);
return obj.arr;

memberi saya klon yang bagus, bersih, dalam dari array asli - dengan tidak ada objek yang dirujuk kembali ke aslinya :-)

lodash memiliki cloneDeepfungsi untuk tujuan ini:

var objects = [{ 'a': 1 }, { 'b': 2 }];
var deep = _.cloneDeep(objects);

Jika Anda ingin menerapkan klon dalam, gunakan JSON.parse (JSON.stringify ({} atau []) Anda)

const myObj ={
    a:1,
    b:2,
    b:3
}

const deepClone=JSON.parse(JSON.stringify(myObj));
deepClone.a =12;
console.log("deepClone-----"+myObj.a);
const withOutDeepClone=myObj;
withOutDeepClone.a =12;
console.log("withOutDeepClone----"+myObj.a);

forget eval () (adalah fitur JS yang paling banyak disalahgunakan dan membuat kodenya lambat) dan slice (0) (hanya berfungsi untuk tipe data sederhana)

Ini solusi terbaik bagi saya:

Object.prototype.clone = function() {
  var myObj = (this instanceof Array) ? [] : {};
  for (i in this) {
    if (i != 'clone') {
        if (this[i] && typeof this[i] == "object") {
          myObj[i] = this[i].clone();
        } else 
            myObj[i] = this[i];
        } 
    }
  return myObj;
};

Saya cukup frustrasi dengan masalah ini. Tampaknya masalah muncul ketika Anda mengirim Array umum ke metode $ .extend. Jadi, untuk memperbaikinya, saya menambahkan sedikit centang, dan berfungsi dengan baik dengan array umum, array jQuery, dan objek apa pun.

jQuery.extend({
    deepclone: function(objThing) {
        // return jQuery.extend(true, {}, objThing);
        /// Fix for arrays, without this, arrays passed in are returned as OBJECTS! WTF?!?!
        if ( jQuery.isArray(objThing) ) {
            return jQuery.makeArray( jQuery.deepclone($(objThing)) );
        }
        return jQuery.extend(true, {}, objThing);
    },
});

Meminta menggunakan:

var arrNewArrayClone = jQuery.deepclone(arrOriginalArray);
// Or more simply/commonly
var arrNewArrayClone = $.deepclone(arrOriginalArray);

Ini sangat menyalin array, objek, nilai null dan skalar lainnya, dan juga sangat menyalin setiap properti pada fungsi non-asli (yang sangat jarang tetapi mungkin). (Untuk efisiensi, kami tidak mencoba menyalin properti non-numerik pada array.)

function deepClone (item) {
  if (Array.isArray(item)) {
    var newArr = [];
    for (var i = item.length; i-- > 0;) {
      newArr[i] = deepClone(item[i]);
    }
    return newArr;
  }
  if (typeof item === 'function' && !(/\(\) \{ \[native/).test(item.toString())) {
    var obj;
    eval('obj = '+ item.toString());
    for (var k in item) {
      obj[k] = deepClone(item[k]);
    }
    return obj;
  }
  if (item && typeof item === 'object') {
    var obj = {};
    for (var k in item) {
      obj[k] = deepClone(item[k]);
    }
    return obj;
  }
  return item;
}

Saya menggunakan metode ECMAScript 6 Object.assign baru :

let oldObject = [1,3,5,"test"];
let newObject = Object.assign({}, oldObject);

argumen pertama dari metode ini adalah array yang akan diperbarui, kami melewatkan objek kosong karena kami ingin memiliki objek baru.

kita juga bisa menggunakan sintaks ini, yang sama tetapi lebih pendek:

let newObject = [...oldObject];

Kita dapat menemukan metode Array rekursif sederhana untuk mengkloning array multidimensi. Sementara objek dalam array bersarang tetap referensi ke objek yang sesuai dalam array sumber, array tidak akan.

Array.prototype.clone = function(){
  return this.map(e => Array.isArray(e) ? e.clone() : e);
};

var arr = [ 1, 2, 3, 4, [ 1, 2, [ 1, 2, 3 ], 4 , 5], 6 ],
    brr = arr.clone();
brr[4][2][1] = "two";
console.log(JSON.stringify(arr));
console.log(JSON.stringify(brr));

Dalam JavaScript, array dan salin objek mengubah nilai asal, jadi Salinan yang dalam adalah solusi untuk ini.

Salinan dalam berarti benar-benar membuat array baru dan menyalin nilai-nilai, karena apa pun yang terjadi padanya tidak akan pernah memengaruhi yang asli.

JSON.parsedan JSON.stringifymerupakan cara terbaik dan sederhana untuk menyalin. The JSON.stringify()Metode mualaf nilai JavaScript untuk JSON string.The JSON.parse()metode mem-parsing string JSON, membangun nilai JavaScript atau objek yang dijelaskan oleh string.

// Klon Dalam

let a = [{ x:{z:1} , y: 2}];
let b = JSON.parse(JSON.stringify(a));
b[0].x.z=0

console.log(JSON.stringify(a)); //[{"x":{"z":1},"y":2}]
console.log(JSON.stringify(b)); // [{"x":{"z":0},"y":2}]

Untuk lebih jelasnya: Baca Di Sini

dengan jQuery:

var target= [];
$.each(source, function() {target.push( $.extend({},this));});

Kode berikut akan melakukan penyalinan dalam objek dan array secara rekursif :

function deepCopy(obj) {
if (Object.prototype.toString.call(obj) === '[object Array]') {
    var out = [], i = 0, len = obj.length;
    for ( ; i < len; i++ ) {
        out[i] = arguments.callee(obj[i]);
    }
    return out;
}
if (typeof obj === 'object') {
    var out = {}, i;
    for ( i in obj ) {
        out[i] = arguments.callee(obj[i]);
    }
    return out;
}
return obj;
}

Sumber

Beberapa cara elegan untuk kloning dalam javascript

https://mootools.net/core/docs/1.6.0/Types/Object

https://scotch.io/bar-talk/copying-objects-in-javascript

1) Metode Javascript vanilla untuk kloning objek

2) Eksploitasi pintar dari pustaka JSON untuk objek klon-dalam

3) Menggunakan fungsi $ .extend () jQuery

4) Menggunakan fungsi klon () Mootools untuk mengkloning objek

Saya pikir berhasil menulis metode generik kloning mendalam setiap struktur JavaScript terutama menggunakan Object.createyang didukung di semua browser modern. Kodenya seperti ini:

function deepClone (item) {
  if (Array.isArray(item)) {
    var newArr = [];

    for (var i = item.length; i-- !== 0;) {
      newArr[i] = deepClone(item[i]);
    }

    return newArr;
  }
  else if (typeof item === 'function') {
    eval('var temp = '+ item.toString());
    return temp;
  }
  else if (typeof item === 'object')
    return Object.create(item);
  else
    return item;
}

Untuk mengkloning objek juga saya hanya akan menyarankan ECMAScript 6 reduce():

const newArray=myArray.reduce((array, element)=>array.push(Object.assign({}, element)), []);

Tapi terus terang saya lebih suka jawaban @dinodsaurus. Saya hanya menempatkan versi ini di sini sebagai opsi lain, tetapi secara pribadi saya akan menggunakan map()seperti yang disarankan oleh @dododsaurus.

Tergantung jika Anda memiliki Garis Bawah atau Babel di sini adalah Tolok Ukur dari berbagai cara kloning dalam array.

https://jsperf.com/object-rest-spread-vs-clone/2

Sepertinya babel adalah yang tercepat.

var x = babel({}, obj)

       var game_popularity = [
            { game: "fruit ninja", popularity: 78 },
            { game: "road runner", popularity: 20 },
            { game: "maze runner", popularity: 40 },
            { game: "ludo", popularity: 75 },
            { game: "temple runner", popularity: 86 }
        ];
        console.log("sorted original array before clonning");
        game_popularity.sort((a, b) => a.popularity < b.popularity);
        console.log(game_popularity);


        console.log("clone using object assign");
        const cl2 = game_popularity.map(a => Object.assign({}, a));
        cl2[1].game = "clash of titan";
        cl2.push({ game: "logan", popularity: 57 });
        console.log(cl2);


        //adding new array element doesnt reflect in original array
        console.log("clone using concat");
        var ph = []
        var cl = ph.concat(game_popularity);

        //copied by reference ?
        cl[0].game = "rise of civilization";

        game_popularity[0].game = 'ping me';
        cl.push({ game: "angry bird", popularity: 67 });
        console.log(cl);

        console.log("clone using ellipses");
        var cl3 = [...game_popularity];
        cl3.push({ game: "blue whale", popularity: 67 });
        cl3[2].game = "harry potter";
        console.log(cl3);

        console.log("clone using json.parse");
        var cl4 = JSON.parse(JSON.stringify(game_popularity));
        cl4.push({ game: "home alone", popularity: 87 });
        cl4[3].game ="lockhead martin";
        console.log(cl4);

        console.log("clone using Object.create");
        var cl5 = Array.from(Object.create(game_popularity));
        cl5.push({ game: "fish ville", popularity: 87 });
        cl5[3].game ="veto power";
        console.log(cl5);


        //array function
        console.log("sorted original array after clonning");
        game_popularity.sort((a, b) => a.popularity < b.popularity);
        console.log(game_popularity);


        console.log("Object.assign deep clone object array");
        console.log("json.parse deep clone object array");
        console.log("concat does not deep clone object array");
        console.log("ellipses does not deep clone object array");
        console.log("Object.create does not deep clone object array");


        Output:


        sorted original array before clonning
        [ { game: 'temple runner', popularity: 86 },
        { game: 'fruit ninja', popularity: 78 },
        { game: 'ludo', popularity: 75 },
        { game: 'maze runner', popularity: 40 },
        { game: 'road runner', popularity: 20 } ]
        clone using object assign
        [ { game: 'temple runner', popularity: 86 },
        { game: 'clash of titan', popularity: 78 },
        { game: 'ludo', popularity: 75 },
        { game: 'maze runner', popularity: 40 },
        { game: 'road runner', popularity: 20 },
        { game: 'logan', popularity: 57 } ]
        clone using concat
        [ { game: 'ping me', popularity: 86 },
        { game: 'fruit ninja', popularity: 78 },
        { game: 'ludo', popularity: 75 },
        { game: 'maze runner', popularity: 40 },
        { game: 'road runner', popularity: 20 },
        { game: 'angry bird', popularity: 67 } ]
        clone using ellipses
        [ { game: 'ping me', popularity: 86 },
        { game: 'fruit ninja', popularity: 78 },
        { game: 'harry potter', popularity: 75 },
        { game: 'maze runner', popularity: 40 },
        { game: 'road runner', popularity: 20 },
        { game: 'blue whale', popularity: 67 } ]
        clone using json.parse
        [ { game: 'ping me', popularity: 86 },
        { game: 'fruit ninja', popularity: 78 },
        { game: 'harry potter', popularity: 75 },
        { game: 'lockhead martin', popularity: 40 },
        { game: 'road runner', popularity: 20 },
        { game: 'home alone', popularity: 87 } ]
        clone using Object.create
        [ { game: 'ping me', popularity: 86 },
        { game: 'fruit ninja', popularity: 78 },
        { game: 'harry potter', popularity: 75 },
        { game: 'veto power', popularity: 40 },
        { game: 'road runner', popularity: 20 },
        { game: 'fish ville', popularity: 87 } ]
        sorted original array after clonning
        [ { game: 'ping me', popularity: 86 },
        { game: 'fruit ninja', popularity: 78 },
        { game: 'harry potter', popularity: 75 },
        { game: 'veto power', popularity: 40 },
        { game: 'road runner', popularity: 20 } ]

        Object.assign deep clone object array
        json.parse deep clone object array
        concat does not deep clone object array
        ellipses does not deep clone object array
        Object.create does not deep clone object array