1

Hola como están? No estoy pudiendo solucionar lo siguiente... El problema surge al querer aplicar en Javascript los métodos .pop() o .shift() a la copia de un arreglo de arreglos. Siempre termina modificando el arrego original y su copia. Probé con map(), [...], slice() sin éxito. Cualquier cambio en el arreglo copia modifica el original. Preciso que el arreglo original se mantenga sin cambios. Ojalá alguien pueda darme una manito. Muchas gracias!

let a = [[1, 2, 3], [4, 5, 6]];
b(a);


function b(a) {
    let c = [...a];
    c[0].pop();
    c[1].shift();
    console.log(a); // [ [ 1, 2 ], [ 5, 6 ] ]
    console.log(c); // [ [ 1, 2 ], [ 5, 6 ] ]
}

4 respuestas 4

0

En JavaScript siempre se va a modificar el array original a menos que crees otro array. Ejemplo:

const array_1 = [0,1,2];

const array_2 = array_1;// <-- Todo lo que hagamos sobre array_2 afecatará a array_1

No es un concepto muy intuitivo, pero en JavaScript existe una diferencia entre los objetos mismos y las referencias a dichos objetos.

slice() efectivamente retorna otro array, pero lo que hace es un "shallow copy" osea una copia "superficial", un solo nivel. Ejemplo:

const a = [0,1,[200,300,400]];

const b = a.slice();

b[0] = 100; // <-- cambia solo b porque hizo un clon
b[2][0] = "cambio"; // <-- cambia tambien a!! porque hizo un clon SUPERFICIAL

console.log(a);
console.log(b);

Si tenemos mas niveles, se van a copiar las referencias, es decir no van a ser otros objetos, van a ser las referencias a los objetos anidados originales.

Hasta donde conozco aún no existe una forma nativa que realice una copia profunda, existe una forma que tiene bastantes limitaciones pero va a funcionar en muchos casos:

const a = [0,1,[200,300,400]];

const b = JSON.parse(JSON.stringify(a));

b[0] = 100; // <-- cambia solo b porque hizo un clon
b[2][0] = "cambio"; // <-- solo b

console.log(a);
console.log(b);

Las limitaciones van a ser las limitaciones que tiene un JSON, ejemplo:

const a = [0, 1, [200, 300, undefined, () => "algo"]];

const b = JSON.parse(JSON.stringify(a));

console.log(a);
console.log(b);// <-- No es una copia fiel

1
  • Gracias Emeeus! Magistral lo suyo. Saludos!
    – Leonardo
    Commented el 10 nov. 2021 a las 13:16
0

El problema es que estas referenciando el array1 (a) sobre el array2 (b). Lo que debes hacer es clonarlo (algo como: let c = []; c = JSON.parse(JSON.stringify(a));). Revisa: https://www.etnassoft.com/2013/10/15/copiando-arrays-y-objetos-en-javascript/

3
  • Gracias por responder! Ahi cambié el código para mostrarte que no funciona con [...]. Solo funciona si utilizas arrays simples. Saludos!
    – Leonardo
    Commented el 10 nov. 2021 a las 12:40
  • La solución más sencilla es hacer un deep copy como especifica el articulo que te adjunte. Con el siguiente código lo solucionarías: let c = []; c = JSON.parse(JSON.stringify(a));
    – JuanG
    Commented el 10 nov. 2021 a las 12:51
  • Excelente Juan! Funciona perfecto. Muchas gracias!
    – Leonardo
    Commented el 10 nov. 2021 a las 13:13
0

El problema radica en que existen dos tipos de memorias en donde se almacenan las variables dentro de JavaScript. Existe el memory heap y el stack, dentro de la primera, se almacenan todas las variables de tipo primitivo (Numbers, Strings, Booleans, etc.) pero, en el stack se almacenan las variables no primitivas como los Objects y Arrays.

Como te comenté, en la memory heap no se almacenan los tipos de datos no primitivos como tal pero, si se almacenan su referencia a la memoria stack, es decir, imagina que cada casilla en la que se almacenan los objetos y arrays tiene su propio id y en la memory heap se almacena ese id (que sería la referencia) para saber en qué casilla se encuentra en la memoria stack.

Una vez que hayas entendido esto, te darás cuenta que con el spread operator o los tres puntos seguidos [...a], lo que haces es copiar la referencia a la memoria stack de ese array y no el array como tal, por lo tanto al modificar la copia, también modificas el original ya que ambos apuntan a la misma referencia, a eso se le llama shallow copy. Existe otra técnica llamada deep copy que funciona con recursividad y cuando tengas un poco más de experiencia, te recomiendo que te interiorices un poco más en ello ya que es la mejor manera de copiar objetos y arrays pero, para no complicarte tanto lo que podrías hacer es lo siguiente.

Para poder solucionar tu problema, te recomiendo simplemente convertir primeramente a un string el array que quiere copiar y luego volver a convertirlo a un Array, te dejo abajo la solución.

let a = [[1, 2, 3], [4, 5, 6]];
b(a);

function b(a) {
    let c = JSON.stringify(a);
    let d = JSON.parse(c)
    d[0].pop();
    d[1].shift();
    console.log(a); // [ [ 1, 2, 3 ], [ 4, 5, 6 ] ]
    console.log(d); // [ [ 1, 2 ], [ 5, 6 ] ]
}
1
  • Claro y simple. Excelente manera de resolverlo. Muchas gracias!
    – Leonardo
    Commented el 10 nov. 2021 a las 13:51
0

slice()--> copia las referencias al original con lo cual puede modificarse el original al modificar la copia la forma de modificar al nuevo array sin modificar el original pueden ser estas cada una tiene limitaciones

let a = [[1, 2, 3], [4, 5, 6]];
        b(a);
        
        
        function b(a:number[][]) {
        // una forma si no hay objetos profundos que contenga 
    
        let c = a.map(b => [...b])
    
        // otra forma deep clone solo valida para JSON types 
        // pero no funciona si contiene 
// Dates, functions, undefined, Infinity, RegExps, Maps, Sets, Blobs, //FileLists, ImageDatas, sparse Arrays, arrays de tipos complejos
    
        let c2 = JSON.parse(JSON.stringify(c))
    
    // otra forma pero  no sirve para  multi-dimensional arrays
    // o objetos profundos
       let c3=Object.assign([[]],a)
    
            c[0].pop();
            c[1].shift();
            c2[0].pop();
            c2[1].shift();
            c3[0].pop();
            c3[1].shift();
        
            console.log('original',a); 
            console.log('spread map',c); 
             console.log('deep clone',c2); 
            console.log('Object.assign',c3);
        }
        /*
        [LOG]: "original",  [[1, 2, 3], [4, 5, 6]] 
        [LOG]: "spread map",  [[1, 2], [5, 6]] 
        [LOG]: "deep clone",  [[1, 2], [5, 6]]
        [LOG]: "Object.assign",  [[1, 2], [5, 6]] 
        
        */

para copias de objetos complejos usar libreria Lodash

var obj2 = _.cloneDeep(obj, true);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.