ES6ジェネレーターとイテレーター：開発者ガイド

ES6は、JavaScript言語に多くの新機能を導入しました。これらの機能の2つ、ジェネレーターとイテレーターは、より複雑なフロントエンドコードで特定の機能を作成する方法を大きく変更しました。

彼らはうまく機能しますが、実際の機能は少し混乱する可能性がありますので、詳しく見てみましょう。

キーポイント

• ES6は、ループ用のよりクリーンな書き込み方法を提供し、データセット内の要素と直接対話するためのよりPythonのような方法を提供し、コードを読みやすくしやすくします。
• ES6のジェネレーターは、各呼び出しの間の状態を覚えている関数です。彼らは呼び出されるたびにシーケンスで次の値を生成し、カスタムイテレーションを効果的に作成できます。
• ジェネレーター関数の「evels」キーワードは「return」に似ていますが、関数の状態を保持し、次の呼び出しで割り込みから実行を継続できるようにします。
• ノードと最新のブラウザはES6機能をサポートしていますが、古いブラウザーでは、BABELなどの翻訳者がES6コードをECMAScript 5コードに変換する必要がある場合があります。

iterator

反復はプログラミングにおける一般的な慣行であり、通常、一連の値をループしたり、各値を変換したり、後で使用するために何らかの方法で使用または保存するために使用されます。

JavaScriptでは、私たちは常にループ用のようなものを持っています：

for (var i = 0; i < foo.length; i++) {
  // 对i执行某些操作
}

しかし、ES6は別のオプションを提供します：

for (const i of foo) {
  // 对i执行某些操作
}

これは間違いなくより簡潔で使いやすく、PythonやRubyのような言語を思い出させます。ただし、この新しい反復について注意すべき非常に重要なことがもう1つあります。データセットの要素と直接対話することができます。

配列内の各番号が素数であるかどうかを確認したいとします。これを行う関数を作成することでこれを行うことができます。このように見えるかもしれません：

function isPrime(number) {
  if (number <= 1) {
    return false;
  } else if (number === 2) {
    return true;
  }

  for (var i = 2; i < number; i++) {
    if (number % i === 0) {
      return false;
      break;
    }
  }

  return true;
}

世界では最高ではありませんが、うまくいきます。次のステップは、数字のリストをループして、光沢のある新しい関数を使用して各番号がプライムかどうかを確認することです。とても簡単です：

var possiblePrimes = [73, 6, 90, 19, 15];
var confirmedPrimes = [];

for (var i = 0; i < possiblePrimes.length; i++) {
  if (isPrime(possiblePrimes[i])) {
    confirmedPrimes.push(possiblePrimes[i]);
  }
}

// confirmedPrimes现在是[73, 19]

繰り返しますが、それは機能しますが、不器用であり、この不器用は、JavaScriptがループの処理方法に大きく依存します。ただし、ES6を使用すると、新しいイテレーターにほぼPythonのようなオプションが表示されます。したがって、以前のループは次のように書くことができます：

const possiblePrimes = [73, 6, 90, 19, 15];
const confirmedPrimes = [];

for (const i of possiblePrimes){
   if ( isPrime(i) ){
      confirmedPrimes.push(i);
   }
}

// confirmedPrimes现在是[73, 19]

これははるかにきれいですが、最も印象的なことはループのためです。現在、Iの変数は、可能性のある名前という名前の配列内の実際のアイテムを表しています。したがって、インデックスでそれを呼び出す必要はもうありません。これは、ループで[i]を呼び出す必要はないことを意味しますが、iを呼び出すだけです。

舞台裏では、この反復によりES6の光沢のある新しいSymbol.iterator（）メソッドが活用されます。この方法は反復を記述する責任があり、呼び出されると、ループの次の値を含むJavaScriptオブジェクトと、ループが完了するかどうかに応じてtrueまたはfalseです。

この詳細に興味がある場合は、Jake Archibaldのこの素晴らしいブログ投稿「Iterators Gongent Iterate」を読むことができます。この記事の別の部分であるジェネレーターを掘り下げるにつれて、舞台裏で何が起こっているのかについても良いアイデアを提供します。

ジェネレーター

ジェネレーター（「Iter Factory」とも呼ばれます）は、特定の反復を作成するために使用される新しいタイプのJavaScript関数です。コンテンツをループする特別なカスタム方法を提供します。

わかりました、それはどういう意味ですか？例を見てみましょう。関数が必要であり、それを呼ぶたびに、次の素数が与えられるとします：

for (var i = 0; i < foo.length; i++) {
  // 对i执行某些操作
}

JavaScriptに慣れている場合、このようなものの一部は魔術のように見えますが、実際にはそれほど悪くはありません。キーワード関数の後に奇妙なアスタリスクがありますが、ジェネレーターを定義していることをJavaScriptに伝えています。

別の奇妙な部分は、収量キーワードです。これは、実際に発電機がそれを呼ぶときに吐き出すものです。返すのはほぼ同等ですが、呼び出されるたびにすべてを再実行するのではなく、関数の状態を保持します。実行時にその位置を「覚えている」ので、次にそれを呼ぶとき、それは割り込みから続きます。

これは、これを行うことができることを意味します：

for (const i of foo) {
  // 对i执行某些操作
}

それから、私たちが取得したいときはいつでも - あなたはそれを推測しました - 次の主要な数字、私たちはnextprimeを呼び出すことができます：

