update

Author: amaler

README.md

@@ -34,17 +34,16 @@
 
 - [ES6 惊现 Generator](./part4-generator/01-generator-in-es6.md)
 - [Iterator 遍历器](./part4-generator/02-iterator.md)
-- [带着 Iterator 来看 Generator](./part4-generator/03-iterator-for-generator.md)
-- [Generator 与异步结合](./part4-generator/04-generator-for-async.md)
-- [使用大名鼎鼎的 co 库](./part4-generator/05-co.md)
+- [Generator 的具体应用](./part4-generator/03-iterator-use.md)
+- [Thunk 函数](./part4-generator/04-thunk.md)
+- [Generator 与异步操作](./part4-generator/05-generator-for-async.md)
 - [koa 中使用 Generator](./part4-generator/06-generator-for-koa.md)
 - [Generator 的本质是什么？是否取代了 callback](./part4-generator/07-generator-callback.md)
 
 **part5 async-await**
 
 - ES7 中引入 async-await
-- async-await 值不值得期待
-- async-await 的本质是什么？是否取代了 callback
+- 如何在 nodejs`v6.x`版本中使用 async-await
 
 **最后**
 

part4-generator/02-iterator.md

@@ -1,10 +1,130 @@
 # Iterator 遍历器
 
+ES6 中引入了很多此前没有但是却非常重要的概念，`Iterator`就是其中一个。`Iterator`对象是一个指针对象，实现类似于单项链表的数据结构，通过`next()`将指针指向下一个节点 ———— 这里也就是先简单做一个概念性的介绍，后面将通过实例为大家演示。
 
+本节演示的代码可参考[这里](./test.js)
 
 ## 本节内容概述
 
+- 简介`Symbol`数据类型
+- 具有`[Symbol.iterator]`属性的数据类型
+- 生成`Iterator`对象
+- `Generator`返回的也是`Iterator`对象
+- 接下来...
 
