JavaScript イテレータとは何かを 10 分で理解する

WBOY
リリース: 2021-12-22 18:20:23
転載
4035 人が閲覧しました

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

JavaScript イテレータとは何かを 10 分で理解する

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

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

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

let arr = [1,2,3,4,5];for (let val of arr) {
    console.log(val);}
ログイン後にコピー

JavaScript イテレータとは何かを 10 分で理解する


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() メソッドは valuedone を含むオブジェクトを返します プロパティのオブジェクト
    (つまり、イテレータ プロトコル: 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 イテレータとは何かを 10 分で理解する

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

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

関連ラベル:
ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート