前端面试系列-JavaScript-理解generator及实现原理

最新推荐文章于 2024-05-13 01:26:59 发布

原创

最新推荐文章于 2024-05-13 01:26:59 发布 · 2.1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #面试 #异步/同步

本文详细介绍了JavaScript中的生成器（Generator）及其使用案例，包括给普通对象添加遍历器、异步操作的同步化表达、实现状态机、轮询等。生成器是一种可以暂停和恢复的函数，通过`yield`关键字实现。它们可以改变异步编程的模式，将回调函数或Promise链式调用转化为同步风格的代码，简化复杂逻辑。

一、generator

generator:可以将生成器视为可以暂停和恢复的进程（代码段),代码在执行的过程中可以主要交出控制权
genearator 语法: function* 是一个新的关键字用于生成器函数（也有生成器方法）。
yield是generator可以自行暂停的运算符。此外，generator还可以通过yield接收输入和发送输出。

function* example() {
 yield 1;
 yield 2;
 yield 3;
}
var iter=example();
iter.next();//{value:1，done:false}
iter.next();//{value:2，done:false}
iter.next();//{value:3，done:false}
iter.next();//{value:undefined，done:true}

Generator函数有多个返回值状态（每个yield关键字后跟一个状态），只有调用next()函数时才会返回值，每调用一次next()函数就返回一个对象{value: xxx, done: false}，直到没有对应的yield了就返回done状态为true的对象{value: undefined, done: true}。

与普通函数相比二者有如下区别:

普通函数使用 function 声明，生成器函数用 function*声明
普通函数使用 return 返回值，生成器函数使用 yield 返回值
普通函数是 run to completion 模式，即普通函数开始执行后，会一直执行到该函数所有语句完成，在此期间别的代码语句是不会被执行的；生成器函数是 run-pause-run 模式，即生成器函数可以在函数运行中被暂停一次或多次，并且在后面再恢复执行，在暂停期间允许其他代码语句被执行

二、使用案例

1.给普通对象添加遍历器

let obj = {
    name:'zhangsan',
    age:18,
    sex:'man'
}
for(var value of obj){
  console.log(value);//报错 obj is not iterable
}
console.log([...obj]);//报错 obj is not iterable

一个普通的对象obj默认是没有遍历器的，意味着不能使用for…of遍历，且不能使用…操作符解构。
可见都是报错obj is not iterable，我们通过Generator函数给其添加遍历器。

let obj = {
    name:'zhangsan',
    age:18,
    sex:'man'
}
obj[Symbol.iterator]=function* (){
    for(var key in obj){
        yield obj[key];
    }
}
for(let value of obj){
    console.log(value);