ES6 ジェネレーターの使い方の紹介 (例付き)

この記事では ES6 ジェネレーターの使い方を紹介します (サンプル付き)。一定の参考価値があります。困っている友人は参考にしてください。お役に立てれば幸いです。

コンセプト

ジェネレーターはジェネレーター関数 (ジェネレーター関数) を実行することで取得され、反復可能です。

function* gen() { 
  yield 'a';
  yield 'b';
  yield 'c';
}

let g = gen(); 
// "Generator { }"

原理と簡単なアプリケーション

ジェネレーターには優れた機能があり、実行中の内部コードを一時停止して、外部関数に値を返すことができます。 (一時停止後、他のコードの実行が妨げられることはありません。) 次のメソッドが外部から呼び出されると、残りのコードの実行が続行され、外部からのパラメーターを受け取ります。この実装は主にキーワード yield に依存します。

yield キーワードにより、ジェネレーター関数の実行が一時停止され、yield キーワードに続く式の値がジェネレーターの呼び出し元に返されます。これは、return キーワードのジェネレータベースのバージョンと考えることができます。

function* g(){
    var a = yield 2;
    console.log(a);
}

var it = g(); // 返回一个可迭代的生成器对象
console.log(it.next()); // 执行生成器函数内部代码，第一次返回 {done: false, value: 2}
it.next(3); // 继续执行生成器函数内部代码，同时向生成器传递参数3，最后返回 {done: true, value: undefined}

単純なカウンター

function* count(){
    var n = 1;
    while(true){
        yield n++;
    }
}

var it = count();
it.next(); // 1
it.next(); // 2
it.next(); // 3

非同期コードを同期的に記述する

これまでは、非同期 Ajax リクエストの結果が発生していました。処理された場合、通常はコールバック関数を渡す方法を使用します。複数レベルのコールバックのネストが発生すると、コードの可読性が低下し、デバッグが不便になります。ジェネレーターを使用すると、同期的な方法で非同期コードを作成できます。これはとても興味深いですね。私たちのコードは次のようになります

function foo(){
    var result = asyncFun(); // asyncFun 是异步函数，result 是异步返回的结果
    console.log(result);
}

もちろん、上記のコードは正しい結果を取得しません。これは単なるアイデアです。ジェネレーターを使用してそれを実行しますが、それは機能します。ジェネレーターの特性について考えてみましょう。

1. 一時停止して外部に値を返すことができます
2. 残りのコードを実行し続け、外部からパラメーターを受け入れることができます ## ＃＃ ＃＃＃＃＃もういい。ジェネレーター関数を配置したら、コードを再設計します。

function* foo(){
    // 这里遇到了异步方法，必须停下来。
    // 等待异步方法执行完毕，并返回结果，继续运行代码。当然，同步 ajax 不能算，它不是异步
    // 输出结果
}

座って、一時停止と続行に関連するキーワードについて考えてください。やめて…続けて…やめて…続けて…やめて…続けて…

やめて…やめて…やめて…やめて…だめ...Stop

...これら 2 つの単語は

yield、next.

function *foo(){
    var result = yield asyncFun(next);
    console.log(result);
}

コードが ## に遭遇すると #yield になります。このとき、asyncFun

関数は一時停止されませんが、実行されます。実行が完了すると、ジェネレーターの next メソッドが呼び出され、リターンが行われます。結果は次のようになります。パラメータは next に渡されます。ジェネレーター関数内で next を取得できないため、グローバル変数を使用して next を渡す必要があります。

var next, gn;

function asyncFun(next){
    // 模拟异步请求
    setTimeout(function(){
        // 返回一个随机数
        next(Math.random())
    }, 1000)
}

function* foo(){
    var result = yield asyncFun(next);
    console.log(result);
}

gn = foo();
next = gn.next.bind(gn);
next(); // 打印随机数

こうして書くと、走るのはちょっと重そうです。ラッパー関数を作成して、非同期コードを含むジェネレーター関数を実行できます。

function asyncFun(next){
  // 模拟异步请求
  setTimeout(function(){
    // 返回一个随机数
    next(Math.random())
  }, 1000)
}

function* foo(){
  var result = yield function(next){asyncFun(next)};
  console.log(result);
}



function wrapFun (gFn){
  var gn = foo(),
      next = gn.next.bind(gn);
  next().value(next);
}

wrapFun(foo);

デモアドレス

ただし、Promise と

await

がリリースされて以来、この組み合わせはより頻繁に使用されます。使用方法も簡単になり、その範囲も広がります。

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