Maison > Article > interface Web > Comment décompresser les éléments d'un tableau en variables distinctes à l'aide de JavaScript ?

Comment décompresser les éléments d'un tableau en variables distinctes à l'aide de JavaScript ?

王林avant: 2023-09-14 18:05:021264parcourir

如何使用 JavaScript 将数组元素解压到单独的变量中？

Décompresser un élément de tableau signifie attribuer la valeur de l'élément de tableau à une nouvelle variable. Nous pouvons attribuer chaque élément à une variable distincte ou attribuer certains éléments à une variable distincte et pour les éléments restants, nous pouvons créer un nouveau tableau. Dans ce didacticiel, nous apprendrons à décompresser les éléments d'un tableau en variables distinctes à l'aide de JavaScript.

Grammaire

Les utilisateurs peuvent décompresser les éléments du tableau en variables distinctes en suivant la syntaxe ci-dessous.

let array = [element1, element2, element3, element4];
let [a, b, c, d] = array;

Dans la syntaxe ci-dessus, une variable contient la valeur de l'élément1, b contient la valeur de l'élément2, c contient la valeur de l'élément3 et la variable d contient la valeur de l'élément4.

Nous allons maintenant examiner divers exemples de décompression d'éléments de tableau en variables distinctes à l'aide de JavaScript.

Exemple 1

Dans l'exemple ci-dessous, nous définissons array1 et l'initialisons avec quelques valeurs numériques. De plus, nous avons défini les variables a, b et c dans lesquelles décompresser les éléments du tableau. Après cela, nous utilisons la syntaxe ci-dessus pour déstructurer les éléments du tableau en variables individuelles.

Dans la sortie, l'utilisateur peut observer les valeurs initiales des variables a, b et c et les valeurs finales après y avoir décompressé les éléments du tableau.

<html>
<body>
   <h2>Unpacking the array elements <i> to separate variables </i> using JavaScript. </h2>
   <div id = "output"> </div>
   <script>
      var output = document.getElementById('output');
      let array1 = [10, 20, 30];
      let a = 40;
      let b = 100;
      let c = 50;
      output.innerHTML += "The elements of the array1 are " + array1 + " <br/>";
      output.innerHTML += "The initial values of the a, b, and c variables are a : " + a + " b : " + b + " c : " + c + " <br>";
      [a, b, c] = array1;
      output.innerHTML += "The values of the a, b, and c variables after unpacking the array elements are a : " + a + " b : " + b + " c : " + c + " <br>";
   </script>
</body>
</html>

Exemple 2

Dans cet exemple, nous décompressons directement les éléments du tableau dans des variables distinctes lors de la déclaration d'une nouvelle variable. Les utilisateurs peuvent observer comment nous déclarons plusieurs variables et décompressons le tableau en attribuant directement le tableau aux variables au lieu d'attribuer la variable du tableau.

<html>
<body> 
   <h2>Unpacking the array elements <i> to separate variables </i> using JavaScript. </h2>
   <div id = "output"> </div>
   <script>
      var output = document.getElementById('output');
      let [var1, var2, var3] = ["Hi", "Hello", "Welcome"];
      output.innerHTML += "The values of the var1, var2, and var3 variables after unpacking the array elements are var1 : " + var1 + ", var2 : " + var2 + ", var3 : " + var3 + " <br>";
   </script>
</body>
</html>

Exemple 3

Dans l'exemple ci-dessous, lorsque l'utilisateur clique sur le bouton, il appelle la fonction unpackElements(). Dans la fonction unpackElements(), nous détruisons le tableau. De plus, nous ignorons certains éléments du tableau lors du décompression des éléments du tableau en variables distinctes.

Les utilisateurs peuvent voir que nous pouvons ignorer des éléments dans n'importe quel index de tableau en ajoutant des espaces séparés par des virgules.

<html>
<body>
   <h2>Skipping some array elements while unpacking them <i> into separate variables </i> using JavaScript. </h2>
   <div id = "output"> </div>
   <button onclick="unpackElements()">Unpack array elements</button>
   <script>
      var output = document.getElementById('output');
      function unpackElements() {
         let a, b, c, d;
         output.innerHTML += "The initial values of a, b, c, d variables are a : " + a + ", b : " + b + ", c : " + c + ", d : " + d + "<br/>";
         
         // Skipping the elements
         [a, , b, , c, , d] = [10, 20, 30, 40, 50, 60, 70, 80, 90];
         output.innerHTML += "The values of the a, b, c, and d variables after unpacking the array elements are a : " + a + ", b : " + b + ", c : " + c + ", d : " + d + "<br/>";
      }
   </script>
</body>
</html>

Exemple 4

Dans l'exemple suivant, nous apprendrons à attribuer des valeurs par défaut aux variables lors de la décompression des éléments du tableau. Nous spécifions 500 comme valeur par défaut pour toutes les variables. Si le tableau contient moins d'éléments que le nombre total de variables, les variables sont initialisées avec les valeurs par défaut.

Dans le résultat de l'exemple ci-dessous, nous pouvons voir que la valeur de d est 500, qui est la valeur par défaut.

<html>
<body>
   <h3>Assigning the default values to the variables while unpacking array elements <i> to separate variables </i> using JavaScript </h3>
   <div id = "output"> </div>
   <button onclick="unpackElements()">Unpack array elements</button>
   <script>
      var output = document.getElementById('output');
      function unpackElements() {
         let a, b, c, d;
         output.innerHTML += "The initial values of a, b, c, d variables are a : " + a + ", b : " + b + ", c : " + c + ", d : " + d + "<br/>";
         
         // Skipping the elements
         [a = 500, , b = 500, , c = 500, , d = 500] = [10, 20, 30, 40, 50];
         output.innerHTML += "The values of the a, b, c, and d variables after unpacking the array elements are a : " + a + ", b : " + b + ", c : " + c + ", d : " + d + "<br/>";
      }
   </script>
</body>
</html>

Nous avons découvert la déstructuration des tableaux, qui a été introduite dans la version ES6 de JavaScript. Nous avons vu quatre exemples qui représentent des cas d'utilisation pour décompresser des éléments de tableau.

Les utilisateurs ont appris à ignorer des éléments et à attribuer des valeurs par défaut aux variables lors du déballage des éléments du tableau.

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

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment redresser un objet Image à l'aide de FabricJS ?Article suivant：Comment redresser un objet Image à l'aide de FabricJS ?

Articles Liés

Voir plus