Articles

#ES6 Façon de cloner un tableau

Lorsque nous avons besoin de copier un tableau, nous avons souvent utilisé slice. Mais avec ES6, vous pouvez également utiliser l’opérateur de propagation pour dupliquer un tableau. Assez astucieux, non right

const sheeps = ;// Old wayconst cloneSheeps = sheeps.slice();// ES6 wayconst cloneSheepsES6 = ;

# Pourquoi ne puis-je pas Utiliser = pour copier un tableau?

Parce que les tableaux dans JS sont des valeurs de référence, donc lorsque vous essayez de le copier en utilisant le = il ne copiera que la référence au tableau d’origine et non la valeur du tableau. Pour créer une copie réelle d’un tableau, vous devez copier la valeur du tableau sous une nouvelle variable de valeur. De cette façon, ce nouveau tableau ne fait pas référence à l’ancienne adresse du tableau en mémoire.

const sheeps = ;const fakeSheeps = sheeps;const cloneSheeps = ;console.log(sheeps === fakeSheeps);// true --> it's pointing to the same memory spaceconsole.log(sheeps === cloneSheeps);// false --> it's pointing to a new memory space

# Problème avec les valeurs de référence

Si vous avez déjà eu affaire à Redux ou à un cadre de gestion d’état. Vous saurez que l’immuabilité est très importante. Permettez-moi de vous expliquer brièvement. Un objet immuable est un objet dont l’état ne peut pas être modifié après sa création. Le problème avec JavaScript est que arrays sont mutables. Cela peut donc arriver:

const sheeps = ;const sheeps2 = sheeps;sheeps2.push('🐺');console.log(sheeps2);// // Ahhh 😱 , our original sheeps have changed?!console.log(sheeps);// 

C’est pourquoi nous devons cloner un tableau:

const sheeps = ;const sheeps2 = ;// Let's change our sheeps2 arraysheeps2.push('🐺');console.log(sheeps2);// // ✅ Yay, our original sheeps is not affected!console.log(sheeps);// 

# Types de données mutables vs Immuables

Mutable:

  • objet
  • tableau
  • function

Immuable :

Toutes les primitives sont immuables.

  • chaîne
  • nombre
  • booléen
  • null
  • non défini
  • symbole

# Copie superficielle uniquement

Veuillez noter que spread ne va qu’à un niveau de profondeur lors de la copie d’un tableau. Donc, si vous essayez de copier des tableaux multidimensionnels, vous devrez utiliser d’autres alternatives.

const nums = , ];const cloneNums = ;// Let's change the first item in the first nested item in our cloned array.cloneNums = '👻';console.log(cloneNums);// , , ]// NOOooo, the original is also affectedconsole.log(nums);// , , ]

Here Voici une chose intéressante que j’ai apprise. Copie superficielle signifie que le premier niveau est copié, les niveaux plus profonds sont référencés.

# Entrée de la communauté

# Tableau.de est une autre Façon de cloner un tableau

const sheeps = ;const cloneSheeps = Array.from(sheeps);

_ Merci: @hakankaraduman_

  • _ @hakankaraduman :_ oui, j’essaie de ne pas utiliser de spread, ça me confond en lisant le code car il fait deux choses, la propagation ou la collecte en fonction du contexte

  • CJ J: Je pense que le meilleur moyen est celui qui correspond le mieux à la sémantique de l’opération. Je préfère utiliser Array.from