迭代器
一个迭代器对象 ，知道如何每次访问集合中的一项， 并跟踪该序列中的当前位置。在 JavaScript 中 迭代器是一个对象，它提供了一个next() 方法，用来返回序列中的下一项。这个方法返回包含两个属性：done和 value。
es5可以模拟：
function createI(items) {
let i = 0
return {
next () {
i++
return {
done: items.length <= i ,
value: items[i]
}
}
}}
a = createI([{a: 1}, {b: 2}, {c: 3}])
a.next() // {done: false, value: {…}}done: falsevalue: {b: 2}__proto__:Object
a.next() // {done: false, value: {…}}done: falsevalue: {c: 3}__proto__:Object
a.next() // {done: true, value: undefined}
a.next() // {done: true, value: undefined}
a.next() // {done: true, value: undefined}
a.next() // {done: true, value: undefined}
生成器
GeneratorFunction 是一个可以作为迭代器工厂的特殊函数。当它被执行时会返回一个新的Generator对象。 如果使用
function*语法，则函数将变为GeneratorFunction。每执行完一条yield(es6 关键字)语句就会停止执行。
function* idMaker() {
yield 1
yield 2
yield 3}
var gen = idMaker();
gen.next() // {value: 1, done: false}
gen.next() // {value: 2, done: false}
gen.next() // {value: 3, done: false}
gen.next() // {value: undefined, done: true}
gen.next() // {value: undefined, done: true}
yield关键字只能在生成器内部使用，类似于嵌套函数的return不能作为外部函数的return，yield的使用也不能穿透:
function *c (items) {
items.forEach(v => {
yield v // 报错：语法错误
})
}
可迭代对象和for-of循环
可迭代对象具有Symbol.iterator属性,是一种与迭代器密切相关的对象。es6中数组，set，map，字符串都是可迭代的对象。
arr = [1,2,3]
for(let v of arr) {
console.log(v)
}
1
2
3
for-of循环通过调用该对象的Symbol.iterator方法来获取迭代器，随后迭代器的next方法被多次调用，done属性为true退出循环。
也可以直接访问默认迭代器。
arr = [1,2,3]
arr[Symbol.iterator] // ƒ values() { [native code] }
a = arr[Symbol.iterator]()
a.next() // {value: 1, done: false}
a.next() // {value: 2, done: false}
a.next() // {value: 3, done: false}
a.next() // {value: undefined, done: true}
a.next() // {value: undefined, done: true}
内建迭代器
es6中三种类型的集合对象:数组 Map Set都内建了三种迭代器：entries() values() keys()
- entries
function make(items) {
for(let item of items.entries()){
console.log(item)
}
}
a = ['a', 'b', 'c']
make(a)
// [0, "a"]
// [1, "b"]
// [2, "c"]
b = new Set(['a', 'b', 'c'])
make(b)
// ["a", "a"]
// ["b", "b"]
// ["c", "c"]
c = new Map([
['aa', 'a'],
['bb', 'b'],
['cc', 'c']
])
make(c)
// ["aa", "a"]
// ["bb", "b"]
// ["cc", "c"]
每项都是: [key, value], set key和value一样
- values
function make1(items) {
for(let item of items.values()){
console.log(item)
}
}
make1(a)
a
b
c
make1(b)
a
b
c
make1(c)
a
b
c
表现一致
- keys
function make2(items) {
for(let item of items.keys()){
console.log(item)
}
}
make2(a)
0
1
2
make2(b)
a
b
c
make2(c)
aa
bb
cc
返回的是key,只包含索引，不包含其他属性。values的表现也是如此。但用其他的方式不一定：
a.xxx = 'xxx'
Object.keys(a) // ["0", "1", "2", "xxx"]
make2(a)
0
1
3
给迭代器传参数
如果给迭代去的next方法传参数，这个参数的值就会替代生成器内部上一条yield语句的返回值。但第一次调用无论传什么值都会被忽略(因为替代的是上一条的返回值)。
function *createIt() {
let first = yield 1
let second = yield first +2
yield second + 3
}
let it = createIt()
it.next(100) // 第一次忽略
// {value: 1, done: false}
it.next(200) // 用200替代了1
// {value: 202, done: false}
it.next(300) // 300替代了202
// {value: 303, done: false}
return 语句
function *createIt() {
let first = yield 1
let second = yield first +2
yield second + 3
}
it = createIt()
it.next()
{value: 1, done: false}
it.next()
{value: "zlj", done: true}
it.next()
{value: undefined, done: true}
return表示所有操作已经完成，return的值作为value的值。done为true
比较有意思的是:
function *createIt() {
yield 1
return yield 'zlj'
yield 2
yield 3
}
it = createIt()
it.next()
{value: 1, done: false}
it.next()
{value: "zlj", done: false} // done为false，但是后面访问为true，因为先执行了yield语句，然后再执行return
it.next()
{value: undefined, done: true}
it.next()
{value: undefined, done: true}
it.next()
{value: undefined, done: true}
委托生成器
可以将多个生成器放在另一个生成器里面。
function *createIt1(){
yield 1
yield 2
}
function *createIt2(){
yield 3
yield 4
}
function *createIt(){
// 委托了两个生成器
yield *createIt1()
yield *createIt2()
}
it = createIt()
it.next()
{value: 1, done: false}
it.next()
{value: 2, done: false}
it.next()
{value: 3, done: false}
it.next()
{value: 4, done: false}
it.next()
{value: undefined, done: true}
// 直到不能再返回为止
简单任务执行器
由于yield语句会暂停当前的函数执行过程，并且等待下一次调用next()方法。因此可以创建一个函数，在调用过程中生成相应的迭代器，从而在不用回调函数的情况下实现异步编程:
function run(taskFn) {
let task = taskFn()
let result = task.next()
function step () {
if (!result.done) {
result = task.next()
step()
}
}
step()
}
run(function *() {
console.log(0)
yield 1
console.log(1)
yield 2
console.log(2)
yield 3
console.log(3)
})
0
1
2
3
node.js 版
// 多任务执行 生成器版
const fs = require('fs')
function run (taskDef) {
let task = taskDef()
let result = task.next()
function step () {
if (!result.done) {
if (typeof result.value === 'function') {
result.value((err, data) => {
if(err) {
result = task.throw(err)
return
}
result = task.next(data)
step()
})
} else {
result = task.next(result.value)
step()
}
}
}
step()
}
function readFile(file) {
return function (cb) {
fs.readFile(file, cb)
}
}
run(function *() {
let contents = yield readFile('./README.md')
console.log('c', contents)
let contents2 = yield readFile('./package.json')
console.log('c2', contents2)
let content3 = yield readFile('./gulpfile.js')
console.log('c3', content3)
console.log('done')
})
// 多任务执行 promisie版
const fs = require('fs')
function run (taskDef) {
let task = taskDef()
let result = task.next()
function step () {
if (!result.done) {
let p = Promise.resolve(result.value)
p.then(function (v) {
result = task.next(v)
step()
}).catch(function (error) {
result = task.throw(error)
step()
})
}
}
step()
}
function readFile(file) {
return new Promise(function (resolve, reject) {
fs.readFile(file, (err, data) => {
if (err) {
reject(err)
} else {
resolve(data)
}
})
})
}
run(function *() {
let contents = yield readFile('./README.md')
console.log('c', contents)
let contents2 = yield readFile('./1package.json')
console.log('c2', contents2)
let content3 = yield readFile('./gulpfile.js')
console.log('c3', content3)
console.log('done')
})
用async await 更简洁
生成器实现异步编程
传统的异步编程:
// 这是一个回调地狱
fs.readFile(fileA, 'utf-8', function (err, data) {
fs.readFile(fileB, 'utf-8', function (err, data) {
// ...
});
});
// 或者使用promise
var readFile = require('fs-readfile-promise');
readFile(fileA)
.then(function (data) {
console.log(data.toString());
})
.then(function () {
return readFile(fileB);
})
.then(function (data) {
console.log(data.toString());
})
.catch(function (err) {
console.log(err);
});
// 这样每次完成都有return一个新的promise
