Come si clona una matrice di oggetti in Javascript?

... dove ogni oggetto ha anche riferimenti ad altri oggetti all'interno dello stesso array?

Quando ho scoperto per la prima volta questo problema, ho pensato a qualcosa di simile

var clonedNodesArray = nodesArray.clone()

sarebbe esistito e cercato informazioni su come clonare oggetti in javascript. Ho trovato una domanda su StackOverflow (risposta dello stesso @JohnResig) e mi ha fatto notare che con jQuery si poteva fare

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

per clonare un oggetto. Ho provato questo però, questo copia solo i riferimenti degli oggetti nella matrice. Quindi se io

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

il valore di entrambi nodesArray [0] e clonedNodesArray [0] risulterà essere "verde". Poi ho provato

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

quale copia profonda di un oggetto, ma ho ricevuto messaggi " troppa ricorsione " e " overflow dello stack di controllo " rispettivamente da Firebug e Opera Dragonfly.

Come lo faresti? È qualcosa che non dovrebbe nemmeno essere fatto? Esiste un modo riutilizzabile per farlo in Javascript?

Il problema con la tua copia superficiale è che tutti gli oggetti non vengono clonati. Mentre i riferimenti a ciascun oggetto sono univoci in ciascun array, una volta che lo si prende alla fine si ha a che fare con lo stesso oggetto di prima. Non c'è niente di sbagliato nel modo in cui lo hai clonato ... lo stesso risultato si verificherebbe usando Array.slice ().

Il motivo per cui la copia in profondità sta avendo problemi è perché stai finendo con riferimenti a oggetti circolari. Deep andrà il più in profondità possibile e, se hai un cerchio, continuerà all'infinito finché il browser non svanirà.

Se la struttura dei dati non può essere rappresentata come un grafico aciclico diretto, non sono sicuro che riuscirai a trovare un metodo universale per la clonazione profonda. I grafici ciclici forniscono molti casi angolari difficili e, dal momento che non è un'operazione comune, dubito che qualcuno abbia scritto una soluzione completa (se è possibile, potrebbe non esserlo! Ma non ho tempo di provare a scrivere una prova rigorosa ora). Ho trovato alcuni buoni commenti sul problema in questa pagina .

Se hai bisogno di una copia approfondita di una matrice di oggetti con riferimenti circolari credo che dovrai codificare il tuo metodo per gestire la tua struttura di dati specializzata, in modo che sia un clone a più passaggi:

1. Sul primo round, crea un clone di tutti gli oggetti che non fanno riferimento ad altri oggetti nella matrice. Tieni traccia delle origini di ogni oggetto.
2. Al secondo round, collega gli oggetti insieme.

Fintanto che i tuoi oggetti contengono contenuto serializzabile JSON (nessuna funzione, no Number.POSITIVE_INFINITY, ecc.) Non è necessario alcun loop per clonare matrici o oggetti. Ecco una soluzione di una sola linea alla vaniglia.

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

Per riassumere i commenti di seguito, il vantaggio principale di questo approccio è che clona anche il contenuto dell'array, non solo l'array stesso. Gli svantaggi principali sono il suo limite di lavorare solo su contenuti serializzabili JSON e le sue prestazioni (che è significativamente peggiore di un sliceapproccio basato).

Ho risolto la clonazione di una matrice di oggetti con Object.assign

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

o anche più breve con la sintassi diffusa

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

Se tutto ciò che serve è una copia superficiale, un modo davvero semplice è:

new_array = old_array.slice(0);

Il modo migliore e più aggiornato per eseguire questo clone è il seguente:

Utilizzo ...dell'operatore spread ES6.

Ecco l'esempio più semplice:

var clonedObjArray = [...oldObjArray];

In questo modo diffondiamo l'array in singoli valori e lo inseriamo in un nuovo array con l'operatore [].

Ecco un esempio più lungo che mostra i diversi modi in cui funziona:

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} ]

Questo funziona per me:

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

E se hai bisogno di una copia approfondita degli oggetti nell'array:

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

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

Mappa creerà un nuovo array dal vecchio (senza riferimento a quello vecchio) e all'interno della mappa creerai un nuovo oggetto e ripeterai le proprietà (chiavi) e assegnerai i valori dal vecchio oggetto Array alle proprietà corrispondenti al nuovo oggetto.

Questo creerà esattamente lo stesso array di oggetti.

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

Potrei avere un modo semplice per farlo senza dover ricorrere a dolorose ricorsioni e senza conoscere tutti i dettagli più fini dell'oggetto in questione. Utilizzando jQuery, è sufficiente convertire l'oggetto in JSON utilizzando jQuery $.toJSON(myObjectArray), quindi prendere la stringa JSON e valutarla nuovamente in un oggetto. BAM! Fatto e fatto! Problema risolto. :)

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

Sto rispondendo a questa domanda perché non sembra esserci una soluzione semplice ed esplicita al problema di "clonare una matrice di oggetti in 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

Questa soluzione esegue l'iterazione dei valori dell'array, quindi l'iterazione delle chiavi dell'oggetto, salvando quest'ultimo in un nuovo oggetto e quindi spingendo quel nuovo oggetto in un nuovo array.

Vedi jsfiddle . Nota: un semplice .slice()o [].concat()non è abbastanza per gli oggetti all'interno dell'array.

