序文多くの初級フロントエンド開発者が中級レベルに近づくにつれ、面接でよく聞かれることの 1 つがイテレータとジェネレータです。実際、彼らは開発でそれらを使用してはいますが、それが何なのかを知らなかったり、ある程度理解していても深く理解していなかったりします。この記事はこれらの開発者にとって役立ち、イテレータをわかりやすく説明します。 以前のバージョン反復処理について知っておく必要があります。反復処理は単純にループとして理解できます。JavaScript では、カウントされたループが最も単純です。例: for(i = 0; i < 9; ++i){ console.log("[ i ]", i); } 反復の基礎はループであり、これにはいくつかの必要な条件が含まれます。
配列をループする必要がある場合、反復は順序付けられたコレクションに対して実行されます。「順序付けられた」とは、配列内のすべての要素を最初の項目から最後の項目まで順番に走査できることを意味します。配列の長さは固定されており、各項目はインデックスの添え字によって取得できるため、配列全体をインデックスで走査できます。例: 定数 arr = ["a", "b", "c"]; for(let i = 0; i < arr.length; ++i){ コンソールにログ出力します。 } ただし、このモードでは、配列などの使用されるデータ構造を事前に知っておく必要があります。別のデータ型や暗黙的な順序を持つデータ構造に置き換えられると、トラバースの順序を決定できなくなります。 そこで、ES5 では forEach() メソッドが追加されました。例: 定数 arr = ["a", "b", "c"]; arr.forEach(item=>{ console.log(アイテム); }); このメソッドは、単一の項目の値をトラバースして取得するために同じ配列インデックスを使用する必要はありませんが、反復処理の終了をマークできないため、配列のトラバースにのみ適用できます。これらの問題を解決するために、ES6 以降、JavaScript はイテレータ モードをサポートしています。 イテレータパターンイテレータ パターンは非常に抽象的な用語です。これは、要素が限定され、独立しており、明確な配列やコレクションなどのオブジェクトとして理解できます。 Little Red Book からの説明を引用すると、次のようになります。
イテレータファクトリ関数反復子ファクトリ関数 Symbol.iterator() は、ほとんどの組み込み型のデフォルト プロパティです。Iterable インターフェイス (反復可能プロトコル) を公開します。つまり、データ型が反復をサポートする場合、その型は反復可能プロトコルをサポートする必要があります。 ECMAScript では、公開されるデフォルトのイテレータはキーとして「Symbol.iterator」を使用し、新しいイテレータを返す必要があると規定されています。デフォルトのイテレータ プロパティが存在するかどうかを確認する方法も簡単です。例: 定数obj = {}; 定数 arr = ["a", "b", "c"]; console.log(obj[Symbol.iterator]); // 未定義 console.log(arr[Symbol.iterator]); // f values() { [ネイティブコード] } console.log(arr[Symbol.iterator]()); // 配列イテレータ {} もちろん、実際の開発ではイテレータ ファクトリ関数を明示的に呼び出す必要はありません。反復可能プロトコルをサポートするデータ型は、反復可能オブジェクトを受け入れるすべての言語機能と自動的に互換性があります。たとえば、ループ、for-of、分解、拡張演算子を使用すると、提供された反復可能オブジェクトのイテレータ ファクトリ関数がバックグラウンドで自動的に呼び出され、反復子が作成されます。 イテレータプロトコルイテレータ プロトコルでは、イテレータは 1 回限りのオブジェクトであると規定されています。イテレータ ファクトリ関数が呼び出されると、 next() メソッドが返されます。このメソッドは、成功した反復ごとに呼び出され、次の反復の値を取得します。呼び出されない場合、反復の現在の位置は不確定です。 next() メソッドは、done と value の属性を含むオブジェクトを返します。done は、next() メソッドを呼び出して次の値を取得できるかどうか、つまり「使い果たされた」かどうかを示します。ブール値を返します。value は、反復可能なオブジェクトの次の値を示します。 done が true の場合、値は不足しています。 done が false の場合、次の反復を呼び出し続けます。例: // 反復可能なオブジェクト let arr = ['foo', 'bar']; // 反復子ファクトリー関数 console.log(arr[Symbol.iterator]); // f values() { [ネイティブコード] } // イテレータ let iter = arr[Symbol.iterator](); console.log(iter); // 配列イテレータ{} // 反復処理を実行する console.log(iter.next()); // { done: false, value: 'foo' } console.log(iter.next()); // { 完了: false、値: 'bar' } console.log(iter.next()); // { 完了: true、値: undefined } 最後にイテレータ プロトコルを使用すると、イテレータを反復処理できる回数を指定したり、反復処理を早期に終了したりするなど、カスタム イテレータを実装できます。 ECMAScript のイテレータに関するこの記事はこれで終わりです。ECMAScript イテレータに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。皆様が今後も 123WORDPRESS.COM を応援してくれることを願っています。 |
<<: nginx を介して方向プロキシを実装するプロセスの図
>>: MySQL InnoDB のトランザクション特性を確保するにはどうすればよいですか?
目次導入クッキークッキーとはクッキー生成方法クッキーの適用シナリオクッキーのデメリット回避策ローカル...
目次トピック分析する使用目的解決:コードは次のように実装されます。分析:配列とポインタ解決:コードは...
インストール中に遭遇した問題を記録しておきますので、皆様のお役に立てれば幸いです。 1. ダウンロー...
Antd+react+webpackは、多くの場合、Reactテクノロジースタックに基づくフロントエ...
1. モバイル端末がリストスライドを処理するとき、WeChat には下部にページに戻るボタンが組み...
目次0x01. パゴダパネルをインストールする0x02. サーバーポートを開く0x03. ブラウザを...
序文MySQL の権限テーブルは、データベースの起動時にメモリにロードされます。ユーザーが ID 認...
Gitlab と Github の違いについては、あまり説明する必要はありません。一言でまとめると、...
mysqlbinlogのバージョンを表示mysqlbinlog -V [--version] bin...
序文コードを書くと、時々基数変換の問題に遭遇します。一般的な変換には、2進数、8進数、10進数、16...
Zabbix バージョン 3.0 以降、Zabbix サーバー、Zabbix プロキシ、Zabbix...
この記事では、vue-table の追加と削除の具体的なコードを参考までに紹介します。具体的な内容は...
Docker Toolbox は、Windows 10 Professional より前のバージョン...
目次序文1.nullでない2. ユニーク3. デフォルト4.主キー自動増分主キー5. 外部キー6.チ...
私はこのようなバグを典型的な「ハムレット」バグと呼んでいます。これは、「エラーメッセージは同じだが、...