ES6ジェネレーターの基本的な使い方

この記事の例では、ES6 ジェネレーターの基本的な使用方法について説明します。参考のために皆さんと共有してください、詳細は次のとおりです:

1. ジェネレーターの紹介

ジェネレーターの基本コードから始めましょう

function* g(){
 yield 100;
 yield 200;
 return 300;
}
let gg = g();
console.log(gg);            // Object [Generator] {}
console.log(gg.next());        // { value: 100, done: false }
console.log(gg.next());        // { value: 200, done: false }
console.log(gg.next());        // { value: 300, done: true }
console.log(gg.next());        // { value: undefined, done: true }

まず、次のことを確認します。

• Generator は functinon* によって定義され、yield はジェネレーター内で使用できます

• Generator は関数ではなくオブジェクトであり、すべての操作を直接実行するのではなく、実行の開始時に一時停止状態に入ります。

• next() を使用して次の操作を実行します。戻り値はすべて {value: xxx の形式になります。 、done: xxx}、値は最後の時間を表します。操作によって返される値、done には 2 つの値があり、1 つは true、もう 1 つは false で、プロセス全体が完了したかどうかを示します。

2. ジェネレーターの非同期プログラミング

ジェネレーターは ES6 で導入された非同期ソリューションです。非同期処理の Promise との比較を見て、その違いを見てみましょう。

// 这里模拟了一个异步操作
function asyncFunc(data) {
 return new Promise( resolve => {
  setTimeout(
   function() {
    resolve(data)
   },1000
  )
 })
}

Promise の処理メソッド:

asyncFunc("abc").then( res => {
 console.log(res);                    // "abc"
 return asyncFunc("def")
}).then( res => {
 console.log(res);                    // "def"
 return asyncFunc("ghi")
}).then( res => {
 console.log(res);                    // "ghi"
})

ジェネレーターの処理メソッド:

function* g() {
 const r1 = yield asyncFunc("abc");
 console.log(r1);                            // "abc"
 const r2 = yield asyncFunc("def");
 console.log(r2);                            // "def"
 const r3 = yield asyncFunc("ghi");
 console.log(r3);                            // "ghi"
}

let gg = g();
let r1 = gg.next();
r1.value.then(res => {
 let r2 = gg.next(res);
 r2.value.then(res => {
  let r3 = gg.next(res);
  r3.value.then(res => {
   gg.next(res)
  })
 })
})

Promise の複数のコールバックはより複雑に見え、コードは十分に簡潔ではありません。ジェネレーターは以下を調べます。非同期処理 一見同期に見えるコードは実は非同期処理です 処理が比較的複雑なだけです 非同期処理を 1 つだけ実行する場合はジェネレータの方が適しています

3.yield と yield*

最初に 2 つのコードを見てみましょう

function* g1() {
 yield 100;
 yield g2();
 return 400;
}

function* g2() {
 yield 200;
 yield 300;
}

let gg = g1();
console.log(gg.next());                // { value: 100, done: false }
console.log(gg.next());                // { value: Object [Generator] {}, done: false }
console.log(gg.next());                // { value: 400, done: true }
console.log(gg.next());                // { value: undefined, done: true }

function* g1() {
 yield 100;
 yield* g2();
 return 400;
}

function* g2() {
 yield 200;
 yield 300;
}

let gg = g1();
console.log(gg.next());                // { value: 100, done: false }
console.log(gg.next());                // { value: 200, done: false }
console.log(gg.next());                // { value: 300, done: false }
console.log(gg.next());                // { value: 400, done: true }

yield は別のジェネレーターを走査せず、反復子オブジェクトを返しますが、yield *ジェネレーターは走査され、反復されます。

推奨チュートリアル: 「JS チュートリアル 」

以上がES6ジェネレーターの基本的な使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。