JavaScript - copier un tableau d'objets et apporter des modifications sans modifier le tableau original

Question

J'ai un tableau d'objets. Je voudrais copier en profondeur le tableau d'objets et apporter quelques modifications à chaque objet. Je veux le faire sans modifier le tableau original ou les objets originaux qui étaient dans ce tableau.

C'est ainsi que je l'ai fait. Cependant, étant nouveau pour JavaScript, je veux m'assurer que c'est une bonne approche.

Y a-t-il une meilleure façon de procéder?

const users = 
[ 
    { 
     id  : 1,  
     name  : 'Jack', 
     approved : false 
    }, 
    { 
     id  : 2,  
     name  : 'Bill', 
     approved : true 
    }, 
    { 
     id  : 3,  
     name  : 'Rick', 
     approved : false 
    }, 
    { 
     id  : 4,  
     name  : 'Rick', 
     approved : true 
    } 
]; 


const users2 = 
    users 
     .map(
      (u) => 
      { 
       return Object.assign({}, u); 
      } 
     )  
     .map(
      (u) => 
      { 
       u.approved = true; 
       return u; 
      } 
     );  


console.log('New users2 array of objects:') 
console.log(users2); 

console.log('This was original users array is untouched:') 
console.log(users); 

Sortie:

New users2 array of objects: 
[ { id: 1, name: 'Jack', approved: true }, 
    { id: 2, name: 'Bill', approved: true }, 
    { id: 3, name: 'Rick', approved: true }, 
    { id: 4, name: 'Rick', approved: true } ] 
This was original users array is untouched: 
[ { id: 1, name: 'Jack', approved: false }, 
    { id: 2, name: 'Bill', approved: true }, 
    { id: 3, name: 'Rick', approved: false }, 
    { id: 4, name: 'Rick', approved: true } ] 

Answer 1

Oui qui ressemble bien. Vous pouvez également effectuer la modification lorsque vous clonez, afin d'éviter le mappage sur le tableau deux fois.

const users2 = users.map((u) => { 
    const copiedUser = Object.assign({}, u); 
    copiedUser.approved = true; 
    return copiedUser; 
}); 

Answer 2

Pour un seul passage, vous pouvez également utiliser Object.assign avec la propriété modifiée.

const users = [{ id: 1, name: 'Jack', approved: false }, { id: 2, name: 'Bill', approved: true }, { id: 3, name: 'Rick', approved: false }, { id: 4, name: 'Rick', approved: true }]; 
 
const users2 = users.map(u => Object.assign({}, u, { approved: true })); 
 

 
console.log(users2); 
 
console.log(users);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Il y a quelques façons de copier un tableau en javascript, je croyais que les plus utilisés sont:

• tranche()
• Array. à partir de()

La fonction de coupe retourne une partie (ou la totalité du contenu) d'une rangée donnée comme une nouvelle matrice, par rapport à une commence et l'indice fin (début et l'indice d'extrémité sont en option):

const a = [1,2,3,4,5,6,7,8,9] 
 
/* 
 
* Only begin index 
 
*/ 
 
const b = a.slice(2) 
 
console.log(b) //Will Print [3,4,5,6,7,8,9] 
 
/* 
 
* Begin index and end index 
 
*/ 
 
const c = a.slice(5,8) 
 
console.log(c) //Will Print [6,7,8] 
 
/* 
 
* No indexes provided 
 
*/ 
 
const d = a.slice() 
 
console.log(d) //Will print [1,2,3,4,5,6,7,8,9]

Array.from() est une fonction qui va créer un nouveau tableau à partir de paramètres de type tableau ou itérable.

const a = Array.from('bar'); 
 
console.log(a) //Will Print ["b","a","r"] 
 
const b = ["for","bar"]; 
 
const c = Array.from(b); 
 
console.log(c) //Will print ["for","bar"]

More about slice

More about Array.from()