イテレータインターフェイスと...の

まず、ES6には、クラス（クラス関連）、promise、モジュール（モジュラー）の3つの最も重要な部分があります。
私は主にpromiseについて話します。promiseとは何か、どのような問題が解決されるかという一連の知識があります。次に、promiseの最終的な解決策はasync awaitです。同時に、async awaitの起源はジェネレーターであり、ジェネレーターは接続されているイテレータを生成します。目が覚めました。

イテレータを紹介するために、最初にいくつかのことを書きました。

var arr = [1, 2, 3, 4]
        var str = 'abc'
        var obj = {
    
     a: 1, b: 2 }

        for (var i = 0; i < arr.length; i++) {
    
    
            console.log(arr[i]);
        }

        for (var i = 0; i < str.length; i++) {
    
    
            console.log(str[i]);
        }

        arr.forEach(i => console.log(i))

        for (var k in obj) {
    
    
            console.log(k, obj[k]);
        }

これらはいくつかの一般的なデータ型であるため、これらのデータをトラバースする必要がある場合は非常に面倒です。データ型が異なれば、トラバーサル方法も異なります。したがって、統一されたトラバーサルメソッドを使用するために、反復があり、構文のfor ... ofがes6に追加されます。

		var arr = [1, 2, 3, 4]
        var str = 'abc'
        var obj = {
    
     a: 1, b: 2 }

		for (let i of arr) {
    
    
            console.log(i);
        }
        for (let i of str) {
    
    
            console.log(i);
        }
        for (let i of obj) {
    
    //报错
            console.log(i);
        }

しかし、出力後、配列と文字列の両方が機能することがわかりましたが、オブジェクトには次のエラーがないため、オブジェクトはエラーを報告します：
ここに画像の説明を挿入します
イテレータインターフェイス
。イテレータはそのようなメカニズムです。これは、さまざまな異なるデータ構造に統合されたアクセスメカニズムを提供するインターフェイスです。Iteratorインターフェースがデプロイされている限り、どのデータ構造でもトラバーサル操作を完了することができます（つまり、データ構造のすべてのメンバーを順番に処理します）。

Iteratorには3つの機能があります。1つはさまざまなデータ構造に統一されたシンプルなアクセスインターフェイスを提供すること、もう1つはデータ構造のメンバーを特定の順序で配置できるようにすること、3つ目はES6が次の新しいトラバーサルコマンドを作成することです。 …ループの場合、イテレータインターフェイスは主に…消費のために使用されます。

このメソッドを印刷してみましょう：

	 var inter = arr[Symbol.iterator]()
        console.log(inter);

ここに画像の説明を挿入します
上記の次のメソッドを呼び出すとき

inter .next() // { value: 1, done: false }
inter .next() // { value: 2, done: false }
inter .next() // { value: 3, done: false }
inter .next() // { value: 4, done: false }
inter .next() // { value: undefined, done: true }

だから：イテレータのトラバーサルプロセスはこのようなものです。

（1）現在のデータ構造の開始位置を指すポインタオブジェクトを作成します。言い換えると、イテレータオブジェクトは本質的にポインタオブジェクトです。

（2）ポインタオブジェクトのnextメソッドを初めて呼び出すときは、データ構造体の最初のメンバーを指すようにポインタを指定できます。

（3）ポインタオブジェクトの次のメソッドへの2番目の呼び出しであるポインタは、データ構造の2番目のメンバーを指します。

（4）データ構造の終わりを指すまで、ポインタオブジェクトの次のメソッドを呼び出し続けます。

次のメソッドが呼び出されるたびに、データ構造の現在のメンバーに関する情報が返されます。具体的には、valueとdoneの2つの属性を含むオブジェクトを返します。その中で、value属性は現在のメンバーの値であり、done属性はトラバーサルが終了したかどうかを示すブール値です。

実際、この方法をシミュレートできます。

  function makeIter(arr) {
    
    
            let index = 0
            return {
    
    
                next() {
    
    
                    if (index < arr.length) {
    
    
                        return {
    
     value: arr[index++], done: false }
                    }
                    return {
    
     value: undefined, done: true }
                }
            }
        }

これがイテレータの原則です

拡張機能の補足：
ネイティブIteratorインターフェースを使用したデータ構造は次のとおりです。

配列
マップ
セット
文字列
TypedArray
関数の引数オブジェクト
NodeListオブジェクト

イテレータインターフェイスと...の

おすすめ