ES6のジェネレーター機能の使い方の紹介

この記事では ES6 のジェネレーター機能の使い方を紹介します。参考になると思います。困っている友達は参考にしてください。お役に立てれば幸いです。

1. Generator 関数とは

Generator 関数は、ES6 標準で提案されている非同期プログラミング ソリューションです。この種の関数と通常の関数の最大の違いは、実行を一時停止したり、一時停止した位置から実行を再開したりできることです。

構文の観点から見ると、Generator 関数は多くの内部状態をカプセル化するステート マシンです。

本質的に、Generator 関数はトラバーサー オブジェクト ジェネレーターです。 (トラバーサー オブジェクトについては、Ruan Yifeng 先生の記事を参照してください。) Generator 関数はトラバーサー オブジェクトを返し、このオブジェクトをトラバースすることで、関数内の各状態を順番に取得できます。

2. 基本構文

1. ジェネレーター関数の定義

ジェネレーター関数の定義と通常の関数の定義の違いは次のとおりです:

function キーワードと関数名の間には * (アスタリスク) があります。
Yield は、各関数の内部状態を定義するために関数内で使用されます。
関数内に return ステートメントがある場合、それが関数内の最後の状態になります。

簡単な例を見てみましょう:

// 定义
function* sayHello() {
  yield 'hello';
  yield 'world';
  return 'ending';
}
// 调用
// 注意，hw获取到的值是一个遍历器对象
let g = sayHello();

上の例では、sayHello という名前のジェネレーター関数が定義されており、内部に 2 つの ## があります。 ## 式と return 式。したがって、関数内には hello、world、return ステートメント (実行終了) の 3 つの状態があります。最後に、この関数を呼び出してトラバーサー オブジェクトを取得し、それを変数 g に割り当てます。 ジェネレーター関数の呼び出し方法は通常の関数と全く同じで、

関数名()

です。違いは、

関数が呼び出された後、内部コード (最初の行から始まる) はすぐには実行されないことです。

• 関数が呼び出された後、戻り値が返されます。この値は、内部状態を指すポインタ オブジェクトです。本質的には、関数の内部状態を含むトラバーサ オブジェクトです。
• ジェネレーター関数は呼び出されてもすぐには実行されません。では、内部コードの実行を開始するにはどうすればよいでしょうか?その中のすべての状態を取得するにはどうすればよいでしょうか?この時点で、返されたジェネレーター オブジェクトの .next() メソッドを呼び出して、コードの実行を開始し、ポインターを次の状態に移動する必要があります。

上記の例を例として挙げます。

g.next();
// { value: 'hello', done: false }
g.next();
// { value: 'world', done: false }
g.next();
// { value: 'ending', done: true }
g.next();
// { value: undefined, done: true }

上記のコードでは、このトラバーサー オブジェクトの合計 4 回の

g

.next()メソッドと呼ばれます。初めて呼び出されたとき、sayHello ジェネレーター関数は実行を開始し、最初の yield 式に遭遇するまで実行は一時停止されます。 .next() メソッドは、value 属性が現在の yield 式 hello, の値であるオブジェクトを返します。 Done 属性の値は false で、トラバーサルが終了していないことを示します。

.next()

を 2 回目に呼び出すと、実行は 2 番目の yield 式に到達し、実行が一時停止され、対応するオブジェクトが返されます。

.next()

への 3 回目の呼び出しでは、関数は最後の return ステートメントまで実行され、トラバーサー オブジェクト ## のトラバースの終了を示します。 #g なので、返されたオブジェクトの value 属性値は、値 ending の後に return と done 属性が続きます。値は true で、トラバーサルが終了したことを示します。 .next() メソッドの 4 回目以降の呼び出しでは、{value: unknown、done: true }

が返されます。

2. Yield 式

Generator 関数によって返されるトラバーサー オブジェクトは、

.next()

メソッドを呼び出すことによってのみ次の内部状態に移動します。実際、実行を一時停止できる関数が提供されており、

