es6: 生成器Generator-优快云博客

本文链接：https://blog.youkuaiyun.com/u012872771/article/details/103666576

本文深入探讨JavaScript中的Generator函数，解析其工作原理，包括如何指定开始和暂停执行，以及如何通过yield关键字实现函数内部的状态控制。同时，文章展示了如何利用Generator函数进行迭代操作，包括基本的迭代流程和对象的迭代实现。

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

Generator函数: 可以指定开始和暂停

        function * fn() {            // 初始指针
    console.log('楚雄')
    yield 'LZL'              // 执行本语句后暂停
    console.log('普洱')
    yield 'YC'
    console.log('大理')
    yield 'LCY'
}                            // 到这里返回undefined true
const people = fn()          // 返回一个迭代器
console.log(people.next())   // 返回一个对象 {value: "LZL", done: false}

传参:

        function * fn(x){
    var y = yield (x + 2)
    var z = yield (y / 3)
    return (x + y + z)
}
const it = fn(4)
 // console.log(it.next())       // {value: 6, done: false}
 // console.log(it.next())       // {value: NaN, done: false}
 // console.log(it.next())       // {value: NaN, done: false}

console.log(it.next())           // {value: 6, done: false}   4 + 2 value = 6
console.log(it.next(6))          // {value: 2, done: false}   y语句赋值继续 语句中右边整体的等于6 所以碰上yield语句右边的时候除3value等于2
console.log(it.next(10))         // {value: 20, done: true}   返回 4 + 6 + 10 = 10 因为return了 所以done: true

for of

        function * fn() {              // 初始指针
    console.log('楚雄')
    yield 'LZL'            // 执行本语句后暂停
    console.log('普洱')
    yield 'YC'
    console.log('大理')
    yield 'LCY'
}                            // 到这里返回undefined true
const people = fn()          // 返回一个迭代器
for(var person of people){   // 使用for of
    console.log(person)      // 全部输出
}

实现对象的迭代: 在上一篇迭代器中讲到，iterator迭代器不能迭代对象，在这里配合Generator生成器使用即可实现迭代对象

        let obj = {
    name: 'AAA',
    job: 'BBB',
    family: 'CCC'
}
obj[Symbol.iterator] = function * () {    // 使用生成器给对象拥有迭代器
    yield obj.name;                       // 迭代对象中的属性
    yield obj.job;
    yield obj.family;
    // return;
}
for(var prop of obj){
    console.log(prop)                      // 实现迭代对象
}