¿Cómo clonar una matriz de objetos en Javascript?

... donde cada objeto también tiene referencias a otros objetos dentro de la misma matriz?

Cuando se me ocurrió este problema, pensé en algo como

var clonedNodesArray = nodesArray.clone()

existiría y buscó información sobre cómo clonar objetos en javascript. Encontré una pregunta en StackOverflow (respondida por el mismo @JohnResig) y señaló que con jQuery podrías hacer

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

para clonar un objeto. Sin embargo, probé esto, esto solo copia las referencias de los objetos en la matriz. Entonces si yo

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

el valor de ambos nodeArray [0] y clonedNodesArray [0] resultará ser "verde". Entonces intenté

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

que copia en profundidad un objeto, pero recibí mensajes de " demasiada recursividad " y " desbordamiento de la pila de control " de Firebug y Opera Dragonfly respectivamente.

¿Como lo harias? ¿Es esto algo que ni siquiera debería hacerse? ¿Hay alguna forma reutilizable de hacer esto en Javascript?

El problema con su copia superficial es que todos los objetos no están clonados. Si bien las referencias a cada objeto son únicas en cada matriz, una vez que finalmente lo agarras, estás lidiando con el mismo objeto que antes. No hay nada de malo en la forma en que lo clonó ... el mismo resultado ocurriría con Array.slice ().

La razón por la que su copia profunda tiene problemas es porque está terminando con referencias de objetos circulares. Profundo irá tan profundo como sea posible, y si tienes un círculo, continuará infinitamente hasta que el navegador se desmaye.

Si la estructura de datos no puede representarse como un gráfico acíclico dirigido, entonces no estoy seguro de que pueda encontrar un método universal para la clonación profunda. Los gráficos cíclicos brindan muchos casos difíciles, y como no es una operación común, dudo que alguien haya escrito una solución completa (si es posible, ¡podría no serlo! Pero no tengo tiempo para intentar escribir una prueba rigurosa ahora). Encontré algunos buenos comentarios sobre el tema en esta página .

Si necesita una copia profunda de una matriz de objetos con referencias circulares, creo que tendrá que codificar su propio método para manejar su estructura de datos especializada, de modo que sea un clon de varias pasadas:

1. En la primera ronda, haga un clon de todos los objetos que no hagan referencia a otros objetos en la matriz. Mantenga un registro de los orígenes de cada objeto.
2. En la segunda ronda, vincula los objetos.

Siempre que sus objetos contengan contenido serializable JSON (sin funciones, no Number.POSITIVE_INFINITY, etc.) no es necesario que ningún bucle clone matrices u objetos. Aquí hay una solución pura de una línea de vainilla.

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

Para resumir los comentarios a continuación, la principal ventaja de este enfoque es que también clona el contenido de la matriz, no solo la matriz misma. Las desventajas principales son su límite de trabajar solo en contenido serializable JSON, y su rendimiento (que es significativamente peor que un sliceenfoque basado).

Resolví la clonación de una matriz de objetos con Object.assign

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

o incluso más corto con sintaxis extendida

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

Si todo lo que necesita es una copia superficial, una forma realmente fácil es:

new_array = old_array.slice(0);

La mejor y más actualizada forma de hacer este clon es la siguiente:

Uso del ...operador de propagación ES6.

Aquí está el ejemplo más simple:

var clonedObjArray = [...oldObjArray];

De esta forma, distribuimos la matriz en valores individuales y la colocamos en una nueva matriz con el operador [].

Aquí hay un ejemplo más extenso que muestra las diferentes formas en que funciona:

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

Esto funciona para mi:

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

Y si necesita una copia profunda de los objetos en la matriz:

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

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

El mapa creará una nueva matriz a partir de la anterior (sin referencia a la anterior) y dentro del mapa creará un nuevo objeto e iterará sobre las propiedades (claves) y asignará valores del antiguo objeto de matriz a las propiedades correspondientes al nuevo objeto.

Esto creará exactamente la misma matriz de objetos.

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

Puedo tener una manera simple de hacer esto sin tener que hacer una dolorosa recursión y sin conocer todos los detalles más finos del objeto en cuestión. Usando jQuery, simplemente convierta su objeto a JSON usando jQuery $.toJSON(myObjectArray), luego tome su cadena JSON y evalúela nuevamente en un objeto. BAM! ¡Hecho y hecho! Problema resuelto. :)

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

Estoy respondiendo esta pregunta porque no parece haber una solución simple y explícita al problema de "clonar una matriz de objetos en 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

Esta solución itera los valores de la matriz, luego itera las claves del objeto, guarda la última en un nuevo objeto y luego empuja ese nuevo objeto a una nueva matriz.

Ver jsfiddle . Nota: un simple .slice()o [].concat()no es suficiente para los objetos dentro de la matriz.

JQuery extend está funcionando bien, solo necesita especificar que está clonando una matriz en lugar de un objeto ( observe el [] en lugar de {} como parámetro para el método extendido ):

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

