Generator-CSDN博客

本文链接：https://blog.csdn.net/weixin_44526589/article/details/111870885

Generator 学习

概念

Generator 函数是 ES6 提供的一种异步编程解决方案。Generators 是可以用来控制迭代器的函数。它们可以暂停，然后在任何时候恢复。执行 Generator 函数会返回一个遍历器对象。

例子

简单例子：

function* helloWorldGenerator() {
    yield 'hello';
    yield 'world';
    return 'ending';
}
let hw = helloWorldGenerator();
console.log(hw);
console.log(hw.next());
console.log(hw.next());
console.log(hw.next());
console.log(hw.next());

输出结果：

Object [Generator] {}
{ value: 'hello', done: false }
{ value: 'world', done: false }
{ value: 'ending', done: true }
{ value: undefined, done: true }

for循环

function* generatorForLoop() {
    for (let i = 0; i < 5; i += 1) {
        yield console.log(i)
    }
}
const genForLoop = generatorForLoop()
console.log(genForLoop.next()) // first console.log - 0
console.log(genForLoop.next()) // 1
console.log(genForLoop.next()) // 2
console.log(genForLoop.next()) // 3
console.log(genForLoop.next()) // 4
console.log(genForLoop.next())

输出：

0
{ value: undefined, done: false }
1
{ value: undefined, done: false }
2
{ value: undefined, done: false }
3
{ value: undefined, done: false }
4
{ value: undefined, done: false }
{ value: undefined, done: true }

调用 Generator 函数，返回一个遍历器对象，代表 Generator 函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield表达式后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。

yield 表达式

由于 Generator 函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。

遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。
下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。
如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。
如果该函数没有return语句，则返回的对象的value属性值为undefined。

与 Iterator 接口的关系

由于 Generator 函数就是遍历器生成函数，因此可以把 Generator 赋值给对象的Symbol.iterator属性，从而使得该对象具有 Iterator 接口。

for…of 循环

for…of循环可以自动遍历 Generator 函数运行时生成的Iterator对象，且此时不再需要调用next方法

扩展

除了for…of循环以外，扩展运算符（…）、解构赋值和Array.from方法内部调用的，都是遍历器接口。这意味着，它们都可以将 Generator 函数返回的 Iterator 对象，作为参数。

function* numbers() {
    yield 1
    yield 2
    return 3
    yield 4
}
// 扩展运算符
console.log([...numbers()]) // [1, 2]
// Array.from 方法
console.log(Array.from(numbers())) // [1, 2]
// 解构赋值
let [x, y] = numbers();
console.log(x, y); // 1 , 2
// for...of 循环
for (let n of numbers()) {
    console.log(n)  // 1 2
}