一分钟学完function*和yield:简单使用和应用场景

原创已于 2022-04-21 19:23:26 修改 · 591 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-04-21 19:21:22 首次发布

本文介绍了ES6中的Generator特性，通过一个简单的代码示例展示了其工作原理，包括如何使用yield和Generator对象。Generator允许异步编程以更同步的方式表达，但在实际应用中可能增加代码复杂性，作者建议除非必要，否则不推荐使用。文章提到了一种可能的使用场景——在步骤条中控制函数执行顺序，作为替代传统状态管理的一种方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

众所周知，es6中有一个没人用的新特性，yield+Generator
最近在学习File System Acess API的时候在官方文档中看到了function* 的异步写法，从来没有用过这种写法，去MDN学习了一下

使用方式

废话不多说，直接上代码

function* test(x){
    yield x
    y = yield 2
    yield fun(y)
}

function fun(x){
    return x
}

let a = test(11)

a.next() // {value: 11, done: false}
a.next() // {value: 2, done: false}
a.next(333) // {value: 2, done: false} 结束了
a.next() // {value: undefined, done: true}
a.next() // {value: undefined, done: true}
a.next(123) // {value: undefined, done: true}
a.next(()=>{}) // {value: undefined, done: true}
a.next('asd') // {value: undefined, done: true}

一步一步看
我们通过function* 这种声明方式定义了一个生成器函数，返回一个Generator对象并赋值给a
当我们第一次调用a.next()时，执行了yield x，其实也就是相当于return，返回了{value: 11, done: false}
当我们第二次调用a.next()时，执行了yield 2，返回了{value: 2, done: false}
当我们第三次调用a.next(333)时，执行了y=333和yield fun(y)，所以返回了{value: 2, done: false}
如果我们再调用a.next()，因为已经没有yield了，所以不管我们怎么调用，都是返回{value: undefined, done: true}
当然，这是最简单的用法，还有些高端（~~让人看不懂的~~ ）玩法，就不在此介绍了（~~我也不会~~ ）

使用场景

这玩意好像真的没什么大用…
而且写复杂了非常有可能让后续维护这段代码的人看不懂
我想了想，想到一个可能能用到的场景
比方说现在有一个步骤条，通过一次一次的点击依次调用fun1,fun2,fun3方法
正常来说，我们会在state里增加一个参数，去维护一个step，根据step来调用方法
但是我们也可以使用yield来实现

function* doStep(){
     yield fun1()
     yield fun2()
     yield fun3()
}

const myGenerator = doStep()

<Bottom onClick={()=>{myGenerator.next()}}>

总结

不推荐使用，除非你真的想用