yield 式は一時停止フラグです。 トラバーサー オブジェクトの .next()

メソッドの実行ロジックは次のとおりです。

yield

式に遭遇すると、後続の操作の実行を一時停止し、
1. yield の直後にある式の値を返します。 ## オブジェクトの属性値。 次回 .next() メソッドが呼び出されるとき、次の yield
式が見つかるまで実行が続行されます。
2. 新しい yield 式が見つからない場合は、関数の終わりまで return
ステートメントまで実行され、
3. return 値が返されます。ステートメントに続く式の value は、返されたオブジェクトの属性値として使用されます。 関数に return ステートメントがない場合、返されるオブジェクトの value
属性値は
4. undefine です。 ＃＃＃＃＃＃＃＃＃＃＃＃それは注目に値します： ＃＃＃＃＃＃<ol><li><strong><code>yield关键字只能出现在Generator函数中，出现在别的函数中会报错。

  // 出现在普通函数中，报错
  (function () {
    yield 'hello';
  })()

  // forEach不是Generator函数，报错
  [1, 2, 3, 4, 5].forEach(val => {
    yield val
  });

1. yield关键字后面跟的表达式，是惰性求值的。 只有当调用.next()方法、内部状态暂停到当前yield时，才会计算其后面跟的表达式的值。这等于为JavaScript提供了手动的“惰性求值”的语法功能。

function* step() {
  yield 'step1';

  // 下面的yield后面的表达式不会立即求值，
  // 只有暂停到这一行时，才会计算表达式的值。
  yield 'step' + 2;

  yield 'setp3';
  return 'end';
}

1. yield表达式本身是没有返回值的，或者说它的返回值为undefined。使用.next()传参可以为其设置返回值。（后面会讲到）

function* gen() {
  for (let i = 0; i < 5; i++) {
    let res = yield;  // yield表达式本身没有返回值
    console.log(res); // undefined
  }
}
let g = gen();
g.next();   // {value: 0, done: false}
g.next();   // {value: 1, done: false}
g.next();   // {value: 2, done: false}

yield与return的异同：

相同点:

• 两者都能返回跟在其后面的表达式的值。

不同点：

• yield表达式只是暂停函数向后执行，return是直接结束函数执行。
• yield表达式可以出现多次，后面还可以有代码。return只能出现一次，后面的代码不会执行，在一些情况下还会报错。
• 正常函数只能返回一个值，因为只能执行一次return。Generator函数可以返回一系列的值，因为可以有任意多个yield。

3、.next()方法传参

前面我们说到过，yield表达式自身没有返回值，或者说返回值永远是undefined。但是，我们可以通过给.next()方法传入一个参数，来设置上一个（是上一个）yield表达式返回值。

来看一个例子：

function* conoleNum() {
  console.log('Started');
  console.log(`data: ${yield}`);
  console.log(`data: ${yield}`);
  return 'Ending';
}
let g = conoleNum();

g.next();      // 控制台输出：'Started'

g.next('a');   // 控制台输出：'data: a'
// 不传入参数'a'，就会输出'data: undefined'

g.next('b');   // 控制台输出：'data: b'
// 不传入参数'a'，就会输出'data: undefined'

上面的例子，需要强调一个不易理解的地方。

第一次调用.next()，此时函数暂停在代码第三行的yield表达式处。记得吗？yield会暂停函数执行，此时打印它的console.log()，也就是代码第三行的console，由于暂停并没有被执行，所以不会打印出结果，只输出了代码第二行的'Started'。

当第二次调用.next()方法时，传入参数'a'，函数暂停在代码第四行的yield语句处。此时参数'a'会被当做上一个yield表达式的返回值，也就是代码第三行的yiled表达式的返回值，所以此时控制台输出'data: a'。而代码第四行的console.log()由于暂停，没有被输出。

第三次调用，同理。所以输出'data: b'。

4、Generator.prototype.throw()