function isPrime(number) {
  if (number <= 1) {
    return false;
  } else if (number === 2) {
    return true;
  }

  for (var i = 2; i < number; i++) {
    if (number % i === 0) {
      return false;
      break;
    }
  }

  return true;
}

nextprime.next（）を呼び出すこともできます。これは、ジェネレーターがこのようなオブジェクトを返すため、発電機が無限でない場合に役立ちます。

ここで、完了キーは、関数がタスクを完了したかどうかを示します。私たちの場合、私たちの機能は決して終わりません。これにより、理論的にはすべての素数が無限まで与えます（コンピューターメモリがたくさんある場合）。

var possiblePrimes = [73, 6, 90, 19, 15];
var confirmedPrimes = [];

for (var i = 0; i < possiblePrimes.length; i++) {
  if (isPrime(possiblePrimes[i])) {
    confirmedPrimes.push(possiblePrimes[i]);
  }
}

// confirmedPrimes现在是[73, 19]

かっこいいので、今すぐ発電機とイテレーターを使用できますか？

ECMAScript 2015をサポートするオンライン編集者も、特にFacebookの再生者とJSビンに焦点を当てているオンラインエディターもたくさんあります。 JavaScriptが現在どのように書かれているかをプレイして学びたいだけなら、これらは一見の価値があります。

結論

ジェネレーターとイテレーターは、JavaScriptの問題へのアプローチに対して非常に多くの新しい柔軟性を提供します。イテレーターを使用すると、ループをよりPythonのような方法で書き込むことができます。つまり、コードはよりクリーンで読みやすく見えます。

ジェネレーター関数を使用すると、最後に見られた場所を覚えている関数を記述し、割り込みから実行を継続できます。また、実際に覚えていることの点で無限になることもありますが、場合によっては非常に便利です。

これらのジェネレーターとイテレーターのサポートは良いです。インターネットエクスプローラーを除き、ノードおよびすべての最新のブラウザでサポートされています。古いブラウザをサポートする必要がある場合は、最良の方法はBabelのような翻訳者を使用することです。

ECMAScript 2015ジェネレーターとイテレーター（FAQ）

に関する FAQ

ecmascript 2015の反復因子とジェネレーターの違いは何ですか？

iteratorsとジェネレーターはどちらもECMAScript 2015の機能であり、データフローの処理に使用されます。イテレーターは、プログラマーがコレクション内のすべての要素を反復することを可能にするオブジェクトです。次のアイテムをシーケンスで返す次の（）メソッドがあります。一方、ジェネレーターは、途中で停止してから停止から続行できる関数です。言い換えれば、発電機は関数のように見えますが、イテレーターのように動作します。

eviedキーワードは、ecmascript 2015の一時停止および復元ジェネレーター関数（関数*またはレガシージェネレーター関数）に使用されます。利回りは、ジェネレーター関数から値を返すことができます。この返品値は通常、値と完了の2つのプロパティを持つオブジェクトです。値属性は、降伏式を計算した結果であり、完了は、発電機が最後の値を生成したかどうかを示すブール値です。

ECMAScript 2015の次の（）メソッドの目的は何ですか？

次（）メソッドは、ECMAScript 2015のIteratorプロトコルの重要な部分です。値と完了の2つのプロパティを持つオブジェクトを返します。値属性は反復シーケンスの次の値であり、実行されたものは、反復が完了したかどうかを示すブール値です。完了した場合、イテレーターは反復シーケンスの終了を超えています。

ループの…とecmascript 2015のループの違いは何ですか？

ecmascript 2015では、次の（）メソッドを使用してオブジェクトを定義することにより、カスタムイテレーターを作成できます。この方法は、値と完了の2つのプロパティを持つオブジェクトを返す必要があります。値属性は反復シーケンスの次の値であり、実行されたものは、反復が完了したかどうかを示すブール値です。

ecmascript 2015のsymbol.iteratorの役割は何ですか？

Symbol.iteratorは、ECMAScript 2015の特別な組み込みシンボルです。オブジェクトのデフォルトのイテレータを指定するために使用されます。オブジェクトを繰り返す必要がある場合（たとえば、loopのforの先頭に）、その@@ iteratorメソッドは引数なしで呼び出され、返されたイテレーターは値を繰り返すために使用します。

ECMAScript 2015でジェネレーター関数の例を提供できますか？

もちろん、これはECMAScript 2015のジェネレーター関数の簡単な例です。

この例では、IDMaker関数は、一連の数字を生成するジェネレーターです。

for (var i = 0; i < foo.length; i++) {
  // 对i执行某些操作
}

ECMAScript 2015でThro（）メソッドとジェネレーターを使用する方法は？

ECMAScript 2015のTHRO（）メソッドをジェネレーターで使用して、発電機関数の実行を復元し、降伏式からエラーを投げることができます。 Thro（）メソッドは、発電機関数の実行中に発生するエラーを処理するために使用できます。

ECMAScript 2015 IteratorのDONE属性の重要性は何ですか？

実行されたプロパティは、ECMAScript 2015のIteratorによって返されるブール値です。 Iteratorがより多くの値を返すかどうかを示します。完了した場合、イテレーターは反復シーケンスの終了を超えています。完了した場合、イテレーターはさらに多くの値を生成できます。

以上がES6ジェネレーターとイテレーター：開発者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。