Heim >Web-Frontend >js-Tutorial >Wie konvertiere ich einen JavaScript-Iterator in ein Array?

Wie konvertiere ich einen JavaScript-Iterator in ein Array?

王林nach vorne: 2023-09-16 20:57:03992Durchsuche

如何将 JavaScript 迭代器转换为数组？

In JavaScript ist ein Iterator eine Sammlung von Elementen, über die wir iterieren und in jeder Iteration auf ein einzelnes Element zugreifen können. Sammlungen, Karten oder Objekte sind Iteratoren in JavaScript und wir können nicht wie bei Arrays über Indizes auf die Elemente von Iteratoren zugreifen.

Also müssen wir zuerst den Iterator in ein Array konvertieren. Hier konvertieren wir den Iterator mit verschiedenen Methoden wie array.from() usw. in ein Array.

Verwenden Sie die for-of-Schleife

for-of-Schleifen über jedes Element des Iterators liegen in der Sammlung und in der Karte. In der for-of-Schleife können wir auf Elemente zugreifen und diese zum Array hinzufügen, und wir können die Methode push() verwenden, um Elemente zum Array hinzuzufügen.

Grammatik

Benutzer können die for-of-Schleife verwenden, um den Iterator in ein Array umzuwandeln, indem sie der folgenden Syntax folgen.

for (let element of iterator) {
   array.push(element);
}

In der obigen Syntax greifen wir in einer for-of-Schleife auf die Elemente des Iterators zu und übertragen sie auf das Array

Beispiel 1

Im folgenden Beispiel erstellen wir test_array und initialisieren es mit einigen Zahlen. Danach verwenden wir Symbol.iterator(), um das Array in einen Iterator umzuwandeln.

Als nächstes verwenden wir eine for-of-Schleife, um den Iterator zu durchlaufen. Wir greifen nacheinander auf alle Elemente des Iterators zu und schieben sie in das Array. Sobald alle Iterationen der for-Schleife abgeschlossen sind, erhalten wir das vollständige Array an Iteratoren.

<html>
<body>
   <h2>Using the <i> for loop </i> to transform JavaScript iterator into the array</h2> 
   <div id = "output"> </div>
</body>
<script>
   let output = document.getElementById('output');
   let test_array = [10, 20, 30, 0, 50, 60, 70];
   let iterator = test_array[Symbol.iterator]();
   let array = [];
   for (let element of iterator) {
      array.push(element);
      output.innerHTML += "Array element is - " + element + "<br>";
   }
   output.innerHTML += "The whole array is - " + array;
</script>
</html>

Verwenden Sie die Methode array.from()

Die Methode

Array.from() erstellt ein Array aus einem Iterator. Wir müssen das Iteratorobjekt als Parameter der Methode array.from() übergeben. Nach der Konvertierung des Iterators in ein Array gibt er ein Array zurück.

Grammatik

Benutzer können die Methode array.from() gemäß der folgenden Syntax verwenden, um den Iterator in ein Array zu konvertieren.

let array = Array.from(test_set);

In der obigen Syntax ist test_set ein Iterator, der in ein Array konvertiert werden soll.

Parameter

test_set – Es ist ein Iterator, der in ein Array konvertiert werden soll.

Beispiel 2

Im folgenden Beispiel haben wir eine Sammlung aus verschiedenen Elementen erstellt. Anschließend konvertieren wir die Sammlung mit der Methode array.from() in ein Array. In der Ausgabe kann der Benutzer das von der Methode array.from() zurückgegebene Array sehen.

<html>
<body>
   <h2>Using the <i> Array.from() method </i> to transform JavaScript iterator into the array.</h2>
   <div id = "output"> </div>
</body>
<script>
   let output = document.getElementById('output');
   let test_set = new Set(["Hello", "Hello", "Hi", 10, 10, 20, 30, 40, 40, true, false, true, true]);
   let array = Array.from(test_set);
   output.innerHTML += "The array from the test_set is " + array;
</script>
</html>

Verwenden Sie den Spread-Operator

Der Spread-Operator ermöglicht es uns auch, Iteratoren in Arrays wie die Methode array.from() umzuwandeln. Es kopiert alle Elemente des Iterators in ein neues Array. Darüber hinaus können wir damit Arrays klonen.

Grammatik

Benutzer können den Spread-Operator verwenden, um Iteratoren in Arrays umzuwandeln, indem sie der folgenden Syntax folgen

let array = [...test_map];

In der obigen Syntax ist test_map ein Iterator.

Beispiel 3

Im folgenden Beispiel haben wir eine Karte mit eindeutigen Schlüsseln und Werten erstellt. Über Schlüssel können wir auf bestimmte Werte aus der Karte zugreifen.

Wir haben test_map mithilfe des Spread-Operators in ein Array konvertiert. In der Ausgabe kann der Benutzer sehen, dass jeder Schlüssel und Wert der Karte dem Array hinzugefügt wurde

<html>
<body>
   <h2>Using the <i> Spread operator </i> to transform JavaScript iterator into the array.</h2>
   <div id = "output"> </div>
</body>
<script>
   let output = document.getElementById('output');
   var test_map = new Map([["first", true], ["second", false], ["third", false], ["fourth", true]]);
   let array = [...test_map]; 
   output.innerHTML += "The array from the test_map is " + array;
</script>
</html>

Beispiel 4

In diesem Beispiel konvertieren wir den Sammlungsiterator in ein Array. Der neue Set()-Konstruktor wird verwendet, um Mengen aus numerischen, booleschen und String-Elementen zu erstellen.

Danach verwenden wir den Spread-Operator, um den Sammlungsiterator in ein Array umzuwandeln.

<html>
<body>
   <h2>Using the <i> Spread operator </i> to transform JavaScript iterator into the array.</h2>
   <div id="output"> </div>
</body>
<script>
   let output = document.getElementById('output');
   let set = new Set([30, 40, "TypeScript", "JavaScript"])
   let array = [...set]
   output.innerHTML += "The array from the object is " + array;
</script>
</html>

In diesem Tutorial haben wir drei verschiedene Möglichkeiten kennengelernt, einen Iterator in ein Array umzuwandeln. Am besten verwenden Sie den Spread-Operator, da dieser auch eine weitere Funktionalität bietet, beispielsweise das Klonen eines Arrays.

Das obige ist der detaillierte Inhalt vonWie konvertiere ich einen JavaScript-Iterator in ein Array?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript Array 运算符 for 构造函数字符串循环 symbol 对象

Stellungnahme：

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

Vorheriger Artikel：FabricJS – Wie erhalte ich die Position eines Bildobjekts relativ zum Ursprung?Nächster Artikel：FabricJS – Wie erhalte ich die Position eines Bildobjekts relativ zum Ursprung?

In Verbindung stehende Artikel

Mehr sehen