Maison > interface Web > Questions et réponses frontales > Que sont les itérateurs et les itérables en JavaScript?

Que sont les itérateurs et les itérables en JavaScript?

Robert Michael Kim
Libérer: 2025-03-18 13:51:32
original
329 Les gens l'ont consulté

Que sont les itérateurs et les itérables en JavaScript?

En JavaScript, les itérateurs et les itérables sont des concepts fondamentaux utilisés pour traverser des collections de données, telles que des tableaux, des chaînes et des structures de données plus complexes.

Les itérables sont des objets qui peuvent être itérés, ce qui signifie que vous pouvez passer par leurs éléments un par un. Un itérable dans JavaScript doit implémenter la méthode @@iterator , qui est souvent symbolisée en tant que Symbol.iterator . Lorsqu'il est appelé, cette méthode doit renvoyer un itérateur pour l'objet.

Par exemple, les tableaux et les chaînes sont intégrés dans JavaScript. Vous pouvez utiliser le for...of boucle directement sur ces éléments pour itérer sur leurs éléments:

 <code class="javascript">const array = [1, 2, 3, 4, 5]; for (const value of array) { console.log(value); // Outputs: 1, 2, 3, 4, 5 }</code>
Copier après la connexion

Les itérateurs , en revanche, sont des objets qui gardent une trace de l'endroit où vous êtes dans une itération sur un itérable. Un objet Iterator doit avoir une méthode next() , qui renvoie un objet avec deux propriétés: value , qui est la valeur suivante dans la séquence, et done , un booléen indiquant si l'itération a terminée.

Vous pouvez utiliser manuellement un itérateur comme celui-ci:

 <code class="javascript">const array = [1, 2, 3, 4, 5]; const iterator = array[Symbol.iterator](); console.log(iterator.next()); // { value: 1, done: false } console.log(iterator.next()); // { value: 2, done: false } console.log(iterator.next()); // { value: 3, done: false }</code>
Copier après la connexion

Comprendre la distinction entre ces deux concepts est crucial pour une manipulation efficace des données en JavaScript.

Comment puis-je utiliser des itérateurs pour parcourir un tableau en JavaScript?

Vous pouvez utiliser des itérateurs pour parcourir un tableau en appelant manuellement la méthode next() sur l'objet Iterator renvoyé par la méthode @@iterator d'un tableau. Voici un exemple étape par étape de la façon de procéder:

 <code class="javascript">const array = [10, 20, 30, 40, 50]; const iterator = array[Symbol.iterator](); let result = iterator.next(); while (!result.done) { console.log(result.value); // Outputs: 10, 20, 30, 40, 50 result = iterator.next(); }</code>
Copier après la connexion

Cette approche vous donne un contrôle fin sur le processus d'itération. Vous pouvez également utiliser le for...of boucle, qui utilise en interne le mécanisme itérateur pour traverser le tableau:

 <code class="javascript">const array = [10, 20, 30, 40, 50]; for (const value of array) { console.log(value); // Outputs: 10, 20, 30, 40, 50 }</code>
Copier après la connexion

Le for...of boucle est un moyen plus pratique et couramment utilisé pour itérer les itérables.

Quelle est la différence entre un itérable et un itérateur en JavaScript?

La principale différence entre un itérable et un itérateur en JavaScript réside dans leurs rôles et fonctionnalités pendant le processus d'itération.

  • Itérable: un itérable est un objet qui représente une collection de données et peut être itéré. Il a une méthode Symbol.iterator , qui renvoie un itérateur. Le but d'un itérable est de fournir un moyen d'accéder à ses éléments séquentiellement.
  • Iterator: Un iterator est un objet qui facilite le processus d'itération réel. Il garde une trace de la position actuelle dans l'itération et fournit la méthode next() pour récupérer l'élément suivant de la séquence. Chaque appel à next() renvoie un objet avec des propriétés value et done .

Voici une simple illustration de ces concepts:

 <code class="javascript">// An array is an iterable const array = [1, 2, 3]; // Getting an iterator from the iterable const iterator = array[Symbol.iterator](); // Using the iterator console.log(iterator.next()); // { value: 1, done: false } console.log(iterator.next()); // { value: 2, done: false } console.log(iterator.next()); // { value: 3, done: false } console.log(iterator.next()); // { value: undefined, done: true }</code>
Copier après la connexion

En résumé, un itérable fournit le mécanisme pour obtenir un itérateur, tandis que l'itérateur effectue l'itération en produisant des éléments successifs de l'Iitable.

Pouvez-vous fournir des exemples d'itérables intégrés en JavaScript?

JavaScript comprend plusieurs types de données intégrés qui sont itérables. Voici quelques exemples:

  1. Arris:
    Les tableaux sont l'un des itérables les plus couramment utilisés en JavaScript. Vous pouvez utiliser le for...of boucle pour itérer les éléments d'un tableau.
 <code class="javascript">const fruits = ['apple', 'banana', 'cherry']; for (const fruit of fruits) { console.log(fruit); // Outputs: apple, banana, cherry }</code>
Copier après la connexion
  1. CORDES:
    Les chaînes sont également itérables, où chaque itération donne un caractère dans la chaîne.
 <code class="javascript">const message = "Hello"; for (const char of message) { console.log(char); // Outputs: H, e, l, l, o }</code>
Copier après la connexion
  1. Cartes:
    Les cartes sont des collections itératives de paires de valeurs clés. Le for...of boucle itère sur les entrées de valeur clé.
 <code class="javascript">const map = new Map([['a', 1], ['b', 2], ['c', 3]]); for (const [key, value] of map) { console.log(key, value); // Outputs: a 1, b 2, c 3 }</code>
Copier après la connexion
  1. Ensembles:
    Les ensembles sont des collections de valeurs uniques et sont itérables. Le for...of boucle itère sur les valeurs de l'ensemble.
 <code class="javascript">const set = new Set([1, 2, 3, 4, 5]); for (const value of set) { console.log(value); // Outputs: 1, 2, 3, 4, 5 }</code>
Copier après la connexion

Ces itérables intégrés rendent simple de gérer les collections de données en JavaScript en utilisant les mécanismes d'itération fournis par la langue.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal