重学ES - 6(Generator & Iterator & Module)
一、Generator
generator(生成器)是ES6标准引入的新的数据类型。一个generator看上去像一个函数,但可以返回多次。通俗的讲 Generators 是可以用来控制迭代器的函数。它们可以暂停,然后在任何时候恢复。
- 常规循环
for (let i = 0; i < 3; i += 1) {
console.log(i)
}
// this will return immediately 0 -> 1 -> 2 -> 3 -> 4
- 利用 Generator
function* f(x) {
yield x + 1;
yield x + 2;
return x + 3;
}
const genForLoop = f()
console.log(genForLoop.next()) // {value: 2, done: false}
console.log(genForLoop.next()) // {value: 3, done: false}
console.log(genForLoop.next()) // {value: 4, done: true}
对比下代码,常规的循环只能一次遍历完所有值,Generator 可以通过调用 next 方法拿到依次遍历的值,让遍历的执行变得“可控”。
1. 基本语法
定义
function* gen() {
yield 1
yield 2
yield 3
}
let g = gen()
// "Generator { }"
function* f(args) {
args.forEach(item => {
yield item
})
}
// Uncaught SyntaxError: Unexpected identifier
// yield只能在生成器内部使用,不能在其他函数中使用,forEach属于函数,所以这里不能使用
这个是 Generator 的定义方法,有几个点值得注意:
- 比普通函数多一个 *
- 函数内部用 yield 来控制程序的执行的“暂停”
- 函数的返回值通过调用 next 来“恢复”程序执行
- yield只能在生成器内部使用,不能在其他函数中使用
注意
Generator不能当做构造函数来使用,只能作为生成器来使用
Generator 函数的定义不能使用箭头函数,否则会触发 SyntaxError 错误
let generator = * () => {} // SyntaxError
let generator = () * => {} // SyntaxError
let generator = ( * ) => {} // SyntaxError
yield 表达式
yield 关键字用来暂停和恢复一个生成器函数
关于 yield 表达式,要注意yield 表达式的返回值是 undefined,但是遍历器对象的 next 方法可以修改上一个yield的返回值。
function* f(x) {
let y = 2 * (yield (x + 1))
let z = yield (y / 3)
return x + y + z
}
const f1 = f(1);
console.log(f1.next()) // 2 因为x传入的值为1,所以这里计算x+1=2
console.log(f1.next()) // NaN 因为这里next中没有传递值,所以上一个yield会被赋值为undefined,y=2*undefined = NaN
console.log(f1.next()) // NaN 同理1+NaN+NaN=NaN
function* f(x) {
let y = 2 * (yield (x + 1))
let z = yield (y / 3)
return x + y + z
}
const f1 = f(5);
console.log(f1.next()) // 6
console.log(f1.next(12)) // 8
console.log(f1.next(13)) // x=5 y=24 z=13 注意这里y=24,因为上次yield(x+1)被赋值为了12
方法
Generator 对象有几个方法,next、return、throw。
- next([value]),同上面案例,next 方法可以修改上一个yield的返回值。
function* gen() {
var val = 100
while (true) {
val = yield val
}
}
var g = gen()
console.log(g.next(20).value) // 100
console.log(g.next(30).value) // 30
console.log(g.next(40).value) // 40
console.log(g.next(50).value) // 50
// 这个函数如果不是generator的话,就会是一个死循环函数
- return()
return 方法可以让 Generator 遍历终止,有点类似 for 循环的 break。
function* gen() {
yield 1
yield 2
yield 3
}
var g = gen()
console.log(g.next()) // {value: 1, done: false}
console.log(g.return()) // {value: undefined, done: true}
console.log(g.next()) // {value: undefined, done: true}
从 done 可以看出代码执行已经结束。
当然 return 也可以传入参数,作为返回的 value 值。
function* gen() {
yield 1
yield 2
yield 3
}
var g = gen()
console.log(g.next()) // {value: 1, done: false}
console.log(g.return(100)) // {value: 100, done: true}
console.log(g.next()) // {value: undefined, done: true}
- throw()
可以通过 throw 方法在 Generator 外部控制内部执行的“终断”。
function* gen() {
while (true) {
try {
yield 42
} catch (e) {
console.log(e.message)
}
}
}
let g = gen()
console.log(g.next()) // { value: 42, done: false }
console.log(g.next()) // { value: 42, done: false }
console.log(g.next()) // { value: 42, done: false }
// 中断操作
g.throw(new Error('break'))
console.log(g.next()) // {value: undefined, done: true}
TIP
如果想退出遍历 catch 之后可以配合 return false 使用,能起到 “break” 的作用
2. 应用场景
场景1
还是前面的异步操作,按顺序读取a.json、b.json、c.json,如果使用Generator该如何实现呢?
function request(url) {
ajax(url, res => {
getData.next(res)
})
}
function* gen() {
let res1 = yield request('static/a.json')
console.log(res1)
let res2 = yield request('static/b.json')
console.log(res2)
let res3 = yield request('static/c.json')
console.log(res3)
}
let getData = gen()
getData.next()
场景2
我们经常玩一些小游戏,比如数数字,敲7,到7和7的倍数,无限循环转圈去数数
function* count(x = 1) {
while (true) {
if (x % 7 === 0) {
yield x
}
x++
}
}
// es5中就是个死循环 因为es5的循环需要有个终止值,但我们这个需求没有终止,一直在数数
let n = count()
console.log(n.next().value)
console.log(n.next().value)
console.log(n.next().value)
console.log(n.next().value)
console.log(n.next().value)
console.log(n.next().value)
通过 Generator 我们就能轻松实现,只要调用 n.next 我们就知道下一个数是什么了,而使用普通函数却没法做到。不信你试试看?
二、Iterator
处理集合中的每个项是很常见的操作。JavaScript 提供了许多迭代集合的方法,从简单的for循环到map()和filter()。迭代器和生成器将迭代的概念直接带入核心语言,并提供了一种机制来自定义for…of循环的行为。
如果对 MDN 这个描述理解不是很到位的话,可以看下接下来这个小示例:
let authors = {
allAuthors: {
fiction: [
'Agatha Christie',
'J. K. Rowling',
'Dr. Seuss'
],
scienceFiction: [
'Neal Stephenson',
'Arthur Clarke',
'Isaac Asimov',
'Robert Heinlein'
],
fantasy: [
'J. R. R. Tolkien',
'J. K. Rowling',
'Terry Pratchett'
]
}
}
这个数据结构是汇总了所有作者,每个作者按创作性质进行了分类。如果我们想获取所有作者的名单,该怎么做呢?
for (let author of authors) {
console.log(author)
}
WARNING
你发现这个遍历遇到了报错:Uncaught TypeError: authors is not iterable
for (let key in authors) {
let r = []
for (let k in authors[key]) {
r = r.concat(authors[key][k])
}
console.log(r)
// ["Agatha Christie", "J. K. Rowling", "Dr. Seuss", "Neal Stephenson", "Arthur Clarke", "Isaac Asimov", "Robert Heinlein", "J. R. R. Tolkien", "J. K. Rowling", "Terry Pratchett"]
}
这个做法确实可以,实际上也是手动实现的遍历加数据合并,这其实不算是遍历。这个小节就是讲述如何给这种自定义的数据结构进行遍历。
基本语法
Iterator 就是 ES6 中用来实现自定义遍历的接口,按照上述的示例,我们来实现下这个接口:
authors[Symbol.iterator] = function() {
let allAuthors = this.allAuthors
let keys = Reflect.ownKeys(allAuthors)
let values = []
return {
next() {
if (!values.length) {
if (keys.length) {
values = allAuthors[keys[0]]
keys.shift()
}
}
return {
done: !values.length,
value: values.shift()
}
}
}
}
这个代码在数据结构上部署了 Iterator 接口,我们就可以用 for…of 来遍历代码了:
for (let value of authors) {
console.log( `${value}` )
}
从代码上我们看到了自定义遍历器的强大,但是我们怎么理解 Iterator 呢?首先,要理解几个概念:可迭代协议和迭代器协议。
1. 迭代器协议
属性 值 必选
next 返回一个对象的无参函数,被返回对象拥有两个属性:done 和 value Y
这是两个概念:可迭代协议、迭代器协议。通俗的讲,迭代器协议要求符合以下条件:
首先,它是一个对象
其次,这个对象包含一个无参函数 next
最后,next 返回一个对象,对象包含 done 和 value 属性。其中 done 表示遍历是否结束,value 返回当前遍历的值。