generator函数的使用场景

最新推荐文章于 2024-12-07 15:04:36 发布

原创最新推荐文章于 2024-12-07 15:04:36 发布 · 788 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#generator

js 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了JavaScript中Generator函数的应用，包括其基本语法、如何控制流程执行，以及与Promise和async/await的区别对比。此外还探讨了Generator在异步操作、控制流管理和实现对象迭代等方面的实用案例。

笔记：

generator 便于流程执行，代码可读性高

yield定义不同的状态，没有执行到return的时候返回的都是{value：‘...’, done:false}，执行完return后 done为true，没有return语句最后返回{value: undefined, done: true}，每次return只能执行一次。

yield表达式返回undefined，next()传的参数相当于是上一个yield的返回值（yield表达式返回值为undefined，{value:'', done:''}是next()的返回值，value是yield后面表达式的值）

generator不能自动执行，需要手动执行，yield相当于在函数内部debugger，next()则可以恢复执行

//通过generator的方式执行
let spring = function() {
    return '春';
};
let summer = function() {
    return '夏';
};
let autumn = function() {
    return '秋';
};
let winter = function() {
    return '冬';
};

function *seasons() {
    yield spring();
    yield summer();
    yield autumn();
    yield winter();
}
let s = seasons();

s.next();  //{value: '春', done: false}
//...
//结束
s.next();  //{value: undefined, done: true}

对比：

知道generator函数是作为解决异步的一种方式，但是现在异步主要用promise和 async/await ，那三者之间的对比区别在哪里，generator还有什么应用呢

generator应用：

（1）异步：不方便在于不能自动执行，async相当于用promise给generator又封装了一层，使代码能自动执行

function spawn(genF) {
    return new Promise(function(resolve, reject) {
        const gen = genF();
        function step(nextF) {
            let next;
            try {
                next = nextF();
            } catch(e) {
                return reject(e);
            }
            if(next.done) {
                return resolve(next.value);
            }
            Promise.resolve(next.value).then(function(v) {
                step(function() { return gen.next(v); });
            }, function(e) {
                step(function() { return gen.throw(e); });
            });
        }
        step(function() { return gen.next(undefined); });
    });
}

（2）控制流管理：保证代码的顺序直线进行，流管理比promise更方便，async也同样方便

（3）为对象部署Iterator接口：generator的返回值为迭代器对象，赋值给Symbol.iterator属性，有了这个属性就相当于有了Iterator接口，这样才能使用 for of