Heim > Artikel > Web-Frontend > Wie entpacke ich Array-Elemente mit JavaScript in separate Variablen?

Wie entpacke ich Array-Elemente mit JavaScript in separate Variablen?

王林nach vorne: 2023-09-14 18:05:021251Durchsuche

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

Ein Array-Element zu entpacken bedeutet, den Wert des Array-Elements einer neuen Variablen zuzuweisen. Wir können jedes Element einer separaten Variablen zuweisen oder einige Elemente einer separaten Variablen zuweisen und für die verbleibenden Elemente ein neues Array erstellen. In diesem Tutorial lernen wir, Array-Elemente mithilfe von JavaScript in separate Variablen zu entpacken.

Grammatik

Benutzer können Array-Elemente in separate Variablen entpacken, indem sie der folgenden Syntax folgen.

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

In der obigen Syntax enthält eine Variable den Wert von Element1, b enthält den Wert von Element2, c enthält den Wert von Element3 und die Variable d enthält den Wert von Element4.

Jetzt sehen wir uns verschiedene Beispiele für das Entpacken von Array-Elementen in separate Variablen mithilfe von JavaScript an.

Beispiel 1

Im folgenden Beispiel definieren wir array1 und initialisieren es mit einigen numerischen Werten. Darüber hinaus haben wir a-, b- und c-Variablen definiert, in die Array-Elemente entpackt werden sollen. Danach verwenden wir die obige Syntax, um die Array-Elemente in einzelne Variablen zu zerlegen.

In der Ausgabe kann der Benutzer die Anfangswerte der a-, b- und c-Variablen und die Endwerte beobachten, nachdem er die Array-Elemente in sie entpackt hat.

<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>

Beispiel 2

In diesem Beispiel entpacken wir die Array-Elemente direkt in separate Variablen, wenn wir eine neue Variable deklarieren. Benutzer können beobachten, wie wir mehrere Variablen deklarieren und das Array entpacken, indem wir das Array direkt den Variablen zuweisen, anstatt die Array-Variable zuzuweisen.

<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>

Beispiel 3

Wenn der Benutzer im folgenden Beispiel auf die Schaltfläche klickt, ruft er die Funktion unpackElements() auf. In der Funktion unpackElements() zerstören wir das Array. Darüber hinaus überspringen wir einige Elemente im Array, wenn wir die Array-Elemente in separate Variablen entpacken.

Benutzer können sehen, dass wir Elemente in jedem Array-Index überspringen können, indem wir durch Kommas getrennte Leerzeichen hinzufügen.

<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>

Beispiel 4

Im folgenden Beispiel lernen wir, Variablen beim Entpacken von Array-Elementen Standardwerte zuzuweisen. Wir geben 500 als Standardwert für alle Variablen an. Wenn das Array weniger Elemente enthält als die Gesamtzahl der Variablen, werden die Variablen mit Standardwerten initialisiert.

In der Ausgabe des Beispiels unten können wir sehen, dass der Wert von d 500 ist, was der Standardwert ist.

<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>

Wir haben etwas über die Array-Destrukturierung gelernt, die in der ES6-Version von JavaScript eingeführt wurde. Wir haben vier Beispiele gesehen, die Anwendungsfälle für das Entpacken von Array-Elementen darstellen.

Benutzer haben gelernt, beim Entpacken von Array-Elementen Elemente zu überspringen und Variablen Standardwerte zuzuweisen.

Das obige ist der detaillierte Inhalt vonWie entpacke ich Array-Elemente mit JavaScript in separate Variablen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript es6

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie begradige ich ein Bildobjekt mit FabricJS?Nächster Artikel：Wie begradige ich ein Bildobjekt mit FabricJS?

In Verbindung stehende Artikel

Mehr sehen