Este método es muy simple y puede modificar su clon sin modificar la matriz original.

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

Como mencionó Daniel Lew, los gráficos cíclicos tienen algunos problemas. Si tuviera este problema, agregaría clone()métodos especiales a los objetos problemáticos o recordaría qué objetos ya he copiado.

Lo haría con una variable copyCountque aumenta en 1 cada vez que copie su código. Se copyCountcopia un objeto que tiene un proceso de copia inferior al actual. De lo contrario, se debe hacer referencia a la copia que ya existe. Esto hace que sea necesario vincular desde el original a su copia.

Todavía hay un problema: la memoria. Si tiene esta referencia de un objeto a otro, es probable que el navegador no pueda liberar esos objetos, ya que siempre se hace referencia desde algún lugar. Tendría que hacer un segundo pase donde establezca todas las referencias de copia a Null. (Si hace esto, no tendría que tener un copyCountbooleano isCopied, pero sería suficiente, ya que puede restablecer el valor en la segunda pasada).

Array.slice se puede usar para copiar una matriz o parte de una matriz ... http://www.devguru.com/Technologies/Ecmascript/Quickref/Slice.html Esto funcionaría con cadenas y números ... - cambiando una cadena en una matriz no afectaría a la otra, pero los objetos solo se copian por referencia, por lo que los cambios a los objetos referenciados en una matriz afectarían a la otra matriz.

Aquí hay un ejemplo de un administrador de deshacer de JavaScript que podría ser útil para esto: http://www.ridgway.co.za/archive/2007/11/07/simple-javascript-undo-manager-for-dtos.aspx

Mi acercamiento:

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

me da un clon agradable, limpio y profundo de la matriz original, sin que ninguno de los objetos haga referencia al original :-)

Lodash tiene una cloneDeepfunción para este propósito:

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

Si desea implementar un clon profundo, use JSON.parse (JSON.stringify (su {} 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);

olvide eval () (es la característica más mal utilizada de JS y hace que el código sea lento) y slice (0) (funciona solo para tipos de datos simples)

Esta es la mejor solución para mí:

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

Estaba bastante frustrado por este problema. Aparentemente, el problema surge cuando envía una matriz genérica al método $ .extend. Entonces, para solucionarlo, agregué una pequeña comprobación, y funciona perfectamente con matrices genéricas, matrices jQuery y cualquier objeto.

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

Invocar usando:

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

Esto copia profundamente los arrays, objetos, valores nulos y otros valores escalares, y también copia profundamente cualquier propiedad en funciones no nativas (lo cual es bastante poco común pero posible). (Para mayor eficiencia, no intentamos copiar propiedades no numéricas en las matrices).

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 el nuevo método ECMAScript 6 Object.assign :

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

El primer argumento de este método es la matriz que se actualizará, pasamos un objeto vacío porque queremos tener un nuevo objeto.

También podemos usar esta sintaxis, que es la misma pero más corta:

let newObject = [...oldObject];

Podemos inventar un método de matriz recursiva simple para clonar matrices multidimensionales. Si bien los objetos dentro de las matrices anidadas mantienen su referencia a los objetos correspondientes en la matriz fuente, las matrices no lo harán.

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

En JavaScript, la copia de matriz y objeto cambia los valores de origen, por lo que la copia profunda es la solución para esto.

Una copia profunda significa en realidad crear una nueva matriz y copiar sobre los valores, ya que pase lo que pase nunca afectará al origen.

JSON.parsey JSON.stringifyes la mejor y más simple forma de copiar en profundidad. El JSON.stringify()método convierte un valor de JavaScript en una cadena JSON. El JSON.parse()método analiza una cadena JSON, construyendo el valor de JavaScript u objeto descrito por la cadena.

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

Para más detalles: lea aquí

con jQuery:

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

El siguiente código realizará una copia recursiva profunda de los objetos y la matriz :

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

Fuente

Algunas formas elegantes para la clonación profunda en javascript

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

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

1) Un método Javascript vainilla para clonar objetos

2) Una explotación inteligente de la biblioteca JSON para clonar objetos en profundidad

3) Uso de la función $ .extend () de jQuery

4) Uso de la función clonar () de Mootools para clonar objetos

Creo que logró escribir un método genérico de clonación profunda de cualquier estructura de JavaScript, principalmente, Object.createque es compatible con todos los navegadores modernos. El código es así:

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

Para clonar los objetos también, solo iba a sugerir ECMAScript 6 reduce():

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

Pero, francamente, me gusta aún más la respuesta de @dinodsaurus. Solo estoy poniendo esta versión aquí como otra opción, pero personalmente la map()usaré como lo sugiere @dinodsaurus.

Dependiendo de si tiene Underscore o Babel, aquí hay un Benchmark de la forma diferente de clonar profundamente una matriz.

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

Parece que Babel es el más rápido.

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