mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 18:32:22 +00:00
edit generator/generator comprehesion
This commit is contained in:
parent
db07394071
commit
f3959a0e1f
@ -377,7 +377,6 @@ try {
|
||||
这种函数体内捕获错误的机制,大大方便了对错误的处理。如果使用回调函数的写法,想要捕获多个错误,就不得不为每个函数写一个错误处理语句。
|
||||
|
||||
```javascript
|
||||
|
||||
foo('a', function (a) {
|
||||
if (a.error) {
|
||||
throw new Error(a.error);
|
||||
@ -397,13 +396,11 @@ foo('a', function (a) {
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
使用Generator函数可以大大简化上面的代码。
|
||||
|
||||
```javascript
|
||||
|
||||
function* g(){
|
||||
try {
|
||||
var a = yield foo('a');
|
||||
@ -414,15 +411,12 @@ function* g(){
|
||||
}
|
||||
|
||||
console.log(a, b, c);
|
||||
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
反过来,Generator函数内抛出的错误,也可以被函数体外的catch捕获。
|
||||
|
||||
```javascript
|
||||
|
||||
function *foo() {
|
||||
var x = yield 3;
|
||||
var y = x.toUpperCase();
|
||||
@ -435,11 +429,9 @@ it.next(); // { value:3, done:false }
|
||||
|
||||
try {
|
||||
it.next(42);
|
||||
}
|
||||
catch (err) {
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
上面代码中,第二个next方法向函数体内传入一个参数42,数值是没有toUpperCase方法的,所以会抛出一个TypeError错误,被函数体外的catch捕获。
|
||||
@ -669,25 +661,70 @@ result
|
||||
如果一个对象的属性是Generator函数,可以简写成下面的形式。
|
||||
|
||||
```javascript
|
||||
|
||||
let obj = {
|
||||
* myGeneratorMethod() {
|
||||
···
|
||||
}
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
它的完整形式如下,两者是等价的。
|
||||
上面代码中,myGeneratorMethod属性前面有一个星号,表示这个属性是一个Generator函数。
|
||||
|
||||
它的完整形式如下,与上面的写法是等价的。
|
||||
|
||||
```javascript
|
||||
|
||||
let obj = {
|
||||
myGeneratorMethod: function* () {
|
||||
···
|
||||
// ···
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## Generator函数推导
|
||||
|
||||
ES7在数组推导的基础上,提出了Generator函数推导(Generator comprehension)。
|
||||
|
||||
```javascript
|
||||
let generator = function* () {
|
||||
for (let i = 0; i < 6; i++) {
|
||||
yield i;
|
||||
}
|
||||
}
|
||||
|
||||
let squared = ( for (n of generator()) n * n );
|
||||
// 等同于
|
||||
// let squared = Array.from(generator()).map(n => n * n);
|
||||
|
||||
console.log(...squared);
|
||||
// 0 1 4 9 16 25
|
||||
```
|
||||
|
||||
“推导”这种语法结构,在ES6只能用于数组,ES7将其推广到了Generator函数。for...of循环会自动调用遍历器的next方法,将返回值的value属性作为数组的一个成员。
|
||||
|
||||
Generator函数推导是对数组结构的一种模拟,它的最大优点是惰性求值,即直到真正用到时才会求值,这样可以保证效率。请看下面的例子。
|
||||
|
||||
```javascript
|
||||
let bigArray = new Array(100000);
|
||||
for (let i = 0; i < 100000; i++) {
|
||||
bigArray[i] = i;
|
||||
}
|
||||
|
||||
let first = bigArray.map(n => n * n)[0];
|
||||
console.log(first);
|
||||
```
|
||||
|
||||
上面例子遍历一个大数组,但是在真正遍历之前,这个数组已经生成了,占用了系统资源。如果改用Generator函数推导,就能避免这一点。下面代码只在用到时,才会生成一个大数组。
|
||||
|
||||
```javascript
|
||||
let bigGenerator = function* () {
|
||||
for (let i = 0; i < 100000; i++) {
|
||||
yield i;
|
||||
}
|
||||
}
|
||||
|
||||
let squared = ( for (n of bigGenerator()) n * n );
|
||||
|
||||
console.log(squared.next());
|
||||
```
|
||||
|
||||
## 含义
|
||||
|
@ -59,24 +59,28 @@
|
||||
- Daniel Zautner, [Meta-programming JavaScript Using Proxies](http://dzautner.com/meta-programming-javascript-using-proxies/): 使用Proxy实现元编程
|
||||
- MDN, [Symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol): Symbol类型的详细介绍
|
||||
|
||||
## Iterator和Generator
|
||||
## Iterator
|
||||
|
||||
- Mozilla Developer Network, [Iterators and generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators)
|
||||
- Mozilla Developer Network, [The Iterator protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol)
|
||||
- Jason Orendorff, [ES6 In Depth: Iterators and the for-of loop](https://hacks.mozilla.org/2015/04/es6-in-depth-iterators-and-the-for-of-loop/): 遍历器与for...of循环的介绍
|
||||
- Axel Rauschmayer, [Iterators and generators in ECMAScript 6](http://www.2ality.com/2013/06/iterators-generators.html): 探讨Iterator和Generator的设计目的
|
||||
- Axel Rauschmayer, [Iterables and iterators in ECMAScript 6](http://www.2ality.com/2015/02/es6-iteration.html): Iterator的详细介绍
|
||||
- Kyle Simpson, [Iterating ES6 Numbers](http://blog.getify.com/iterating-es6-numbers/): 在数值对象上部署遍历器
|
||||
- Mahdi Dibaiee, [ES7 Array and Generator comprehensions](http://dibaiee.ir/es7-array-generator-comprehensions/):ES7的Generator推导
|
||||
|
||||
## Generator
|
||||
|
||||
- Matt Baker, [Replacing callbacks with ES6 Generators](http://flippinawesome.org/2014/02/10/replacing-callbacks-with-es6-generators/)
|
||||
- Steven Sanderson, [Experiments with Koa and JavaScript Generators](http://blog.stevensanderson.com/2013/12/21/experiments-with-koa-and-javascript-generators/)
|
||||
- jmar777, [What's the Big Deal with Generators?](http://devsmash.com/blog/whats-the-big-deal-with-generators)
|
||||
- Marc Harter, [Generators in Node.js: Common Misconceptions and Three Good Use Cases](http://strongloop.com/strongblog/how-to-generators-node-js-yield-use-cases/): 讨论Generator函数的作用
|
||||
- Axel Rauschmayer, [Iterators and generators in ECMAScript 6](http://www.2ality.com/2013/06/iterators-generators.html): 探讨Iterator和Generator的设计目的
|
||||
- Axel Rauschmayer, [Iterables and iterators in ECMAScript 6](http://www.2ality.com/2015/02/es6-iteration.html): Iterator的详细介绍
|
||||
- StackOverflow, [ES6 yield : what happens to the arguments of the first call next()?](http://stackoverflow.com/questions/20977379/es6-yield-what-happens-to-the-arguments-of-the-first-call-next): 第一次使用next方法时不能带有参数
|
||||
- Kyle Simpson, [ES6 Generators: Complete Series](http://davidwalsh.name/es6-generators): 由浅入深探讨Generator的系列文章,共四篇
|
||||
- Gajus Kuizinas, [The Definitive Guide to the JavaScript Generators](http://gajus.com/blog/2/the-definetive-guide-to-the-javascript-generators): 对Generator的综合介绍
|
||||
- Jan Krems, [Generators Are Like Arrays](https://gist.github.com/jkrems/04a2b34fb9893e4c2b5c): 讨论Generator可以被当作数据结构看待
|
||||
- Harold Cooper, [Coroutine Event Loops in Javascript](http://syzygy.st/javascript-coroutines/): Generator用于实现状态机
|
||||
- Ruslan Ismagilov, [learn-generators](https://github.com/isRuslan/learn-generators): 编程练习,共6道题
|
||||
- Kyle Simpson, [Iterating ES6 Numbers](http://blog.getify.com/iterating-es6-numbers/): 在数值对象上部署遍历器
|
||||
- Steven Sanderson, [Experiments with Koa and JavaScript Generators](http://blog.stevensanderson.com/2013/12/21/experiments-with-koa-and-javascript-generators/): Generator入门介绍,以Koa框架为例
|
||||
|
||||
## Promise对象
|
||||
|
Loading…
x
Reference in New Issue
Block a user