JQuery extender funziona bene, devi solo specificare che stai clonando un array piuttosto che un oggetto ( nota il [] invece di {} come parametro per il metodo extender ):

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

Questo metodo è molto semplice ed è possibile modificare il clone senza modificare l'array originale.

// 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'}]

Come ha detto Daniel Lew, i grafici ciclici presentano alcuni problemi. Se avessi questo problema o aggiungerei specialeclone() metodi agli oggetti problematici o ricorderei quali oggetti ho già copiato.

Lo farei con una variabile copyCountche aumenta di 1 ogni volta che copi il tuo codice. Un oggetto che ha un valore inferiorecopyCount copiato processo di copia a quello corrente. In caso contrario, è necessario fare riferimento alla copia già esistente. Ciò rende necessario il collegamento dall'originale alla sua copia.

C'è ancora un problema: memoria. Se hai questo riferimento da un oggetto all'altro, è probabile che il browser non riesca a liberare quegli oggetti, poiché sono sempre citati da qualche parte. Dovresti fare un secondo passaggio dove imposti tutti i riferimenti di copia su Null. (Se lo fai, non dovresti avere un copyCountma un valore booleano isCopiedsarebbe sufficiente, poiché puoi reimpostare il valore nel secondo passaggio.)

Array.slice può essere utilizzato per copiare un array o parte di un array. Http://www.devguru.com/Technologies/Ecmascript/Quickref/Slice.html con stringhe e numeri .. - cambiando una stringa in un array non influirebbe sull'altro - ma gli oggetti vengono comunque copiati solo per riferimento, quindi le modifiche agli oggetti referenziati in un array avrebbero un effetto sull'altro array.

Ecco un esempio di un gestore di annullamento JavaScript che potrebbe essere utile per questo: http://www.ridgway.co.za/archive/2007/11/07/simple-javascript-undo-manager-for-dtos.aspx

Il mio approccio:

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

mi dà un clone bello, pulito, profondo dell'array originale - senza nessuno degli oggetti a cui fa riferimento l'originale :-)

lodash ha una cloneDeepfunzione a questo scopo:

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

Se vuoi implementare il clone profondo usa JSON.parse (JSON.stringify (il tuo {} o []))

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);

dimenticare eval () (è la funzione più abusata di JS e rallenta il codice) e slice (0) (funziona solo per tipi di dati semplici)

Questa è la soluzione migliore per me:

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;
};

Ero piuttosto frustrato da questo problema. Apparentemente il problema sorge quando si invia un array generico al metodo $ .extend. Quindi, per risolverlo, ho aggiunto un piccolo controllo e funziona perfettamente con array generici, array jQuery e qualsiasi oggetto.

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);
    },
});

Richiamare usando:

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

Questo copia profondamente matrici, oggetti, valori null e altri valori scalari, e copia profondamente anche qualsiasi proprietà su funzioni non native (il che è abbastanza raro ma possibile). (Per motivi di efficienza, non tentiamo di copiare proprietà non numeriche sugli 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;
}

Uso il nuovo metodo Object.assign ECMAScript 6 :

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

il primo argomento di questo metodo è l'array da aggiornare, passiamo un oggetto vuoto perché vogliamo avere un nuovo oggetto.

possiamo anche usare questa sintassi, che è la stessa ma più breve:

let newObject = [...oldObject];

Possiamo inventare un semplice metodo ricorsivo di array per clonare array multidimensionali. Mentre gli oggetti all'interno degli array nidificati mantengono il loro riferimento agli oggetti corrispondenti nell'array di origine, gli array non lo faranno.

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));

In JavaScript, la copia di array e oggetti modifica i valori di origine, quindi Deep copy è la soluzione per questo.

Una copia profonda significa in realtà creare un nuovo array e copiare i valori, poiché qualunque cosa accada non influirà mai su quello di origine.

JSON.parseed JSON.stringifyè il modo migliore e semplice per copiare Deep. Il JSON.stringify()metodo converte un valore JavaScript in una stringa JSON. Il JSON.parse()metodo analizza una stringa JSON, costruendo il valore JavaScript o l'oggetto descritto dalla stringa.

// Deep Clone

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}]

Per maggiori dettagli: leggi qui

con jQuery:

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

Il codice seguente eseguirà ricorsivamente una copia approfondita di oggetti e array :

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;
}

fonte

Alcuni modi eleganti per la clonazione profonda in javascript

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

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

1) Un metodo Javascript vaniglia per la clonazione di oggetti

2) Un exploit intelligente della libreria JSON per clonare oggetti in profondità

3) Utilizzo della funzione $ .extend () di jQuery

4) Utilizzo della funzione clone () di Mootools per clonare oggetti

Penso che sia riuscito a scrivere un metodo generico per la clonazione profonda di qualsiasi struttura JavaScript principalmente utilizzata, Object.createsupportata in tutti i browser moderni. Il codice è così:

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;
}

Per clonare anche gli oggetti, stavo solo per suggerire ECMAScript 6 reduce():

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

Ma francamente mi piace ancora di più la risposta di @dinodsaurus. Sto solo mettendo questa versione qui come un'altra opzione, ma personalmente userò map()come suggerito da @dinodsaurus.

A seconda che tu abbia Underscore o Babel ecco un benchmark del diverso modo di clonare in profondità un array.

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

Sembra che Babel sia il più veloce.

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