この記事では、JavaScript のイテレータに関する関連知識を提供します。イテレータとは何なのか、そしてそれをカスタマイズする方法を見てみましょう。皆さんのお役に立てれば幸いです。

1. イテレータとは何ですか?

• Iterator は、さまざまなデータ構造に統一されたアクセス メカニズムを提供するインターフェイス メカニズムです。 (つまり、トラバーサルをサポートしていない一部のデータ構造をトラバース可能にするため)

最も一般的なのは、配列内の値を順番に返す Array イテレータです。

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

2. カスタム反復子

それでは、どのように反復子を実装すればよいでしょうか?

まず、次の 2 つの点を満たす必要があります:

• 反復可能なプロトコル
• 反復子プロトコル

反復可能プロトコル

反復可能プロトコルを使用すると、JavaScript オブジェクトで反復動作を定義またはカスタマイズできます

反復可能プロトコルを満たすにはどうすればよいですか?

反復可能オブジェクトになるには、オブジェクトは @@iterator メソッドを実装する必要があります。
これは、オブジェクト (またはそのプロトタイプ チェーン上のオブジェクト) には、キー @@iterator を持つプロパティが必要であることを意味します。このプロパティには、定数 Symbol.iterator を通じてアクセスできます。

つまり、反復可能なプロトコルを満たすには、オブジェクトに Symbol.iterator という名前のキーを持つプロパティがあり、それを反復可能なオブジェクトにする必要があります。

イテレータ プロトコル

イテレータ プロトコルは、一連の値 (有限数または無限数) を生成する標準的な方法を定義します。
値の数が限られている場合、すべての値が反復された後、デフォルトの戻り値が返されます。

反復プロトコルを満たすにはどうすればよいでしょうか?

オブジェクトは、反復子オブジェクト IteratorResult を返す next() メソッドを少なくとも 1 つ実装する必要があります。この反復子オブジェクトには、done と ·value という 2 つのプロパティが含まれています。

• done:
  反復子がシーケンス内の次の値を生成できる場合は False。
  イテレータがシーケンスの反復を終了した場合は True
• value
  イテレータによって返される値。 Done が true の場合は Done を省略できます
  

次に、イテレータのカスタマイズを開始しましょう

上記のように、イテレータをカスタマイズしたい場合は、Iterator次の 2 つの条件を満たす必要があります:

• 反復可能なオブジェクトになります。つまり、Symbol.iterator 属性
  を持ちます (つまり、反復可能なプロトコル: Symbol.iterator)。 )
• イテレータ オブジェクトは next() メソッドを返します。この next() メソッドは value と done を含むオブジェクトを返します プロパティのオブジェクト
  (つまり、イテレータ プロトコル: return { next() { return { value, Done } })

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

colors は反復不可能なオブジェクトになりました。 use for... of がそれを走査すると、イテレータをカスタマイズできます。
次に、実装を開始します:

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

検証してみましょう:

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

[関連する推奨事項: javascript 学習チュートリアル]

以上がJavaScript イテレータとは何かを 10 分で理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。