Penjelasan terperinci tentang pengetahuan Generator_Basic dalam JavaScript ES6-tutorial js-php.cn

Saya sangat teruja dengan ciri baharu yang sedang kita bincangkan hari ini kerana ia merupakan ciri yang paling menakjubkan dalam ES6.

Apakah maksud "ajaib" di sini? Untuk pemula, ciri ini berbeza sama sekali daripada JS sebelumnya, malah agak kabur. Ia "ajaib" dalam erti kata bahawa ia benar-benar mengubah tingkah laku normal bahasa.

Bukan itu sahaja, ciri ini juga boleh memudahkan kod atur cara dan menukar "timbunan panggil balik" kompleks ke dalam bentuk pelaksanaan garis lurus.

Adakah saya meletakkan terlalu banyak? Mari mulakan dengan pengenalan yang mendalam, dan anda boleh menilai sendiri.
Pengenalan

Apakah itu Penjana?

Lihat kod di bawah:

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!";
}

Salin selepas log masuk

Kod di atas adalah sebahagian daripada meniru Kucing bercakap (aplikasi yang sangat popular pada masa ini), Klik di sini untuk mencubanya, jika anda keliru tentang kod tersebut, maka kembali ke sini Lihat penjelasan di bawah.

Ini kelihatan seperti fungsi, yang dipanggil fungsi Penjana Ia mempunyai banyak persamaan dengan fungsi biasa kami, tetapi anda juga boleh melihat dua perbezaan berikut:

Fungsi biasa bermula dengan fungsi, tetapi fungsi Penjana bermula dengan fungsi*.
Dalam fungsi Penjana, hasil ialah kata kunci, agak serupa dengan pulangan. Perbezaannya ialah semua fungsi (termasuk fungsi Penjana) hanya boleh kembali sekali, manakala dalam fungsi Penjana anda boleh menghasilkan beberapa kali. Ungkapan hasil menjeda pelaksanaan fungsi Generator, dan pelaksanaan kemudiannya boleh disambung semula dari tempat ia dijeda.

Fungsi biasa tidak boleh menjeda pelaksanaan, tetapi fungsi Penjana boleh. Ini adalah perbezaan terbesar antara keduanya.
Prinsip

Apa yang berlaku apabila quips() dipanggil?

> 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 }

Salin selepas log masuk

Kami sangat biasa dengan kelakuan fungsi biasa Apabila fungsi dipanggil, ia dilaksanakan serta-merta sehingga fungsi itu kembali atau membuang pengecualian Ini adalah sifat kedua kepada semua pengaturcara JS.

Kaedah memanggil fungsi Generator adalah sama seperti fungsi biasa: quips("jorendorff"), tetapi apabila memanggil fungsi Generator, ia tidak dilaksanakan serta-merta, tetapi objek Generator (iter dalam kod di atas) adalah kembali pada masa ini, fungsi Jeda serta-merta pada baris pertama kod fungsi.

Setiap kali kaedah .next() bagi objek Penjana dipanggil, fungsi itu mula dilaksanakan sehingga ungkapan hasil seterusnya ditemui.

Inilah sebabnya kita mendapat rentetan yang berbeza setiap kali kita memanggil iter.next(), ini adalah nilai yang dihasilkan oleh ungkapan hasil di dalam fungsi.

Apabila iter.next() terakhir dilaksanakan, penghujung fungsi Penjana dicapai, jadi nilai sifat .done bagi hasil yang dikembalikan adalah benar dan nilai sifat .value tidak ditentukan.

Sekarang, kembali ke DEMO kucing Bercakap dan cuba tambahkan beberapa ungkapan hasil pada kod dan lihat apa yang berlaku.

Secara teknikal, apabila pelaksanaan fungsi Generator menemui ekspresi hasil, bingkai tindanan fungsi—pembolehubah setempat, parameter fungsi, nilai sementara dan kedudukan pelaksanaan semasa dialih keluar daripada tindanan, tetapi objek Generator kekal Rujukan kepada bingkai tindanan dialih keluar, jadi apabila kaedah .next() dipanggil seterusnya, anda boleh menyambung semula dan meneruskan pelaksanaan.

Perlu diingatkan bahawa Generator bukan berbilang benang. Dalam bahasa yang menyokong multi-threading, beberapa keping kod boleh dilaksanakan pada masa yang sama, disertai dengan persaingan untuk sumber pelaksanaan, ketidakpastian dalam hasil pelaksanaan dan prestasi yang lebih baik. Ini tidak berlaku dengan fungsi Generator Apabila fungsi Generator dilaksanakan, ia dan pemanggilnya dilaksanakan dalam urutan yang sama Setiap urutan pelaksanaan ditentukan dan dipesan, dan urutan pelaksanaan tidak akan berubah. Tidak seperti benang, fungsi Penjana boleh menjeda pelaksanaan pada penanda hasil dalaman.

Dengan memperkenalkan jeda, pelaksanaan dan penyambungan semula fungsi Penjana, kita tahu apa itu fungsi Penjana, jadi sekarang kita menimbulkan soalan: Apakah kegunaan fungsi Penjana?
Pemula

Melalui artikel sebelumnya, kami tahu bahawa iterator bukanlah kelas terbina dalam ES6, tetapi hanya titik lanjutan bahasa Anda boleh mentakrifkan satu dengan melaksanakan [Symbol.iterator]() dan .next(. ) kaedah lelaran.

Walau bagaimanapun, melaksanakan antara muka masih memerlukan menulis beberapa kod Mari kita lihat cara melaksanakan iterator dalam amalan nombor, sedikit seperti gelung for (;;) dalam bahasa C.

// 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);
}

Salin selepas log masuk

Kini ada penyelesaiannya iaitu menggunakan kelas ES6. (Jika anda belum biasa dengan sintaks kelas, jangan risau, saya akan mengupasnya dalam artikel akan datang.)

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);
}

Salin selepas log masuk

查看该 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;
}

Salin selepas log masuk

查看该 DEMO。

上面这 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;
}

Salin selepas log masuk

使用 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);
 }
}

Salin selepas log masuk

这两者唯一的区别在于，前者在调用时计算出了所有结果并用一个数组返回，后者返回的是一个迭代器，结果是在需要的时候才进行计算，然后一个一个地返回。

无穷大的结果集 — 我们不能构建一个无穷大的数组，但是我们可以返回一个生成无尽序列的 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;
 }
}

Salin selepas log masuk

所以，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);
});

Salin selepas log masuk

异步 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();
 });
}

Salin selepas log masuk

Perbezaan terbesar ialah anda perlu menambah kata kunci hasil di hadapan setiap panggilan kaedah tak segerak.

Dalam Q.async, menambah pernyataan if atau pengendalian pengecualian cuba-tangkap, sama seperti dalam kod segerak, mengurangkan banyak kos pembelajaran berbanding cara lain menulis kod tak segerak.

Penjana membekalkan kita model pengaturcaraan tak segerak yang lebih sesuai untuk cara otak manusia berfikir. Tetapi sintaks yang lebih baik mungkin lebih membantu Dalam ES7, fungsi pemprosesan tak segerak berdasarkan Promise dan Generator sedang dirancang, diilhamkan oleh ciri serupa dalam C#.
Keserasian

Di bahagian pelayan, kini anda boleh menggunakan Generator terus dalam io.js (atau mulakan Node dengan parameter permulaan --harmony dalam NodeJs).

Di bahagian penyemak imbas, pada masa ini hanya Firefox 27 dan Chrome 39 atau lebih tinggi menyokong Penjana Jika anda ingin menggunakannya secara langsung di Web, anda boleh menggunakan Babel atau Google's Traceur untuk menukar kod ES6 kepada kod ES5 mesra Web.

Beberapa penyimpangan: Versi JS Generator pertama kali dilaksanakan oleh Brendan Eich Dia menggunakan pelaksanaan Python Generator, yang diilhamkan oleh Icon Firefox 2.0 yang diserap Generator seawal tahun 2006. Tetapi jalan ke penyeragaman adalah bergelombang, sintaks dan tingkah lakunya telah mengalami banyak perubahan ES6 Generator dalam Firefox dan Chrome telah dilaksanakan oleh Andy Wingo, dan kerja ini ditaja oleh Bloomberg.
hasil;

Terdapat beberapa bahagian yang tidak disebut tentang Generator Kami belum lagi membincangkan penggunaan kaedah .throw() dan .return(), parameter pilihan kaedah .next() dan sintaks hasil*. Tetapi saya rasa catatan ini sudah cukup panjang, dan sama seperti Generator, mari kita berhenti sebentar dan selesaikan yang lain pada masa yang lain.

Kami telah memperkenalkan dua ciri yang sangat penting dalam ES6, jadi sekarang kami boleh dengan berani mengatakan bahawa ES6 akan mengubah kehidupan kami.