Copiando un array de objetos en otro array en javascript

Siéntete libre de divulgar nuestra web y códigos con tus amigos, apóyanos para hacer crecer nuestra comunidad.

Solución:

El key las cosas aquí son

1. Las entradas en el array son objetos y
2. No desea modificaciones a un objeto en uno array aparecer en el otro array.

Eso significa que necesitamos no solo copiar los objetos a un nuevo array (o un objetivo array), sino también crear copias de los objetos

Si el destino array aun no existe…

…usar map para crear un nuevo arrayy copie los objetos sobre la marcha:

const newArray = sourceArray.map(obj => /*...create and return copy of `obj`...*/);

… donde la operación de copia es la forma que prefiera para copiar objetos, que varía enormemente de un proyecto a otro según el caso de uso. Ese tema se trata en profundidad en las respuestas a esta pregunta. Pero, por ejemplo, si solo desea copiar los objetos pero no los objetos a los que se refieren sus propiedades, puede usar la notación extendida (ES2015+):

const newArray = sourceArray.map(obj => (...obj));

Eso hace una copia superficial de cada objeto (y del array). Nuevamente, para copias profundas, vea las respuestas a la pregunta vinculada anteriormente.

Aquí hay un ejemplo que usa una forma ingenua de copia profunda que no intenta manejar casos extremos, vea esa pregunta vinculada para casos extremos:

function naiveDeepCopy(obj) 
    const newObj = ;
    for (const key of Object.getOwnPropertyNames(obj)) 
        const value = obj[key];
        if (value && typeof value === "object") 
            newObj[key] = ...value;
         else 
            newObj[key] = value;
        
    
    return newObj;

const sourceArray = [
    
        name: "joe",
        address: 
            line1: "1 Manor Road",
            line2: "Somewhere",
            city: "St Louis",
            state: "Missouri",
            country: "USA",
        ,
    ,
    
        name: "mohammed",
        address: 
            line1: "1 Kings Road",
            city: "London",
            country: "UK",
        ,
    ,
    
        name: "shu-yo",
    ,
];
const newArray = sourceArray.map(naiveDeepCopy);
// Modify the first one and its sub-object
newArray[0].name = newArray[0].name.toLocaleUpperCase();
newArray[0].address.country = "United States of America";
console.log("Original:", sourceArray);
console.log("Copy:", newArray);

.as-console-wrapper 
    max-height: 100% !important;

Si el destino array existe…

…y desea agregar el contenido de la fuente array para eso, puedes usar push y un bucle:

for (const obj of sourceArray) 
    destinationArray.push(copy(obj));

A veces, las personas realmente quieren una “una sola línea”, incluso si no hay una razón particular para ello. Si hace referencia a eso, podría crear un nuevo array y luego use la notación extendida para expandirlo en un solo push llamar:

destinationArray.push(...sourceArray.map(obj => copy(obj)));

Una manera fácil de hacer que esto funcione es usando:

var cloneArray = JSON.parse(JSON.stringify(originalArray));

tengo problemas para conseguir arr.concat() o arr.splice(0) para dar una copia profunda. El fragmento anterior funciona perfectamente.

Una gran manera de clonar un array es con un array literal y el sintaxis extendida. Esto es posible gracias a ES2015.

const objArray = [name:'first', name:'second', name:'third', name:'fourth'];

const clonedArr = [...objArray];

console.log(clonedArr) // [Object, Object, Object, Object]

Puede encontrar esta opción de copia en la documentación de MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#Copy_an_array

también es un de airbnb mejores prácticas. https://github.com/airbnb/javascript#es6-array-propagaciones

Nota: La sintaxis de propagación en ES2015 va un nivel más profundo al copiar un array. Por lo tanto, no son adecuados para copiar matrices multidimensionales.

Comentarios y calificaciones

Tienes la opción de animar nuestro análisis exponiendo un comentario y puntuándolo te damos la bienvenida.

---

---

Utiliza Nuestro Buscador