Utilisation de la méthodeslice()"/>

Utilisation de la méthodeslice()">
recherche

Maison >interface Web >js tutoriel >Comment cloner un tableau dans ES6 ?

Comment cloner un tableau dans ES6 ?

王林
王林avant
2023-09-12 08:09:031458parcourir

如何在 ES6 中克隆数组？

Dans ES5, nous utilisons la méthode concat pour copier des tableaux. De plus, certains développeurs utilisent la méthode slice(), qui découpe tous les éléments du tableau référencé et crée un nouveau tableau en passant 0 comme argument.

Exemple

Les utilisateurs peuvent suivre l'exemple ci-dessous pour cloner un tableau à l'aide de la méthode slice(). Nous avons créé array1 qui contient des valeurs de différents types de données. Après cela, nous copions array1 à l'aide de la méthode slice() et le stockons dans la variable "clone". 

<html>
<body>
   <h2>Using the <i>slice()</i> method to clone the array in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let array1 = [10, "hello", 30, true];
      output.innerHTML += "The original array: " + array1 + " <br>";
      let clone = array1.slice(0);
      output.innerHTML += "The cloned array: " + clone + " <br>";
   </script>
</body>
</html>

Les utilisateurs ont appris comment cloner des tableaux dans ES5.

En outre, les utilisateurs peuvent envisager de copier des tableaux tout comme des variables normales telles que des chaînes, des nombres et des booléens à l'aide d'opérateurs d'affectation.

Les utilisateurs peuvent rencontrer des problèmes lors de la copie de tableaux à l'aide d'opérateurs d'affectation. Comprenons-le à travers l'exemple suivant.

Copiez un tableau à l'aide de l'opérateur d'affectation

Dans l'exemple ci-dessous, le tableau de chaînes contient différentes chaînes. Nous avons attribué le tableau strings au tableau strings2. Après cela, nous insérons la nouvelle valeur de chaîne dans le tableau strings2.

Exemple

<html>
<body>
   <h2>Using the <i>assignment</i> operator to clone the array in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let array1 = ["Hi", " users", "Welcome"];
      let array2 = array1;
      array2.push("New value");
      output.innerHTML += "The value of array2: " + array2 + " <br>";
      output.innerHTML += "The value of array1: " + array1 + " <br>";
   </script>
</body>
</html>

Dans la sortie ci-dessus, l'utilisateur peut observer que lorsque nous poussons la valeur de chaîne vers le tableau strings2, elle est également poussée vers le tableau strings. Pourquoi cela arrive-t-il ?

Ici, la notion d'objets mutables et immuables entre en jeu.

Objets mutables et objets immuables

En JavaScript, les tableaux et les objets sont mutables, ce qui signifie que nous pouvons modifier leurs valeurs après les avoir initialisés après les avoir créés. Par conséquent, le tableau strings2 n’existe pas dans l’exemple ci-dessus. Lorsque nous attribuons le tableau de chaînes au tableau strings2, cela génère une référence au tableau de chaînes. Ainsi, chaque fois que nous modifions le tableau strings2, cela modifie également le tableau strings.

Nous devons donc créer une copie réelle du tableau sans référencer l'autre tableau

Apprenons maintenant à cloner un tableau dans ES6.

Cloner un tableau à l'aide de l'opérateur spread (...) dans ES6

La syntaxe de l'opérateur spread est de trois points (...). Nous pouvons l'utiliser pour diffuser des objets itérables comme des tableaux. L'opérateur spread crée une nouvelle copie d'un tableau ou d'un objet.

Grammaire

Les utilisateurs peuvent copier des tableaux à l'aide de l'opérateur spread en suivant la syntaxe suivante. 

let booleansCopy = [...booleans];

Exemple

Dans l'exemple ci-dessous, nous avons créé un tableau booléen contenant différentes valeurs booléennes. Après cela, nous créons une copie du tableau booléen à l'aide de l'opérateur spread et attribuons la copie à la variable booleanCopy.

Dans la sortie, l'utilisateur peut observer que le tableau booleanCopy contient les mêmes valeurs que le tableau booléen. 

<html>
<body>
   <h2>Using the <i> spread operator </i> to clone the array in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let booleans = [true, false, false, true, true];
      let booleansCopy = [...booleans];
      output.innerHTML += "The values of the booleansCopy array: " + booleansCopy + "<br>";
   </script>
</body>
</html>

Exemple

Dans l'exemple ci-dessous, le tableau dimensions contient différentes valeurs numériques. Nous avons créé une copie du tableau size à l'aide de l'opérateur spread et stocké le tableau dans la variable sizedClone à l'aide de l'opérateur d'affectation.

Ensuite, nous insérons 60 dans le tableau sizeClone. 

<html>
<body>
   <h2>Using the <i>spread</i> operator to clone the array in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let sizes = [34, 43, 45, 47, 49, 50];
      output.innerHTML += "-------Before Push-------" + "<br>";
      output.innerHTML += "The values of the sizes array: " + sizes + "<br>";
      let sizesClone = [...sizes];
      output.innerHTML += "The values of the sizesClone array: " + sizesClone + "<br>";
      sizesClone.push(60);
      output.innerHTML += "------After Push------" + "<br>";
      output.innerHTML += "The values of the sizes array: " + sizes + "<br>";
      output.innerHTML += "The values of the sizesClone array:" + sizesClone + "<br>";
   </script>
</body>
</html>

Dans le résultat ci-dessus, l'utilisateur peut observer que 60 est reflété dans le tableau sizesClone mais pas dans le tableau Sizes car nous avons créé une copie réelle du tableau au lieu de référencer le tableau comme dans l'exemple 2.

Les utilisateurs comprennent désormais clairement pourquoi l'opérateur d'affectation n'est pas utilisé dans ES6 et pourquoi l'opérateur de propagation est utilisé pour cloner des tableaux.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript es6 数据类型 Boolean 运算符 赋值运算符 字符串 切片 对象
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment utiliser Particle.js dans des projets JavaScript ?Article suivant：Comment utiliser Particle.js dans des projets JavaScript ?

Articles Liés

Voir plus