Explication détaillée du protocole itérable ES6 et du protocole itérateur-js tutoriel-php.cn

Cet article présente principalement en détail le protocole itérable et le protocole itérateur de la syntaxe ES6. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Plusieurs ajouts à ECMAScript 2015 ne sont pas de nouveaux éléments intégrés ou une nouvelle syntaxe, mais des protocoles. Ces protocoles peuvent être implémentés par n'importe quel objet qui suit certaines conventions.
Il existe deux protocoles : le protocole itérable et le protocole itérateur.

Protocole itérable

Le protocole itérable permet aux objets JavaScript de définir ou de personnaliser leur comportement d'itération, par exemple (défini) dans un for What. les valeurs de la structure .of peuvent être bouclées (obtenues). Certains types intégrés sont des objets itérables intégrés et ont un comportement d'itération par défaut, comme Array ou Map, tandis que d'autres types ne le sont pas (comme Object).

Le but de l'interface Iterator est de fournir un mécanisme d'accès unifié pour toutes les structures de données, c'est-à-dire une boucle for...of (voir ci-dessous pour plus de détails). Lorsque vous utilisez une boucle for...of pour parcourir une certaine structure de données, la boucle recherchera automatiquement l'interface Iterator, appellera la méthode Symbol.iterator et renverra l'itérateur par défaut de l'objet.

ES6 stipule que l'interface Iterator par défaut est déployée dans la propriété Symbol.iterator de la structure de données. En d'autres termes, tant qu'une structure de données possède la propriété Symbol.iterator, elle peut être considérée comme "itérable". . La propriété Symbol.iterator elle-même est une fonction, qui est la fonction de génération d'itérateur par défaut de la structure de données actuelle. L'exécution de cette fonction renverra un traverseur.

Pour devenir un objet itérable, un objet doit implémenter (ou un objet dans sa chaîne de prototypes) doit avoir une propriété nommée Symbol.iterator :

Protocole itérateur

Le protocole itérateur définit une manière standard de produire une séquence finie ou infinie de valeurs.

Les structures de données originales de JavaScript représentant des « ensembles » sont principalement des tableaux (Array) et des objets (Object), et ES6 ajoute Map et Set. De cette manière, il existe quatre collections de données. Les utilisateurs peuvent également les utiliser en combinaison pour définir leurs propres structures de données. Par exemple, les membres d'un tableau sont des cartes et les membres de cartes sont des objets. Cela nécessite un mécanisme d'interface unifié pour gérer toutes les différentes structures de données.

Iterator est un tel mécanisme. Il s'agit d'une interface qui fournit un mécanisme d'accès unifié à différentes structures de données. Tant qu'une structure de données déploie l'interface Iterator, elle peut terminer l'opération de traversée (c'est-à-dire traiter tous les membres de la structure de données en séquence).

Iterator a trois fonctions : premièrement, il fournit une interface d'accès unifiée et simple pour diverses structures de données ; deuxièmement, il permet aux membres de la structure de données d'être organisés dans un certain ordre, troisièmement, ES6 crée un A ; nouvelle commande de parcours for...of loop, l'interface Iterator est principalement utilisée pour for...of consommation.

Le processus de parcours d'Iterator est comme ceci.

Crée un objet pointeur pointant vers la position de départ de la structure de données actuelle. En d’autres termes, l’objet traverseur est essentiellement un objet pointeur.
La première fois que vous appelez la méthode suivante de l'objet pointeur, vous pouvez pointer le pointeur vers le premier membre de la structure de données.
La deuxième fois que la méthode suivante de l'objet pointeur est appelée, le pointeur pointe vers le deuxième membre de la structure de données.
Appelez continuellement la méthode suivante de l'objet pointeur jusqu'à ce qu'il pointe vers la fin de la structure de données.

Chaque fois que la méthode suivante est appelée, les informations des membres actuels de la structure de données seront renvoyées. Plus précisément, il renvoie un objet contenant deux propriétés : value et done. Parmi eux, l'attribut value est la valeur du membre actuel et l'attribut done est une valeur booléenne indiquant si le parcours est terminé.

var someString = "hi";
typeof someString[Symbol.iterator]; // "function"
var iterator = someString[Symbol.iterator]();
iterator + "";  // "[object String Iterator]"
iterator.next()    // { value: "h", done: false }
iterator.next();   // { value: "i", done: false }
iterator.next();   // { value: undefined, done: true }

Copier après la connexion

La structure de données native avec l'interface Iterator est la suivante.

Tableau
Carte
Ensemble
String
TypedArray
objet arguments de fonction
Objet NodeList

Notez que les objets n'ont pas d'interface Iterator. Si un objet souhaite avoir une interface Iterator pouvant être appelée par une boucle for...of, il doit déployer la méthode de génération traverser (prototype) sur le propriété des objets Symbol.iterator sur la chaîne peut également avoir cette méthode).

