Comment cloner un tableau en JavaScript

Utilisez # 8 pour la copie en profondeur!

JavaScript a beaucoup de façons de faire n'importe quoi. J’ai écrit sur 10 façons d’écrire / composer en JavaScript, et maintenant nous faisons des tableaux.

1. Opérateur de propagation (copie superficielle)

Depuis que l’ES6 a été abandonnée, c’est la méthode la plus populaire. C’est une syntaxe brève et elle vous semblera extrêmement utile lorsque vous utilisez des bibliothèques telles que React et Redux.

nombres = [1, 2, 3];
numbersCopy = [... nombres];

Remarque: ceci ne copie pas en toute sécurité des tableaux multidimensionnels. Les valeurs de tableau / objet sont copiées par référence au lieu de par valeur.

C'est bon

numbersCopy.push (4);
console.log (nombres, nombresCopie);
// [1, 2, 3] et [1, 2, 3, 4]
// les nombres sont laissés seuls

Ce n'est pas bien

nestedNumbers = [[1], [2]];
numbersCopy = [... nestedNumbers];
numbersCopy [0] .push (300);
console.log (nestedNumbers, numbersCopy);
// [[1, 300], [2]]
// [[1, 300], [2]]
// Ils ont tous deux été modifiés car ils partagent des références.

2. Bon vieux pour () boucle (copie peu profonde)

J'imagine que cette approche est la moins populaire, compte tenu de la façon dont la programmation fonctionnelle à la mode est devenue dans nos cercles.

Pur ou impur, déclaratif ou impératif, il fait le travail!

