Heim >Web-Frontend >js-Tutorial >Wie klont man ein Array in ES6?

Wie klont man ein Array in ES6?

王林nach vorne: 2023-09-12 08:09:031458Durchsuche

如何在 ES6 中克隆数组？

In ES5 verwenden wir die Concat-Methode, um Arrays zu kopieren. Darüber hinaus verwenden einige Entwickler die Methode „slice()“, die alle Elemente des referenzierten Arrays aufteilt und ein neues Array erstellt, indem sie 0 als Argument übergibt.

Beispiel

Benutzer können dem folgenden Beispiel folgen, um ein Array mit der Methode „slice()“ zu klonen. Wir haben Array1 erstellt, das Werte verschiedener Datentypen enthält. Danach kopieren wir Array1 mit der Methode „slice()“ und speichern es in der 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>

Benutzer haben gelernt, wie wir Arrays in ES5 klonen können.

Außerdem können Benutzer erwägen, Arrays wie normale Variablen wie Zeichenfolgen, Zahlen und boolesche Werte mithilfe von Zuweisungsoperatoren zu kopieren.

Benutzer können beim Kopieren von Arrays mithilfe von Zuweisungsoperatoren auf Probleme stoßen. Lassen Sie es uns anhand des folgenden Beispiels verstehen.

Kopieren Sie ein Array mit dem Zuweisungsoperator

Im folgenden Beispiel enthält das String-Array verschiedene Strings. Wir haben das Array strings dem Array strings2 zugewiesen. Danach übertragen wir den neuen String-Wert in das Strings2-Array.

Beispiel

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

In der obigen Ausgabe kann der Benutzer beobachten, dass der String-Wert, wenn wir ihn in das Strings2-Array übertragen, auch in das Strings-Array übertragen wird. Warum passiert das?

Hier kommt das Konzept veränderlicher und unveränderlicher Objekte ins Spiel.

Veränderliche Objekte und unveränderliche Objekte

In JavaScript sind Arrays und Objekte veränderbar, was bedeutet, dass wir ihre Werte ändern können, nachdem wir sie nach der Erstellung initialisiert haben. Daher ist das Array strings2 im obigen Beispiel nicht vorhanden. Wenn wir das Strings-Array dem Strings2-Array zuweisen, wird eine Referenz auf das Strings-Array generiert. Wenn wir also das Strings2-Array ändern, ändert sich auch das Strings-Array.

Wir müssen also eine tatsächliche Kopie des Arrays erstellen, ohne auf das andere Array zu verweisen

Jetzt lernen wir, wie man ein Array in ES6 klont.

Klonen Sie ein Array mit dem Spread-Operator (...) in ES6

Die Syntax des Spread-Operators besteht aus drei Punkten (...). Wir können dies verwenden, um iterierbare Objekte wie Arrays zu verteilen. Der Spread-Operator erstellt eine neue Kopie eines Arrays oder Objekts.

Grammatik

Benutzer können Arrays mithilfe des Spread-Operators kopieren, indem sie der folgenden Syntax folgen.

let booleansCopy = [...booleans];

Beispiel

Im folgenden Beispiel haben wir ein boolesches Array erstellt, das verschiedene boolesche Werte enthält. Danach erstellen wir mit dem Spread-Operator eine Kopie des booleschen Arrays und weisen die Kopie der Variablen booleanCopy zu.

In der Ausgabe kann der Benutzer beobachten, dass das Array booleanCopy dieselben Werte enthält wie das Array boolean.

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

Beispiel

Im folgenden Beispiel enthält das Dimensionsarray verschiedene numerische Werte. Wir haben mit dem Spread-Operator eine Kopie des Größenarrays erstellt und das Array mit dem Zuweisungsoperator in der Variablen „sizedClone“ gespeichert.

Danach schieben wir 60 in das sizeClone-Array.

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

In der obigen Ausgabe kann der Benutzer beobachten, dass 60 im sizesClone-Array widergespiegelt wird, nicht jedoch im Sizes-Array, da wir eine tatsächliche Kopie des Arrays erstellt haben, anstatt wie in Beispiel 2.

auf das Array zu verweisen

Jetzt verstehen Benutzer klar, warum der Zuweisungsoperator in ES6 nicht verwendet wird und warum der Spread-Operator zum Klonen von Arrays verwendet wird.

Das obige ist der detaillierte Inhalt vonWie klont man ein Array in ES6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript es6 数据类型 Boolean 运算符赋值运算符字符串切片对象

Stellungnahme：

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

Vorheriger Artikel：Wie verwende ich Particle.js in JavaScript-Projekten?Nächster Artikel：Wie verwende ich Particle.js in JavaScript-Projekten?

In Verbindung stehende Artikel

Mehr sehen