Comprendre ce qu'est un itérateur JavaScript en dix minutes

Cet article vous apporte des connaissances pertinentes sur les itérateurs en JavaScript. Voyons ce qu'est un itérateur et comment le personnaliser. J'espère qu'il vous sera utile.

1. Qu'est-ce qu'un itérateur ?

• Iterator est un mécanisme d'interface qui fournit un mécanisme d'accès unifié à diverses structures de données. (C'est-à-dire pour rendre certaines structures de données qui ne prennent pas en charge la traversée traversables) Le plus courant est l'itérateur Array, qui renvoie les valeurs du tableau dans l'ordre.

let arr = [1,2,3,4,5];for (let val of arr) {
    console.log(val);}

2. Itérateur personnalisé

---

Alors, comment implémentons-nous les itérateurs ?

Tout d'abord, il doit satisfaire deux points :

Protocole Iterable

Protocole Iterator
• Protocole Iterable

Le protocole Iterable permet aux objets JavaScript de définir ou de personnaliser leur comportement d'itération

Comment satisfaire Protocole itérable ?

Pour devenir un objet itérable, un objet doit implémenter la méthode @@iterator.

Cela signifie que l'objet (ou un objet sur sa chaîne de prototypes) doit avoir une propriété avec la clé @@iterator, accessible via la constante Symbol.iterator

En d'autres termes, si vous souhaitez satisfaire l'itérable protocole, alors votre objet doit avoir une propriété avec le nom de clé Symbol.iterator pour en faire un objet itérable.

Iterator Protocol

Symbol.iterator的属性，使其成为可迭代对象。

迭代器协议

迭代器协议定义了产生一系列值（无论是有限个还是无限个）的标准方式。
当值为有限个时，所有的值都被迭代完毕后，则会返回一个默认返回值。

如何满足迭代器协议 ？

你的对象需要至少实现一个next()方法，这个方法返回一个迭代器对象IteratorResult。这个迭代器对象包含两个属性done和·value。

• done：
  如果迭代器可以产生序列中的下一个值，则为 false。
  如果迭代器已将序列迭代完毕，则为 true
• value
  迭代器返回的值。done 为 true 时可省略
  

那么我们接下来开始自定义一个迭代器

由前文所讲，要想自定义迭代器，需要符合以下两个条件：

• 成为可迭代对象，即有一个 Symbol.iterator 属性
  （即可迭代协议：Symbol.iterator）
• 该迭代器对象返回一个 next() 方法，这个 next() 方法返回一个包含value 和 done
  Le protocole itérateur définit une manière standard de produire une séquence de valeurs, qu'elles soient finies ou infinies.
Lorsqu'il y a un nombre limité de valeurs, une fois que toutes les valeurs ont été itérées, une valeur de retour par défaut sera renvoyée.

Comment satisfaire le protocole itérateur ?

Votre objet doit implémenter au moins une méthode next(), qui renvoie un objet itérateur IteratorResult. Cet objet itérateur contient deux propriétés done et ·value.

done :
Faux si l'itérateur peut produire la valeur suivante dans la séquence.

true si l'itérateur a fini d'itérer la séquence

value La valeur renvoyée par l'itérateur. Done peut être omis lorsqu'il est vrai

🎜🎜Ensuite, commençons par personnaliser un itérateur🎜🎜🎜Comme mentionné ci-dessus, si vous souhaitez personnaliser un itérateur, vous devez remplir les deux conditions suivantes :🎜🎜🎜Devenez un objet itérable , c'est-à-dire qu'il existe un attribut Symbol.iterator🎜 (c'est-à-dire un protocole itérable : Symbol.iterator)🎜🎜L'objet itérateur renvoie une méthode next(), ceci La méthode next() renvoie un objet contenant les propriétés value et done 🎜 (c'est-à-dire le protocole de l'itérateur : return { next() { return { value , done } })🎜🎜

let colors = {
    blue : "蓝色",
    green : "绿色",
    yellow : "黄色"}

🎜colors est maintenant un objet non itérable Nous voulons utiliser for...of pour le parcourir, nous pouvons ensuite personnaliser l'itérateur. 🎜 Ensuite, commencez à implémenter : 🎜

colors[Symbol.iterator] = function() {
	let keys = Object.keys(colors);
	// 如果用 let keys = Reflect.ownKeys(colors)，keys 就会包括一些不可枚举的属性
	// 那么后面的 len 要减一，减去Symbol.iterator这个属性
	// 根据实际情况选择使用
	let len = keys.length;
	let index = 0;
	
	return {
	    next : function() {
	        if (index < len) {
	            return {
	                value : colors[keys[index++]],
	                done : false
	            }
	        }
	        return { done : true }
	    }
	}}

🎜Vérifions-le : 🎜

for (let val of colors) {
    console.log(val);}

🎜🎜🎜🎜🎜[Recommandations associées : 🎜Tutoriel d'apprentissage Javascript🎜🎜]🎜🎜

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!