nombres = [1, 2, 3];
numbersCopy = [];
pour (i = 0; i 

Remarque: ceci ne copie pas en toute sécurité des tableaux multidimensionnels. Puisque vous utilisez l’opérateur =, il assignera des objets / des tableaux par référence plutôt que par valeur.

C'est bon

numbersCopy.push (4);
console.log (nombres, nombresCopie);
// [1, 2, 3] et [1, 2, 3, 4]
// les nombres sont laissés seuls

Ce n'est pas bien

nestedNumbers = [[1], [2]];
numbersCopy = [];
pour (i = 0; i 
numbersCopy [0] .push (300);
console.log (nestedNumbers, numbersCopy);
// [[1, 300], [2]]
// [[1, 300], [2]]
// Ils ont tous deux été modifiés car ils partagent des références.

3. Good Old while () Loop (Copie peu profonde)

Identique à - impur, impératif, bla, bla, bla… ça marche!

nombres = [1, 2, 3];
numbersCopy = [];
i = -1;
tandis que (++ i 

Remarque: Ceci affecte également les objets / tableaux par référence plutôt que par valeur.

C'est bon

numbersCopy.push (4);
console.log (nombres, nombresCopie);
// [1, 2, 3] et [1, 2, 3, 4]
// les nombres sont laissés seuls

Ce n'est pas bien

nestedNumbers = [[1], [2]];
numbersCopy = [];
i = -1;
while (++ i 
numbersCopy [0] .push (300);
console.log (nestedNumbers, numbersCopy);
// [[1, 300], [2]]
// [[1, 300], [2]]
// Ils ont tous deux été modifiés car ils partagent des références.

4. Array.map (copie peu profonde)

De retour dans le territoire moderne, nous allons trouver la fonction de carte. Enracinée dans les mathématiques, la carte est le concept de la transformation d'un ensemble en un autre type d'ensemble, tout en préservant la structure.

En anglais, cela signifie que Array.map renvoie un tableau de la même longueur à chaque fois.

Pour doubler une liste de nombres, utilisez map avec une double fonction.

nombres = [1, 2, 3];
double = (x) => x * 2;
numbers.map (double);

Qu'en est-il du clonage ??

Certes, cet article concerne les tableaux de clonage. Pour dupliquer un tableau, renvoyez simplement l'élément dans votre appel de carte.

nombres = [1, 2, 3];
numbersCopy = numbers.map ((x) => x);

Si vous souhaitez être un peu plus mathématique, (x) => x est appelé identité. Il renvoie le paramètre qu’il a été donné.

map (identité) clone une liste.

identité = (x) => x;
numbers.map (identité);
// [1, 2, 3]

Remarque: Ceci affecte également les objets / tableaux par référence plutôt que par valeur.

5. Array.filter (copie peu profonde)

Cette fonction renvoie un tableau, tout comme map, mais sa longueur n’est pas garantie.

Que faire si vous filtrez pour des nombres pairs?

[1, 2, 3] .filter ((x) => x% 2 === 0)
// [2]

La longueur du tableau en entrée était de 3, mais la longueur résultante était de 1.

Si le prédicat de votre filtre renvoie toujours la valeur true, vous obtenez un doublon!

nombres = [1, 2, 3];
numbersCopy = numbers.filter (() => true);

Chaque élément réussit le test, il est donc renvoyé.

Remarque: Ceci affecte également les objets / tableaux par référence plutôt que par valeur.

6. Array.reduce (copie peu profonde)

Je me sens presque mal d’utiliser Réduire pour cloner un tableau, car il est beaucoup plus puissant que cela. Mais c'est parti…

nombres = [1, 2, 3];
numbersCopy = numbers.reduce ((newArray, element) => {
  newArray.push (element);
  retourne newArray;
}, []);

Réduire transforme une valeur initiale en boucle dans une liste.

Ici, la valeur initiale est un tableau vide et nous le remplissons avec chaque élément au fur et à mesure. Ce tableau doit être renvoyé à partir de la fonction à utiliser lors de la prochaine itération.

Remarque: Ceci affecte également les objets / tableaux par référence plutôt que par valeur.

7. Array.slice (copie peu profonde)

slice retourne une copie superficielle d'un tableau en fonction de l'index de début / fin fourni.

Si nous voulons les 3 premiers éléments:

[1, 2, 3, 4, 5] .lice (0, 3);
// [1, 2, 3]
// Commence à l'index 0, s'arrête à l'index 3

Si nous voulons tous les éléments, ne donnez aucun paramètre

nombres = [1, 2, 3, 4, 5];
numbersCopy = numbers.slice ();
// [1, 2, 3, 4, 5]

Remarque: Il s’agit d’une copie superficielle, elle assigne également les objets / tableaux par référence plutôt que par valeur.

8. JSON.parse et JSON.stringify (copie profonde)

JSON.stringify transforme un objet en chaîne.

JSON.parse transforme une chaîne en objet.

Leur combinaison peut transformer un objet en chaîne, puis inverser le processus pour créer une nouvelle structure de données.

Remarque: Celui-ci copie en toute sécurité des objets / tableaux profondément imbriqués!

nestedNumbers = [[1], [2]];
numbersCopy = JSON.parse (
  JSON.stringify (nestedNumbers)
)
numbersCopy [0] .push (300);
console.log (nestedNumbers, numbersCopy);
// [[1], [2]]
// [[1, 300], [2]]
// Ces deux tableaux sont complètement séparés!

9. Array.concat (copie peu profonde)

concat combine des tableaux avec des valeurs ou d'autres tableaux.

[1, 2, 3] .concat (4); // [1, 2, 3, 4]
[1, 2, 3] .concat ([4, 5]); // [1, 2, 3, 4, 5]

Si vous ne donnez rien ou un tableau vide, une copie peu profonde est renvoyée.

[1, 2, 3] .concat (); // [1, 2, 3]
[1, 2, 3] .concat ([]); // [1, 2, 3]

Remarque: Ceci affecte également les objets / tableaux par référence plutôt que par valeur.

10. Array.from (copie peu profonde)

Cela peut transformer n'importe quel objet itérable en tableau. Donner un tableau renvoie une copie superficielle.

nombres = [1, 2, 3];
numbersCopy = Array.from (nombres)
// [1, 2, 3]

Remarque: Ceci affecte également les objets / tableaux par référence plutôt que par valeur.

Conclusion

C'était amusant

J'ai essayé de cloner en 1 seule étape. Vous trouverez beaucoup plus de moyens si vous utilisez plusieurs méthodes et techniques.

N'hésitez pas à laisser un commentaire si vous en trouvez un! Je suis sur Twitter si vous souhaitez parler. Jusqu'à la prochaine fois!

Prends soin de toi,
Yazeed Bzadough
yazeedb.com