ホームページ >ウェブフロントエンド >jsチュートリアル >Generatorを詳しく解説_JavaScript ES6の基礎知識
Generatorを詳しく解説_JavaScript ES6の基礎知識
- WBOYオリジナル
- 2016-05-16 15:48:461226ブラウズ
今日議論する新機能は ES6 で最も素晴らしい機能なので、とても楽しみにしています。
ここでの「魔法」とはどういう意味ですか?初心者にとって、この機能は以前の JS とはまったく異なり、少しわかりにくいものです。これは、言語の通常の動作を完全に変えるという意味で「魔法」です。
それだけでなく、この機能はプログラム コードを簡素化し、複雑な「コールバック スタック」を直線的な実行形式に変更することもできます。
レイアウトしすぎたでしょうか?まずは詳細な紹介から始めましょう。ご自身で判断してください。
はじめに
ジェネレーターとは何ですか?
以下のコードを見てください:
function* quips(name) {
yield "hello " + name + "!";
yield "i hope you are enjoying the blog posts";
if (name.startsWith("X")) {
yield "it's cool how your name starts with X, " + name;
}
yield "see you later!";
}
function* quips(name) {
yield "hello " + name + "!";
yield "i hope you are enjoying the blog posts";
if (name.startsWith("X")) {
yield "it's cool how your name starts with X, " + name;
}
yield "see you later!";
}
上記のコードは、おしゃべり猫 (現在非常に人気のあるアプリケーション) の一部です。ここをクリックして試してください。コードがわかりにくい場合は、ここに戻ってきてください。以下の説明を参照してください。
これはジェネレーター関数と呼ばれる関数によく似ていますが、一般的な関数と多くの共通点がありますが、次の 2 つの違いもわかります。
通常の関数は function で始まりますが、Generator 関数は function* で始まります。
Generator 関数内では、yield はキーワードであり、return に似ています。違いは、すべての関数 (ジェネレーター関数を含む) は 1 回しか返せないのに対し、ジェネレーター関数では何度でも返せることです。 yield 式はジェネレーター関数の実行を一時停止し、一時停止した場所から実行を再開できます。
原則
> var iter = quips("jorendorff");
[object Generator]
> iter.next()
{ value: "hello jorendorff!", done: false }
> iter.next()
{ value: "i hope you are enjoying the blog posts", done: false }
> iter.next()
{ value: "see you later!", done: false }
> iter.next()
{ value: undefined, done: true }
> var iter = quips("jorendorff");
[object Generator]
> iter.next()
{ value: "hello jorendorff!", done: false }
> iter.next()
{ value: "i hope you are enjoying the blog posts", done: false }
> iter.next()
{ value: "see you later!", done: false }
> iter.next()
{ value: undefined, done: true }
Generator 関数の呼び出し方法は通常の関数 quips("jorendorff") と同じですが、Generator 関数を呼び出すとすぐには実行されず、Generator オブジェクト (上記のコードでは iter) が呼び出されます。このとき、関数コードの最初の行で関数 Pause が返されます。
Generator オブジェクトの .next() メソッドが呼び出されるたびに、次の yield 式が見つかるまで関数の実行が開始されます。
これが、iter.next() を呼び出すたびに異なる文字列を取得する理由です。これらは、関数内の yield 式によって生成された値です。
最後の iter.next() が実行されると、Generator 関数の終わりに達するため、返された結果の .done プロパティ値は true になり、.value プロパティ値は未定義になります。
ここで、おしゃべり猫のデモに戻り、いくつかの yield 式をコードに追加して、何が起こるかを確認してください。
技術的に言えば、Generator 関数の実行で yield 式が発生すると、関数のスタック フレーム (ローカル変数、関数パラメーター、一時値、および現在の実行位置) がスタックから削除されますが、Generator オブジェクトは残ります。スタック フレームが削除されるため、次回 .next() メソッドが呼び出されたときに、実行を再開して続行できます。
Generator はマルチスレッドではないことを思い出してください。マルチスレッドをサポートする言語では、複数のコードを同時に実行できるため、実行リソースの競合、実行結果の不確実性、およびパフォーマンスの向上が伴います。これは、ジェネレーター関数の場合には当てはまりません。ジェネレーター関数が実行されるとき、その関数とその呼び出し元は同じスレッドで実行され、実行順序が決定され、実行シーケンスは変わりません。スレッドとは異なり、ジェネレーター関数は内部イールド マーカーで実行を一時停止できます。
ジェネレーター関数の一時停止、実行、再開を導入することで、ジェネレーター関数が何であるかがわかりました。それでは、ジェネレーター関数の用途は何でしょうか?という質問を提起します。
イテレーター
ただし、インターフェイスの実装にはまだコードを記述する必要があります。この反復子を例として、ある数値から別の数値に累積する方法を見てみましょう。数値。C 言語の for (;;) ループに少し似ています。
// This should "ding" three times
for (var value of range(0, 3)) {
alert("Ding! at floor #" + value);
}
// This should "ding" three times
for (var value of range(0, 3)) {
alert("Ding! at floor #" + value);
}
class RangeIterator {
constructor(start, stop) {
this.value = start;
this.stop = stop;
}
[Symbol.iterator]() { return this; }
next() {
var value = this.value;
if (value < this.stop) {
this.value++;
return {done: false, value: value};
} else {
return {done: true, value: undefined};
}
}
}
// Return a new iterator that counts up from 'start' to 'stop'.
function range(start, stop) {
return new RangeIterator(start, stop);
}
class RangeIterator {
constructor(start, stop) {
this.value = start;
this.stop = stop;
}
[Symbol.iterator]() { return this; }
next() {
var value = this.value;
if (value < this.stop) {
this.value++;
return {done: false, value: value};
} else {
return {done: true, value: undefined};
}
}
}
// Return a new iterator that counts up from 'start' to 'stop'.
function range(start, stop) {
return new RangeIterator(start, stop);
}
查看该 DEMO。
这种实现方式与 Java 和 Swift 的实现方式类似，看上去还不错，但还不能说上面代码就完全正确，代码没有任何 Bug？这很难说。我们看不到任何传统的 for (;;) 循环代码：迭代器的协议迫使我们将循环拆散了。
在这一点上，你也许会对迭代器不那么热衷了，它们使用起来很方便，但是实现起来似乎很难。
我们可以引入一种新的实现方式，以使得实现迭代器更加容易。上面介绍的 Generator 可以用在这里吗？我们来试试：
function* range(start, stop) {
for (var i = start; i < stop; i++)
yield i;
}
function* range(start, stop) {
for (var i = start; i < stop; i++)
yield i;
}
上面这 4 行代码就可以完全替代之前的那个 23 行的实现，替换掉整个 RangeIterator 类，这是因为 Generator 天生就是迭代器，所有的 Generator 都原生实现了 .next() 和 [Symbol.iterator]() 方法。你只需要实现其中的循环逻辑就够了。
不使用 Generator 去实现一个迭代器就像被迫写一个很长很长的邮件一样，本来简单的表达出你的意思就可以了，RangeIterator 的实现是冗长和令人费解的，因为它没有使用循环语法去实现一个循环功能。使用 Generator 才是我们需要掌握的实现方式。
我们可以使用作为迭代器的 Generator 的哪些功能呢？
使任何对象可遍历 — 编写一个 Genetator 函数去遍历 this，每遍历到一个值就 yield 一下，然后将该 Generator 函数作为要遍历的对象上的 [Symbol.iterator] 方法的实现。
简化返回数组的函数 — 假如有一个每次调用时都返回一个数组的函数，比如：
// Divide the one-dimensional array 'icons'
// into arrays of length 'rowLength'.
function splitIntoRows(icons, rowLength) {
var rows = [];
for (var i = 0; i < icons.length; i += rowLength) {
rows.push(icons.slice(i, i + rowLength));
}
return rows;
}
// Divide the one-dimensional array 'icons'
// into arrays of length 'rowLength'.
function splitIntoRows(icons, rowLength) {
var rows = [];
for (var i = 0; i < icons.length; i += rowLength) {
rows.push(icons.slice(i, i + rowLength));
}
return rows;
}
使用 Generator 可以简化这类函数：
function* splitIntoRows(icons, rowLength) {
for (var i = 0; i < icons.length; i += rowLength) {
yield icons.slice(i, i + rowLength);
}
}
function* splitIntoRows(icons, rowLength) {
for (var i = 0; i < icons.length; i += rowLength) {
yield icons.slice(i, i + rowLength);
}
}
这两者唯一的区别在于，前者在调用时计算出了所有结果并用一个数组返回，后者返回的是一个迭代器，结果是在需要的时候才进行计算，然后一个一个地返回。
无穷大的结果集 — 我们不能构建一个无穷大的数组，但是我们可以返回一个生成无尽序列的 Generator，并且每个调用者都可以从中获取到任意多个需要的值。
重构复杂的循环 — 你是否想将一个复杂冗长的函数重构为两个简单的函数？Generator 是你重构工具箱中一把新的瑞士军刀。对于一个复杂的循环，我们可以将生成数据集那部分代码重构为一个 Generator 函数，然后用 for-of 遍历：for (var data of myNewGenerator(args))。
构建迭代器的工具 — ES6 并没有提供一个可扩展的库，来对数据集进行 filter 和 map等操作，但 Generator 可以用几行代码就实现这类功能。
例如，假设你需要在 Nodelist 上实现与 Array.prototype.filter 同样的功能的方法。小菜一碟的事：
function* filter(test, iterable) {
for (var item of iterable) {
if (test(item))
yield item;
}
}
function* filter(test, iterable) {
for (var item of iterable) {
if (test(item))
yield item;
}
}
所以，Generator 很实用吧？当然，这是实现自定义迭代器最简单直接的方式，并且，在 ES6 中，迭代器是数据集和循环的新标准。
但，这还不是 Generator 的全部功能。
异步代码
异步 API 通常都需要一个回调函数，这意味着每次你都需要编写一个匿名函数来处理异步结果。如果同时处理三个异步事务，我们看到的是三个缩进层次的代码，而不仅仅是三行代码。
看下面代码：
}).on('close', function () {
done(undefined, undefined);
}).on('error', function (error) {
done(error);
});
}).on('close', function () {
done(undefined, undefined);
}).on('error', function (error) {
done(error);
});
异步 API 通常都有错误处理的约定，不同的 API 有不同的约定。大多数情况下，错误是默认丢弃的，甚至有些将成功也默认丢弃了。
直到现在，这些问题仍是我们处理异步编程必须付出的代价，而且我们也已经接受了异步代码只是看不来不像同步代码那样简单和友好。
Generator 给我们带来了希望，我们可以不再采用上面的方式。
Q.async()是一个将 Generator 和 Promise 结合起来处理异步代码的实验性尝试，让我们的异步代码类似于相应的同步代码。
例如：
// Synchronous code to make some noise.
function makeNoise() {
shake();
rattle();
roll();
}
// Asynchronous code to make some noise.
// Returns a Promise object that becomes resolved
// when we're done making noise.
function makeNoise_async() {
return Q.async(function* () {
yield shake_async();
yield rattle_async();
yield roll_async();
});
}
// Synchronous code to make some noise.
function makeNoise() {
shake();
rattle();
roll();
}
// Asynchronous code to make some noise.
// Returns a Promise object that becomes resolved
// when we're done making noise.
function makeNoise_async() {
return Q.async(function* () {
yield shake_async();
yield rattle_async();
yield roll_async();
});
}
最大の違いは、各非同期メソッド呼び出しの前に yield キーワードを追加する必要があることです。
Q.async では、同期コードと同様に、if ステートメントまたは try-catch 例外処理を追加すると、他の非同期コードの作成方法と比較して学習コストが大幅に削減されます。
Generator は、人間の脳の思考方法により適した非同期プログラミング モデルを提供します。ただし、ES7 では、C# の同様の機能に触発されて、Promise と Generator に基づく非同期処理関数が計画されています。
互換性
サーバー側では、io.js で直接 Generator を使用できるようになりました (または、NodeJs で --harmony 起動パラメータを使用して Node を起動できます)。
ブラウザ側では、現在 Firefox 27 と Chrome 39 以降のみが Generator をサポートしています。Web 上で直接使用したい場合は、Babel または Google の Traceur を使用して ES6 コードを Web 対応の ES5 コードに変換できます。
いくつかの余談: Generator の JS バージョンは、Brendan Eich によって最初に実装されました。彼は、2006 年には Firefox 2.0 に組み込まれた Generator の実装を参考にしました。しかし、標準化への道のりは険しいものでした。その過程で、その構文と動作には多くの変更が加えられました。Firefox と Chrome の ES6 ジェネレーターは、Andy Wingo によって実装され、この作業は Bloomberg によって後援されました。
収量;
ジェネレーターについては、.throw() メソッドと .return() メソッドの使用法、.next() メソッドのオプションのパラメーター、および yield* 構文についてまだ説明していない部分があります。しかし、この投稿はすでに十分に長いので、ジェネレーターと同じように、一時停止して残りを別の機会に終わらせましょう。
ES6 に 2 つの非常に重要な機能を導入しました。ES6 は私たちの生活を変えると大胆に言えます。これらの一見シンプルな機能は非常に役立ちます。