Comment convertir un itérateur JavaScript en tableau ?-js tutoriel-php.cn

Comment convertir un itérateur JavaScript en tableau ?

王林

Libérer： 2023-09-16 20:57:03

avant

961 Les gens l'ont consulté

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

En JavaScript, un itérateur est une collection d'éléments à travers lesquels nous pouvons parcourir et accéder à un seul élément à chaque itération. Les collections, cartes ou objets sont des itérateurs en JavaScript et nous ne pouvons pas accéder aux éléments des itérateurs en utilisant des index comme nous le pouvons avec des tableaux.

Donc, nous devons d'abord convertir l'itérateur en tableau. Ici, nous allons convertir l'itérateur en tableau en utilisant différentes méthodes comme array.from() etc.

Utilisez une boucle for-of

for-of boucles sur chaque élément de l'itérateur se trouve la collection et la carte. Dans la boucle for-of, nous pouvons accéder et ajouter des éléments au tableau et nous pouvons utiliser la méthode push() pour ajouter des éléments au tableau.

Grammaire

Les utilisateurs peuvent utiliser la boucle for-of pour convertir l'itérateur en tableau en suivant la syntaxe ci-dessous.

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

Copier après la connexion

Dans la syntaxe ci-dessus, nous accédons aux éléments de l'itérateur dans une boucle for-of et les poussons vers le tableau

Exemple 1

Dans l'exemple ci-dessous, nous créons test_array et l'initialisons avec quelques nombres. Après cela, nous utilisons Symbol.iterator() pour convertir le tableau en itérateur.

Ensuite, nous utilisons une boucle for-of pour parcourir l'itérateur. Nous accédons à tous les éléments de l'itérateur un par un et les poussons dans le tableau. Une fois toutes les itérations de la boucle for terminées, nous obtenons la gamme complète d’itérateurs.

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

Copier après la connexion

Utilisez la méthode array.from()

La méthode Array.from() crée un tableau à partir d'un itérateur. Nous devons passer l'objet itérateur en tant que paramètre de la méthode array.from(). Après avoir converti l'itérateur en tableau, il renvoie un tableau.

Grammaire

Les utilisateurs peuvent utiliser la méthode array.from() selon la syntaxe ci-dessous pour convertir l'itérateur en tableau.

let array = Array.from(test_set);

Copier après la connexion

Dans la syntaxe ci-dessus, test_set est un itérateur à convertir en tableau.

Paramètres

test_set – C'est un itérateur à convertir en tableau.

Exemple 2

Dans l'exemple ci-dessous, nous avons créé une collection utilisant divers éléments. Après cela, nous convertissons la collection en tableau en utilisant la méthode array.from(). Dans la sortie, l’utilisateur peut voir le tableau renvoyé par la méthode array.from().

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

Copier après la connexion

Utilisez l'opérateur de propagation

L'opérateur spread nous permet également de convertir des itérateurs en tableaux comme la méthode array.from(). Il copie tous les éléments de l'itérateur dans un nouveau tableau. De plus, nous pouvons l'utiliser pour cloner des tableaux.

Grammaire

Les utilisateurs peuvent utiliser l'opérateur spread pour convertir les itérateurs en tableaux en suivant la syntaxe ci-dessous

let array = [...test_map];

Copier après la connexion

Dans la syntaxe ci-dessus, test_map est un itérateur.

Exemple 3

Dans l'exemple ci-dessous, nous avons créé une carte avec des clés et des valeurs uniques. Nous pouvons accéder à des valeurs spécifiques de la carte à l'aide de clés.

Nous avons converti test_map en tableau à l'aide de l'opérateur spread. Dans le résultat, l'utilisateur peut voir que chaque clé et valeur de la carte a été ajoutée au tableau

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

Copier après la connexion

Exemple 4

Dans cet exemple, nous convertissons l'itérateur de collection en tableau. Le nouveau constructeur Set() est utilisé pour créer des ensembles à partir d'éléments numériques, booléens et chaînes.

Après cela, nous utilisons l'opérateur spread pour convertir l'itérateur de collection en tableau.

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

Copier après la connexion

Dans ce tutoriel, nous avons découvert trois manières différentes de convertir un itérateur en tableau. La meilleure façon est d'utiliser l'opérateur spread car il fournit également une autre fonctionnalité comme le clonage d'un 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!