【JavaScript】Generator

MDN-Generator

Generator对象由生成器函数返回，并且它符合可迭代协议和迭代器协议。

Generator-核心语法

核心语法:

1. 定义生成器函数
2. 获取generator对象
3. yield表达式的使用
4. 通过for of获取每一个yield的值

// 1. 通过function* 创建生成器函数 
function* foo() {// 遇到yield表达式时会暂停后续的操作yield 'a'yield 'b'yield 'c'return 'd'
}
// 2. 调用函数获取生成器
const f = foo()
// 3. 通过next方法获取yield 之后的表达式结果，会被包装到一个对象中
// 执行一次next 即可获取一次 yield之后的表达式结果
const res1 = f.next()
console.log(res1)// {value: 'a', done: false}
const res2 = f.next()
console.log(res2)// {value: 'b', done: false}
const res3 = f.next()
console.log(res3)// {value: 'c', done: false}
// 最后一次可以拿到return的结果
const res4 = f.next()
console.log(res4)// {value: 'd', done: true} 
// done 为true之后，获取到的value为undefined
const res5 = f.next()
console.log(res5)// {value: undefined, done: true} // 4. 通过for of 获取每一个yield之后的值，
const f2 = foo()
for (const iterator of f2) {console.log(iterator)
}

总结：

Generator-核心语法

1. 可以通过生成器函数(function* xxx(){})来生成Generator对象
2. 通过Generator对象的next方法可以获取yield表达式之后的结果

Generator-id生成器

使用Generator实现一个id生成器id。

核心步骤:

1. 定义生成器函数
2. 内部使用循环,通过yield返回id并累加

// 1. 通过function* 创建生成器函数 
function* generator() {let id = 0// 无限循环while (true) {// id累加并返回yield id++}
}
// 2. 调用函数获取生成器
const idMaker = generator()
// 3. 需要id的时候 通过next获取即可
const { value: id1 } = idMaker.next()
console.log(id1)
const { value: id2 } = idMaker.next()
console.log(id2)

总结：

Generator-id生成器

1. 生成器函数内部的代码会在调用next方法时执行,利用这一特点,可以实现任意的生成器,需要时调用next即可获取结果

Generator-流程控制

遇到yield表达式时会暂停后续的操作。使用Generator实现流程控制。

核心步骤:

1. yield后面跟上天气查询逻辑
2. 接口文档-天气预报
3. 参考code:北京 110100 上海 310100 广州 440100 深圳 440300

  <button class="getWeather">天气查询</button><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script><script>/*** 需求：流程控制，依次查询，北上广深的天气预报* 参考code: 北京 110100  上海 310100  广州 440100 深圳 440300* 接口文档: https://apifox.com/apidoc/project-1937884/api-49760220* */function* weatherGenerator() {// 北京yield axios('http://hmajax.itheima.net/api/weather?city=110100')// 上海yield axios('http://hmajax.itheima.net/api/weather?city=310100')// 广州yield axios('http://hmajax.itheima.net/api/weather?city=440100')// 深圳yield axios('http://hmajax.itheima.net/api/weather?city=440300')}const cityWeather = weatherGenerator()document.querySelector('.getWeather').addEventListener('click', async () => {const res = await genCity.next()console.log(res)})</script>

同理，可以使用 Promise 链式调用。

city.next().value.then(res => {console.log('res:', res)return city.next().value
}).then(res => {console.log('res:', res)
})

总结：

Generator-流程控制

1. 使用Generator控制流程的本质是利用yield关键字来分隔逻辑。比如示例中依次调用了多个接口,通过yield分隔,通过next来触发调用。