+## 简介`Symbol`数据类型
+
+`Symbol`是一个特殊的数据类型，和`number` `string`等并列，详细的教程可参考[阮一峰老师 ES6 入门的 Symbol 篇](http://es6.ruanyifeng.com/#docs/symbol)。先看两句程序
+
+```javascript
+console.log(Array.prototype.slice)  // [Function: slice]
+console.log(Array.prototype[Symbol.iterator])  // [Function: values]
+```
+
+数组的`slice`属性大家都比较熟悉了，就是一个函数，可以通过`Array.prototype.slice`得到。这里的`slice`是一个字符串，但是我们获取`Array.prototype[Symbol.iterator]`可以得到一个函数，只不过这里的`[Symbol.iterator]`是`Symbol`数据类型，不是字符串。但是没关系，`Symbol`数据类型也可以作为对象属性的`key`。如下：
+
+```javascript
+var obj = {}
+obj.a = 100
+obj[Symbol.iterator] = 200
+console.log(obj)  // {a: 100, Symbol(Symbol.iterator): 200}
+```
+
+在此小节中，你只需要知道`[Symbol.iterator]`是一个特殊的数据类型`Symbol`类型，但是也可以像`number` `string`类型一样，作为对象的属性`key`来使用
+
+## 原生具有`[Symbol.iterator]`属性的数据类型
+
+在 ES6 中，原生具有`[Symbol.iterator]`属性数据类型有：数组、某些类似数组的对象（如`arguments`、`NodeList`）、`Set`和`Map`。其中，`Set`和`Map`也是 ES6 中新增的数据类型。
+
+```javascript
+// 数组
+console.log([1, 2, 3][Symbol.iterator])  // function values() { [native code] }
+// 某些类似数组的对象，NoeList
+console.log(document.getElementsByTagName('div')[Symbol.iterator])  // function values() { [native code] }
+```
+
+原生具有`[Symbol.iterator]`属性数据类型有一个特点，就是可以使用`for...of`来取值，例如
+
+```javascript
+var item
+for (item of [100, 200, 300]) {
+    console.log(item)
+}
+// 打印出：100 200 300 
+// 注意，这里每次获取的 item 是数组的 value，而不是 index ，这一点和 传统 for 循环以及 for...in 完全不一样
+```
+
+而具有`[Symbol.iterator]`属性的对象，都可以一键生成一个`Iterator`对象。如何生成以及生成之后什么样子，还有生成之后的作用，下文分解。
+
+不要着急，也不要跳过本文的任何步骤，一步一步跟着我的节奏来看。
+
+## 生成`Iterator`对象
+
+定义一个数组，然后生成数组的`Iterator`对象
+
+```javascript
+const arr = [100, 200, 300]
+const iterator = arr[Symbol.iterator]()  // 通过执行 [Symbol.iterator] 的属性值（函数）来返回一个 iterator 对象
+```
+
+好，现在生成了`iterator`，那么该如何使用它呢 ———— 有两种方式：`next`和`for...of`。
+
+先说第一种，`next`
+
+```javascript
+console.log(iterator.next())  // { value: 100, done: false }
+console.log(iterator.next())  // { value: 200, done: false }
+console.log(iterator.next())  // { value: 300, done: false }
+console.log(iterator.next())  // { value: undefined, done: true }
+```
+
+看到这里，再结合上一节内容，是不是似曾相识的感觉？(额，没有的话，那你就回去重新看上一节的内容吧) `iterator`对象可以通过`next()`方法逐步获取每个元素的值，以`{ value: ..., done: ... }`形式返回，`value`就是值，`done`表示是否到已经获取完成。
+
+再说第二种，`for...of`
+
+```javascript
+let i
+for (i of iterator) {
+    console.log(i)
+}
+// 打印：100 200 300 
+```
+
+上面使用`for...of`遍历`iterator`对象，可以直接将其值获取出来。这里的“值”就对应着上面`next()`返回的结果的`value`属性
+
+## `Generator`返回的也是`Iterator`对象
+
+看到这里，你大体也应该明白了，上一节演示的`Generator`，就是生成一个`Iterator`对象。因此才会有`next()`，也可以通过`for...of`来遍历。拿出上一节的例子再做一次演示：
+
+```javascript
+function* Hello() {
+    yield 100
+    yield (function () {return 200})()
+    return 300 
+}
+const h = Hello()
+console.log(h[Symbol.iterator])  // [Function: [Symbol.iterator]]
+```
+
+执行`const h = Hello()`得到的就是一个`iterator`对象，因为`h[Symbol.iterator]`是有值的。既然是`iterator`对象，那么就可以使用`next()`和`for...of`进行操作
+
+```javascript
+console.log(h.next())  // { value: 100, done: false }
+console.log(h.next())  // { value: 200, done: false }
+console.log(h.next())  // { value: 300, done: false }
+console.log(h.next())  // { value: undefined, done: true }
+
+let i
+for (i of h) {
+    console.log(i)
+}
+```
+
+## 接下来...
+
+这一节我们花费很大力气，从`Iterator`又回归到了`Generator`，目的就是为了看看`Generator`到底是一个什么东西。了解其本质，才能更好的使用它，否则总有一种抓瞎的感觉。
+
+接下来我们就`Generator`具体有哪些使用场景。
 
 ## 求打赏
 

part4-generator/03-iterator-for-generator.md

@@ -0,0 +1,139 @@
+# Generator 的具体应用
+
+前面用两节的内容介绍了`Generator`可以让执行处于暂停状态，并且知道了`Generator`返回的是一个`Iterator`对象，这一节就详细介绍一下`Generator`的一些基本用法。
+
+本节演示的代码可参考[这里](./test.js)
+
+## 本节内容概述
+
+- `next`和`yield`参数传递
+- `for...of`的应用示例
+- `yield* `语句
+- `Generator`中的`this`
+- 接下来...
+
+## `next`和`yield`参数传递
+
+我们之前已经知道，`yield`具有返回数据的功能，如下代码。`yield`后面的数据被返回，存放到返回结果中的`value`属性中。这算是一个方向的参数传递。
+
+```javascript
+function* G() {
+    yield 100
+}
+const g = G()
+console.log( g.next() ) // {value: 100, done: false}
+```
+
+还有另外一个方向的参数传递，就是`next`向`yield`传递，如下代码。
+
+```javascript
+function* G() {
+    const a = yield 100
+    console.log('a', a)  // a aaa
+    const b = yield 200
+    console.log('b', b)  // b bbb
+    const c = yield 300
+    console.log('c', c)  // c ccc
+}
+const g = G()
+g.next()    // value: 100, done: false
+g.next('aaa') // value: 200, done: false
+g.next('bbb') // value: 300, done: false
+g.next('ccc') // value: undefined, done: true
+```
+
+捋一捋上面代码的执行过程：
+
+- 执行第一个`g.next()`时，为传递任何参数，返回的`{value: 100, done: false}`，这个应该没有疑问
+- 执行第二个`g.next('aaa')`时，传递的参数是`'aaa'`，这个`'aaa'`就会被赋值到`G`内部的`a`标量中，然后执行`console.log('a', a)`打印出来，最后返回`{value: 200, done: false}`
+- 执行第三个、第四个时，道理都是完全一样的，大家自己捋一捋。
+
+**有一个要点需要注意，就`g.next('aaa')`是将`'aaa'`传递给上一个已经执行完了的`yield`语句前面的变量，而不是即将执行的`yield`前面的变量**。这句话要能看明白，看不明白就说明刚才的代码你还没看懂，继续看。
+
+## `for...of`的应用示例
+
+针对`for...of`在`Iterator`对象的操作之前已经介绍过了，不过这里用一个非常好的例子来展示一下。用简单几行代码实现斐波那契数列。通过之前学过的`Generator`知识，应该不能解读这份代码。
+
+```javascript
+function* fibonacci() {
+    let [prev, curr] = [0, 1]
+    for (;;) {
+        [prev, curr] = [curr, prev + curr]
+        // 将中间值通过 yield 返回，并且保留函数执行的状态，因此可以非常简单的实现 fibonacci
+        yield curr
+    }
+}
+for (let n of fibonacci()) {
+    if (n > 1000) {
+        break
+    }
+    console.log(n)
+}
+```
+
+## `yield* `语句
+
+如果有两个`Generator`，想要在第一个中包含第二个，如下需求：
+
+```javascript
+function* G1() {
+    yield 'a'
+    yield 'b'
+}
+function* G2() {
+    yield 'x'
+    yield 'y'
+}
+```
+
+针对以上两个`Generator`，我的需求是：一次输出`a x y b`，该如何做？有同学看到这里想起了刚刚学到的`for..of`可以实现————不错，确实可以实现（大家也可以想想到底该如何实现）
+
+但是，这要演示一个更加简洁的方式`yield* `表达式
+
+```javascript
+function* G1() {
+    yield 'a'
+    yield* G2()  // 使用 yield* 执行 G2()
+    yield 'b'
+}
+function* G2() {
+    yield 'x'
+    yield 'y'
+}
+for (let item of G1()) {
+    console.log(item)
+}
+```
+
+之前学过的`yield`后面会接一个普通的 JS 对象，而`yield* `后面会接一个`Generator`，而且会把它其中的`yield`按照规则来一步一步执行。**如果有多个`Generator`串联使用的话（例如`Koa`源码中），用`yield* `来操作非常方便**。
+
+## `Generator`中的`this`
+
+对于以下这种写法，大家可能会和构造函数创建对象的写法产生混淆，这里一定要注意 —— **Generator 不是函数，更不是构造函数**
+
+```javascript
+function* G() {}
+const g = G()
+```
+
+而以下这种写法，更加不会成功。只有构造函数才会这么用，构造函数返回的是`this`，而`Generator`返回的是一个`Iterator`对象。完全是两码事，千万不要搞混了。
+
+```javascript
+function* G() {
+    this.a = 10
+}
+const g = G()
+console.log(g.a) // 报错
+```
+
+## 接下来...
+
+本节基本介绍了`Generator`的最常见的用法，但是还是没有和咱们的最终目的————异步操作————沾上关系，而且现在看来有点八竿子打不着的关系。但是话说回来，这几节内容，你也学到了不少知识啊。
+
+别急哈，即便是下一节，它们还不会有联系，再下一节就真相大白了。下一节我们又给出一个新概念————`Thunk`函数
+
+## 求打赏
+
+如果你看完了，感觉还不错，欢迎给我打赏 ———— 以激励我更多输出优质内容
+
+![](http://images2015.cnblogs.com/blog/138012/201702/138012-20170228112237798-1507196643.png)

part4-generator/03-iterator-use.md

@@ -0,0 +1,75 @@
+# Thunk 函数
+
+要想让`Generator`和异步操作产生联系，就必须过`thunk`函数这一关。这一关过了之后，立即就可以着手异步操作的事情，因此大家再坚持坚持。至于`thunk`函数是什么，下文会详细演示。
+
+本节演示的代码可参考[这里](./test.js)
+
+## 本节内容概述
+
+- 一个普通的异步函数
+- 封装成一个`thunk`函数
+- `thunk`函数的特点
+- 使用`thunkify`库
+- 接下来...
+
+## 一个普通的异步函数
+
+就用 nodejs 中读取文件的函数为例，通常都这么写
+
+```javascript
+fs.readFile('data1.json', 'utf-8', (err, data) => {
+    // 获取文件内容
+})
+```
+
+其实这个写法就是将三个参数都传递给`fs.readFile`这个方法，其中最后一个参数是一个`callback`函数。这种函数叫做 **多参数函数**，我们接下来做一个改造
+
+## 封装成一个`thunk`函数
+
+改造的代码如下所示。不过是不是感觉越改造越复杂了？不过请相信：你看到的复杂仅仅是表面的，**这一点东西变的复杂，是为了让以后更加复杂的东西变得简单**。对于个体而言，随性比较简单，遵守规则比较复杂；但是对于整体（包含很多个体）而言，大家都随性就不好控制了，而大家都遵守规则就很容易管理 ———— 就是这个道理!
+
+```javascript
+const thunk = function (fileName, codeType) {
+    // 返回一个只接受 callback 参数的函数
+    return function (callback) {
+        fs.readFile(fileName, codeType, callback)
+    }
+}
+const readFileThunk = thunk('data1.json', 'utf-8')
+readFileThunk((err, data) => {
+    // 获取文件内容
+})
+```
+
+先自己看一看以上代码，应该是能看懂的，但是你可能就是看懂了却不知道这么做的意义在哪里。意义先不管，先把它看懂，意义下一节就会看到。
+
+- 执行`const readFileThunk = thunk('data1.json', 'utf-8')`返回的其实是一个函数
+- `readFileThunk`这个函数，只接受一个参数，而且这个参数是一个`callback`函数
+
+## `thunk`函数的特点
+
+就上上面的代码，我们经过对传统的异步操作函数进行封装，**得到一个只有一个参数的函数，而且这个参数是一个`callback`函数，那这就是一个`thunk`函数**。就像上面代码中`readFileThunk`一样。
+
+## 使用`thunkify`库
+
+上面代码的封装，是我们手动来做的，但是没遇到一个情况就需要手动做吗？在这个开源的时代当让不会这样，直接使用第三方的`thunkify`就好了。
+
+首先要安装`npm i thunkify --save`，然后在代码的最上方引用`const thunkify = require('thunkify')`。最后，上面我们手动写的代码，完全可以简化成这几行，非常简单！
+
+```javascript
+const thunk = thunkify(fs.readFile)
+const readFileThunk = thunk('data1.json', 'utf-8')
+readFileThunk((err, data) => {
+    // 获取文件内容
+})
+```
+
+## 接下来...
+
+了解了`thunk`函数，我们立刻就将`Generator`和异步操作进行结合
+
+## 求打赏
+
+如果你看完了，感觉还不错，欢迎给我打赏 ———— 以激励我更多输出优质内容
+
+![](http://images2015.cnblogs.com/blog/138012/201702/138012-20170228112237798-1507196643.png)