浅谈 ES6 generator 理解

浅谈 ES6 generator 理解

本文将以个人能力范围内谈谈对ES6 generator 的理解，下方是博主认为比较好的 generator 的理解提供查阅。

深入理解js中的yield - 简书 (jianshu.com)

Generator 函数的含义与用法 - 阮一峰的网络日志 (ruanyifeng.com)

generator 函数可以理解为异步函数的容器，这些异步任务执行过程中可被任意时刻暂停，任务暂停可以由函数外部控制。

generator (生成器)函数的声明

与普通函数声明方式不同，generator 函数多出 * 表示一个generator 函数如：

function* foo () {
    let a = 0
    return a
}
let f = foo() // 执行foo函数
// 猜测结果？
console.log(f) // 0 
// 事实上
console.log(f) // foo {<suspended>} ,suspended 暂时的
console.log(typeof f) // object 

执行 generator 函数返回的是一个 suspended 状态的 generator 对象。有点类似对象实例化，但不是实例化哈，他就是返回了一个 generator 对象

generator （生成器）对象

generator（生成器）对象 可以被 for … of 遍历

function* add () {
	let num = 0
    yield num++
    yield num++
    yield num++
}
let f = add()
for ( let item of f ){
	console.log(item)
}
// 0 1 2

console.log(f) // foo {<suspended>}

展开 foo

查看原型 Generator, Generator 继承 Object

原型链中存在三个方法:

next: ƒ next()
return: ƒ return()
throw: ƒ throw()

next() 方法

返回一个由 yield 表达式生成的值，yield 返回的是一个 Iterator（迭代器）对象，它有两个属性，value和done，分别代表返回值和迭代状态。下面将 yield 将会详细讲解

reteun() 方法

返回给定的值并结束生成器,如果没有给定值则返回 undefined

throw()方法

向生成器抛出一个错误。这里后续会补充。

generator 之 yield 关键字

generator （生成器）函数执行顺序和普通函数不同，它可被暂停，并支持多次返回结果。

执行到 yield 关键字,也可理解为在这里暂停，之后将会返回一个 内部指针 及 Iterator（迭代器）对象，需要配合 next() 方法 调用。

// 累加
function* add () {
	let num = 0
    yield num++
    yield num++
    yield num++
}
let a = add ()
// console.log(a.next()) // {value: 0, done: false} value 表返回的值，done 表 generator 生成器函数的迭代状态
console.log(a.next().value) // 0 , 第一次 yield
console.log(a.next().value) // 1 , 第二次 yield
console.log(a.next().value) // 2 , 第三次 yield
// 下面代码因为没有定义 return 语句的返回值，所以返回 undefined
console.log(a.next().value) // undefined , 第四次 yield

return() 方法在 generator (生成器) 函数中的说明

return() 方法： 返回给定值(传参的值)并结束 generator （生成器）函数，如果没有定义给定值则返回 undefind,请看下面代码

function* bar () {
	yield 'bar'
}
let b = bar()
console.log(b.return().value) // undefind
console.log(b.return('min').value) // min

异步 与 generator (生成器) 函数

菜鸟代码，轻喷。

function* doSomething (somethings) {
    let doList = somethings
    for(let i = 0 ; i < doList.length ; i++){
    	// 每次返回一个 promise 对象
        yield new Promise((resolve, reject) => {
            resolve(doList[i])
        })
    }
}
let sothings = ['起床', '坐地铁', '上班', '下班', '吃饭', '洗漱', '睡觉']
async function star () {
    let person = doSomething(sothings)
    // 遍历 person 对象
    for(item of person){
        let res = await item
        console.log(res)
        if(res == '下班') console.log(res + '心情愉悦')
    }
}
star() // 起床 坐地铁 上班 下班 下班心情愉悦 吃饭 洗漱 睡觉