Créer un clone d’un tableau en texte dactylographié

Question

J'ai matrice de deux objets :

genericItems: Item[] = [];
backupData: Item[] = [];

Je suis le remplissage de mon tableau html avec genericItemsdonnées. La table est modifiable. Il y a un bouton de réinitialisation pour annuler toutes les modifications effectuées avec backUpData. Ce tableau est rempli par un service:

getGenericItems(selected: Item) {
this.itemService.getGenericItems(selected).subscribe(
  result => {
     this.genericItems = result;
  });
     this.backupData = this.genericItems.slice();
  }

Mon idée est que l'utilisateur changements seront reflétés dans le premier ensemble et le deuxième tableau peut être utilisé comme sauvegarde pour l'opération de réinitialisation. Le problème, je suis confronté ici est lorsque l'utilisateur modifie la table (genericItems[]) le deuxième tableau, backupData obtient également modifié. Comment est-ce qui se passe et comment éviter cela?

Answer 1

Essayez ceci :

Clone runez un array :

Cloner un objet :

Answer 2

Le clonage des Tableaux et des Objets en javascript ont une syntaxe différente. Tôt ou tard, tout le monde apprend la différence à la dure.

Dans Tapuscrit et ES6 vous pouvez utiliser la propagation de l'opérateur pour le tableau et l'objet:

const myClonedArray  = [...myArray];  // This is ok for [1,2,'test','bla']
                                      // But wont work for [{a:1}, {b:2}]. 
                                      // You need to do a deep copy.

Faire une copie d'un objet, vous avez besoin d'une bibliothèque externe:

import * as cloneDeep from 'lodash/cloneDeep';
const myClonedArray = cloneDeep(myArray);     // This works for [{a:1}, {b:2}]

La propagation de l'opérateur travaille sur l'objet, mais elle ne peut le faire une copie superficielle (première couche d'enfants)

const myShallowClonedObject = {...myObject};   // Will do a shallow copy
                                               // and cause you an un expected bug.

Faire une copie d'un objet, vous avez besoin d'une bibliothèque externe:

 import * as cloneDeep from 'lodash/cloneDeep';
 const deeplyClonedObject = cloneDeep(myObject);   // This works for [{a:{b:2}}]

Answer 3

À l’aide de la carte ou toute autre solution similaire n’aident pas à cloner profondément un tableau d’objet. Un moyen plus facile de faire ceci sans l’ajout d’une nouvelle bibliothèque est à l’aide de JSON.stringfy, puis JSON.parse.

En cas de vous, cela devrait fonctionner :

Answer 4

Essaye ça:

 [https://lodash.com/docs/4.17.4#clone][1]

var objects = [{ 'a': 1 }, { 'b': 2 }];

var shallow = _.clone(objects);
console.log(shallow[0] === objects[0]);
// => true
 

Answer 5

Code ci-dessous peut vous aider à copier le premier niveau des objets

let original = [{ a: 1 }, {b:1}]
const copy = [ ...original ].map(item=>({...item}))

donc, pour les cas ci-dessous, les valeurs restent intactes

copy[0].a = 23
console.log(original[0].a) //logs 1 -- value didn't change voila :)

Échoue pour ce cas

let original = [{ a: {b:2} }, {b:1}]
const copy = [ ...original ].map(item=>({...item}))
copy[0].a.b = 23;
console.log(original[0].a) //logs 23 -- lost the original one :(

---

Derniers conseils:

Je dirais allez-lodash cloneDeep API qui vous permet de copier les objets à l'intérieur des objets totalement déréférencement de celle d'origine est. Ce peut être installé en tant que module séparé.

Reportez-vous à la documentation: https://github.com/lodash/lodash

Emballage individuel : https://www.npmjs.com/package/lodash.clonedeep