ホームページ > 記事 > ウェブフロントエンド > js デザイン パターン: イテレータ パターンとは何ですか? JSイテレータパターンの紹介
この記事では、JS デザイン パターンに関するコンテンツをお届けします: イテレータ パターンとは何ですか? js イテレータ モードの導入には一定の参考価値があります。必要な方は参考にしていただければ幸いです。
定義: オブジェクトの内部表現を公開せずに、集約オブジェクト内の各要素に順次アクセスするメソッドを提供します。
主な解決策: 統合オブジェクト全体を横断するさまざまな方法。
いつ使用するか: 集合オブジェクトを走査します。
解決方法: 要素間を移動する責任を、集約オブジェクトではなくイテレーターに置きます。
キーコード: 定義インターフェース: 完了しました、次へ。
反復子パターンの利点: 1. さまざまな方法での集合オブジェクトの走査をサポートします。 2. イテレータは集約クラスを簡素化します。 3. 同じ集合体上で複数の走査が存在する可能性があります。 4. イテレータ モードでは、元のコードを変更せずに新しい集約クラスとイテレータ クラスを追加するのに非常に便利です。
イテレータ パターンの欠点: イテレータ パターンはデータの保存とデータの走査の役割を分離するため、新しい集約クラスを追加するには新しいイテレータ クラスを追加する必要があり、クラスの数はペアで増加し、一定の数になります。範囲が増えると、システムの複雑さが増加します。
イテレーター パターンの使用シナリオ: 1. 内部表現を公開せずに集約オブジェクトの内容にアクセスします。 2. 集約オブジェクトに対して複数のトラバーサル メソッドを提供する必要があります。 3. さまざまな集合構造を横断するための統一インターフェイスを提供します。
注: イテレータ パターンは、コレクション オブジェクトのトラバース動作を分離し、担当するイテレータを抽象化します。これにより、コレクションの内部構造が公開されないだけでなく、外部コードが透過的にコレクションの内部構造にアクセスできるようになります。データの収集。
function each(arr, fn) { for (let i = 0; i < arr.length; i++) { fn(i, arr[i]) } } each([1, 2, 3], function(i, n) { console.log(i) // 0 1 2 console.log(n) // 1 2 3})
内部イテレータが呼び出されるときは非常に単純であり、ユーザーは内部イテレータの実装の詳細を気にする必要がないことがわかりますが、これは内部イテレータの欠点でもあります。たとえば、2 つの配列が等しいかどうかを比較したい場合、コードは次のようになります。
const compare = function(arr1, arr2) { each(arr1, function(i, n) { if (arr2[i] !== n) { console.log('两数组不等') return } }) console.log('两数组相等') } const arr1 = [1, 2, 3] const arr2 = [1, 2, 3] compare(arr1, arr2) // 两数组相等
const iterator = function(arr) { let current = 0 const next = function() { current = current + 1 } const done = function() { return current >= arr.length } const value = function() { return arr[current] } return { next, done, value, } } const arr1 = [1, 2 ,3] const arr2 = [1, 2, 3] const iterator1 = iterator(arr1) const iterator2 = iterator(arr2) const compare = function(iterator1, iterator2) { while (!iterator1.done() && !iterator2.done()) { if (iterator1.value() !== iterator2.value()) { console.log('两数组不等') return } iterator1.next() // 外部迭代器将遍历的权利转移到外部 iterator2.next() } console.log('两数组相等') } compare(iterator1, iterator2)
関連する推奨事項:
js デザイン パターン: プロキシパターンとは何ですか? jsプロキシパターン入門
jsデザインパターン: ストラテジパターンとは何ですか? JS戦略パターンの紹介
以上がjs デザイン パターン: イテレータ パターンとは何ですか? JSイテレータパターンの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。