Lors de l'appel de l'interface Iterator

Il existe des occasions où l'interface Iterator (c'est-à-dire la méthode Symbol.iterator) sera appelée par défaut, à l'exception du for... qui sera présenté ci-dessous. La boucle .of, l'affectation de déstructuration et l'opérateur de propagation appelleront en fait l'interface Iterator par défaut.

En fait, cela fournit un mécanisme simple pour convertir toute structure de données déployée avec l'interface Iterator en un tableau. C'est-à-dire que tant qu'une structure de données déploie l'interface Iterator, vous pouvez utiliser l'opérateur spread dessus pour la convertir en tableau.

Puisque le parcours de tableau appellera l'interface traverseur, toute occasion qui accepte un tableau comme paramètre appelle en fait l'interface traverseur. Voici quelques exemples.

pour...of
Array.from()
Map(), Set(), WeakMap(), WeakSet() (comme new Map([['a',1],['b',2]]))
Promesse. tous ()
Promise.race()

for...of

for...of 循环是最新添加到 JavaScript 循环系列中的循环。

它结合了其兄弟循环形式 for 循环和 for...in 循环的优势，可以循环任何可迭代（也就是遵守可迭代协议）类型的数据。默认情况下，包含以下数据类型：String、Array、Map 和 Set，注意不包含 Object 数据类型（即 {}）。默认情况下，对象不可迭代。

在研究 for...of 循环之前，先快速了解下其他 for 循环，看看它们有哪些不足之处。

for 循环

for 循环的最大缺点是需要跟踪计数器和退出条件。我们使用变量 i 作为计数器来跟踪循环并访问数组中的值。我们还使用 Array.length 来判断循环的退出条件。

虽然 for 循环在循环数组时的确具有优势，但是某些数据结构不是数组，因此并非始终适合使用 loop 循环。

for...in 循环

for...in 循环改善了 for 循环的不足之处，它消除了计数器逻辑和退出条件。但是依然需要使用 index 来访问数组的值.

此外，当你需要向数组中添加额外的方法（或另一个对象）时，for...in 循环会带来很大的麻烦。因为 for...in 循环循环访问所有可枚举的属性，意味着如果向数组的原型中添加任何其他属性，这些属性也会出现在循环中。这就是为何在循环访问数组时，不建议使用 for...in 循环。

注意： forEach 循环是另一种形式的 JavaScript 循环。但是，forEach() 实际上是数组方法，因此只能用在数组中。也无法停止或退出 forEach 循环。如果希望你的循环中出现这种行为，则需要使用基本的 for 循环。

for...of 循环

for...of 循环用于循环访问任何可迭代的数据类型。

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
 console.log(digit);
}

Copier après la connexion

可以随时停止或退出 for...of 循环。

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
 if (digit % 2 === 0) {
  continue;
 }
 console.log(digit); //1,3,5,7,9
}

Copier après la connexion

不用担心向对象中添加新的属性。for...of 循环将只循环访问对象中的值。