Verstehen Sie in zehn Minuten, was ein JavaScript-Iterator ist

Dieser Artikel vermittelt Ihnen relevantes Wissen über Iteratoren in JavaScript. Werfen wir einen Blick darauf, was ein Iterator ist und wie Sie ihn anpassen können.

1. Was ist ein Iterator?

• Iterator ist ein Schnittstellenmechanismus, der einen einheitlichen Zugriffsmechanismus für verschiedene Datenstrukturen bietet. (Das heißt, um einige Datenstrukturen, die keine Traversierung unterstützen, durchquerbar zu machen.) Der gebräuchlichste ist der Array-Iterator, der die Werte im Array der Reihe nach zurückgibt.

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

2. Benutzerdefinierter Iterator

---

Wie implementieren wir also Iteratoren?

Zuallererst muss es zwei Punkte erfüllen:

Iterierbares Protokoll

Iterator-Protokoll
• Iterierbares Protokoll

Mit dem iterierbaren Protokoll können JavaScript-Objekte ihr Iterationsverhalten definieren oder anpassen.

So erfüllen Sie die Anforderungen Iterierbares Protokoll?

Um ein iterierbares Objekt zu werden, muss ein Objekt die @@iterator-Methode implementieren.

Das bedeutet, dass das Objekt (oder ein Objekt in seiner Prototypenkette) eine Eigenschaft mit dem Schlüssel @@iterator haben muss, auf die über die Konstante Symbol.iterator zugegriffen werden kann

Das heißt, um das Iterierbare zu erfüllen Protokoll, dann muss Ihr Objekt eine Eigenschaft mit dem Schlüsselnamen Symbol.iterator haben, um es zu einem iterierbaren Objekt zu machen.

Iterator-Protokoll

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

迭代器协议

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

如何满足迭代器协议 ？

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

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

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

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

• 成为可迭代对象，即有一个 Symbol.iterator 属性
  （即可迭代协议：Symbol.iterator）
• 该迭代器对象返回一个 next() 方法，这个 next() 方法返回一个包含value 和 done
  Das Iterator-Protokoll definiert eine Standardmethode zum Erzeugen einer Folge von Werten, egal ob endlich oder unendlich.
Wenn eine begrenzte Anzahl von Werten vorhanden ist, wird nach der Iteration aller Werte ein Standardrückgabewert zurückgegeben.

Wie erfüllt man das Iteratorprotokoll?

Ihr Objekt muss mindestens eine next()-Methode implementieren, die ein Iteratorobjekt IteratorResult zurückgibt. Dieses Iteratorobjekt enthält zwei Eigenschaften done und ·value.

done:
False, wenn der Iterator den nächsten Wert in der Sequenz erzeugen kann.

wahr, wenn der Iterator die Iteration der Sequenz abgeschlossen hat.

Wert Der vom Iterator zurückgegebene Wert. Done kann weggelassen werden, wenn done wahr ist.

🎜🎜Dann beginnen wir mit der Anpassung eines Iterators. Das heißt, es gibt ein Symbol.iterator-Attribut🎜 (d. h. iterierbares Protokoll: Symbol.iterator)🎜🎜Das Iteratorobjekt gibt eine next()-Methode zurück, diese Die next()-Methode gibt ein Objekt zurück, das die Eigenschaften value und done enthält 🎜 (d. h. Iteratorprotokoll: return { next() { return { value, fertig } })🎜🎜

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

🎜colors ist jetzt ein nicht iterierbares Objekt. Wir möchten for...of verwenden, um es zu durchlaufen, dann können wir den Iterator anpassen. 🎜 Als nächstes beginnen Sie mit der Implementierung: 🎜

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

🎜Lassen Sie es uns überprüfen: 🎜

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

🎜🎜🎜🎜🎜[Verwandte Empfehlungen: 🎜Javascript-Lern-Tutorial🎜🎜]🎜🎜

Das obige ist der detaillierte Inhalt vonVerstehen Sie in zehn Minuten, was ein JavaScript-Iterator ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!