Generator函数返回的遍历器对象，都有一个.throw()方法，可以在函数体外抛出错误，然后在Generator函数体内捕获。

function* gen() {
  try {
    yield;
  } catch (e) {
    console.log('内部捕获', e);
  }
};

var g = gen();
// 下面执行一次.next()
// 是为了让gen函数体执行进入try语句中的yield处
// 这样抛出错误，gen函数内部的catch语句才能捕获错误
g.next();

try {
  g.throw('a');
  g.throw('b');
} catch (e) {
  console.log('外部捕获', e);
}

上面例子中，遍历器对象g在gen函数体外连续抛出两个错误。第一个错误被gen函数体内的catch语句捕获。g第二次抛出错误，由于gen函数内部的catch语句已经执行过了，不会再捕捉到这个错误了，所以这个错误就会被抛出gen函数体，被函数体外的catch语句捕获。

值得注意的是：

• 如果Generator函数内部没有部署try...catch代码块，那么遍历器对象的throw方法抛出的错误，将被外部try...catch代码块捕获。
• 如果Generator函数内部和外部都没有部署try...catch代码块，那么程序将报错，直接中断执行。

遍历器对象的throw方法被捕获以后，会附带执行一次.next()方法，代码执行会暂停到下一条yield表达式处。看下面这个例子：

function* gen(){
  try {
    yield console.log('a');
  } catch (e) {
    console.log(e);   // 'Error'
  }
  yield console.log('b');
  yield console.log('c');
}
var g = gen();

g.next();   // 控制台输出：'a'

g.throw('Error');  // 控制台输出：'b'
// throw的错误被内部catch语句捕获，
// 会自动在执行一次g.next()

g.next();   // 控制台输出：'c'

5、Generator.prototype.return()

Generator函数返回的遍历器对象，还有一个.return()方法，可以返回给定的值，并且直接结束对遍历器对象的遍历。

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}
var g = gen();

g.next();        // { value: 1, done: false }

// 提前结束对g的遍历。尽管yield还没有执行完
// 此时done属性值为true，说明遍历结束
g.return('foo'); // { value: "foo", done: true }

g.next();        // { value: undefined, done: true }

如果.return()方法调用时，不提供参数，则返回值的value属性为undefined。

6、yield* 表达式

yield* 用来在一个Generator函数里面执行另一个Generator函数。

如果在一个Generator函数内部，直接调用另一个Generator函数，默认情况下是没有效果的。

function* gen1() {
  yield 'a';
  yield 'b';
}
function* gen2() {
  yield 'x';
  // 直接调用gen1()
  gen1();
  yield 'y';
}
// 遍历器对象可以使用for...of遍历所有状态
for (let v of gen2()){
  只输出了gen1的状态
  console.log(v);   // 'x' 'y'
}

上面的例子中，gen1和gen2都是Generator函数，在gen2里面直接调用gen1，是不会有效果的。

这个就需要用到 yield* 表达式。

function* gen1() {
  yield 'a';
  yield 'b';
}
function* gen2() {
  yield 'x';
  // 用 yield* 调用gen1()
  yield* gen1();
  yield 'y';
}

for (let v of gen2()){
  输出了gen1、gen2的状态
  console.log(v);   // 'x' 'a' 'b' 'y'
}

小节

この記事では主に、Generator 関数の基本的な構文と詳細、Generator 関数の定義、yield 式、.next() メソッドとパラメータの受け渡し、.throw() メソッド、.return() メソッドと yield について説明します。 * 表現。

記事の冒頭で述べたように、Generator 関数は ES6 によって提案された非同期プログラミングのソリューションです。実際のアプリケーションでは、通常、yield キーワードの後に​​非同期操作が続きます。非同期操作が正常に返されると、.next() メソッドが呼び出され、非同期プロセスを次の yield 式に渡します。

この記事はここで終了しています。その他のエキサイティングなコンテンツについては、PHP 中国語 Web サイトの JavaScript ビデオ チュートリアル 列に注目してください。

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