Javascriptのジェネレータ関数とyieldキーワード

注文

Javascript で誰もが最も議論するのは、非同期プログラミングの操作と、コールバックの多重ネストを回避する方法です。非同期操作のコールバックが多数ネストされると、コードが肥大化するだけでなく、エラーも発生しやすくなります。有名な Promise 社など、さまざまな非同期プログラミング ソリューションが常に提案されています。今日説明するジェネレーターとyieldは非同期プログラミングに関連しており、非同期プログラミングの同期に役立ちます。

ジェネレーターの概要

ジェネレーターは、関数と関数名の間に余分な * があることを除いて、フォーム上の関数に似ています。 yield キーワードはジェネレーター内で使用する必要があります。例:

function * gen(){ var result1 = yield 'hello'; var result2 = yield 'world'; return result1 + result2; }

ジェネレーター関数が呼び出されると、関数内のコードは実行されませんが、next メソッドを含むトラバーサーが返されます。次のメソッドが実行されるたびに、Generator 関数本体は実行を開始し、yield ステートメントに到達してステートメントを実行し、ここで一時停止します。使用法は次のとおりです。

var g = gen(); g.next(1); //{value : 'hello', done : false} g.next(2); //{value : 'world', done : false} g.next(); //{value : 3, done: true} g.next(); //{value : undefined, done: true}

next メソッドを呼び出すと、オブジェクトが返されます。このオブジェクトには、value と Done という 2 つの属性が含まれています。Value は、現在の yield ステートメントの値です。 Done は、ジェネレーター関数本体が実行されたかどうかを示します。次のメソッドはパラメーターも受け入れます。このパラメーターは、yield ステートメントの戻り値として使用され、後続のプログラムで使用できます。プログラムの実行が終了するか、return ステートメントに遭遇すると、value は関数本体の戻り値となり、done は true になります。この時点で、次のメソッドが再度実行されると、value は未定義になり、done は true のままになります。

トラバーサルにおけるジェネレーターの応用

js では、配列をトラバースしたい場合、for...of のようなステートメントを使用してトラバースできます。これは、実際には配列にジェネレーター トラバーサーが含まれているためです。自己定義オブジェクトにトラバーサも含まれている場合は、for...of などのトラバーサル ステートメントを通じてカスタム オブジェクトをトラバースできます。このイテレータは、Symbol.iterator プロパティに保存されます。

var myArray = { 0: '你', 1: '的', 2: '名字', length: 3 }; myArray[Symbol.iterator] = function * (){ for(var i = 0; i < this.length; i++) { yield this[i]; } }; for(var item of myArray) { console.log(item); } //你 //的 //名字

非同期プログラミングにおけるジェネレーターの応用

Javascript の核心は非同期プログラミングであり、各非同期操作は実行結果を返すコールバック関数を提供します。いくつかの操作があり、後の操作が前の操作の結果に依存するとします。

step1(function(value1) { step2(value1, function(value2) { step3(value2, function(value3)) { //some code } }); })

このようなコードでは、ネストされたコールバックの数が増えると、プログラムが非常に理解しにくくなります。私たちがしなければならないのは、コールバックをフラット化することです。 Promise オブジェクトには、上記の操作を約束します。

step1().then(function(value1){ return step2(value1); }).then(function(value2){ return step3(value2); }).then(function(){ //some code })

入れ子が少なくなっていることがわかりますが、これは、非同期操作を同期操作に変えることができる場合、つまり、入れ子なしで行うことができる場合には、最も理想的な解決策ではありません。プログラムが理解しやすくなります。ジェネレーター機能はそのような機会を提供します。

function *workflow(){ var value1 = yield step1(); var value2 = yield step2(); var value3 = yield step3(); //some code }

これが私たちが望む結果であり、非同期プログラミング プログラムは同期プログラミングの形式です。次に行う必要があるのは、このジェネレーターを実行させることなので、エグゼキューターが必要です。 co はエグゼキュータであり、Generator を自動的に実行できます。

co(function *workflow(){ var value1 = yield step1(); var value2 = yield step2(); var value3 = yield step3(); //some code });

co には制限があります。yield ステートメントの後には Promise オブジェクトまたは Thunk 関数のみを続けることができます。co の詳細については、Ruan 先生の記事「co 関数ライブラリの意味と使用法」を参照してください。ただし、この方法でも外部ライブラリ関数に依存する必要があるため、ES6 では async および await キーワードが提案されました。 async と await は実際には Generator の構文シュガーです。専用のアクチュエーターが付属しているだけです。上記のコードを非同期形式に書き換えます:

async function workflow(){ var value1 = await step1(); var value2 = await step2(); var value3 = await step3(); //some code } var result = workflow();

async没有了co的限制。await关键字后面可以跟 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。