重温JavaScritp(lesson24) 生成器

最新推荐文章于 2024-09-11 17:09:49 发布
最新推荐文章于 2024-09-11 17:09:49 发布
阅读量160 收藏
点赞数
分类专栏： 重温JavaScript 文章标签： javascript es6 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dupeng15bs/article/details/116665765
版权

今天我们要来学习生成器的有关内容。生成器是ES6的新特性。生成器的定义方式是先创建一个函数，调用这个函数再返回生成器对象g。这个生成器对象g是一个可迭代对象，我们可以通过Array.from(g)，[…g]，for..of循环来使用它。

1.生成器函数的定义

生成器形式是一个函数，function关键字的后面、函数名称的前面加一个星号来表示它是一个生成器，只要是可以定义函数的地方就可以定义生成器。

注意：生成器函数的星号不受两侧的空格影响。这个星号可以紧接着function关键字，可以处在函数名和function关键字之间并用若干空格和两者隔开，也可以在其后紧接着函数名。例如：

function * newName(){}
function* newName(){}
function *newName(){}

如上代码中这三种形式都是等价的。

生成器函数允许我们声明一种特殊的迭代器，这种迭代器会推迟代码的执行，同时保持自己的上下文。下面我来看一下生成器函数的迭代：

2.生成器函数的迭代

function * newName(){
    yield 'new'
    yield 'name'
    yield 'study'
    yield 'JavaScript'
}

const test = newName()
let res1 = typeof test[Symbol.iterator] === 'function'
console.log('res1',res1)
let res2 = typeof test.next === 'function'
console.log('res2',res2)
let res3 = test[Symbol.iterator]() === test
console.log('res3',res3)
console.log(Array.from(test))

之前我们学习过迭代器，每次迭代都会调用next方法从序列中取出一个值。但是在生成器中看不到返回值的next方法，只能看到向序列中添加的yield关键字。

生成器对象同时遵守可迭代协议和迭代器协议，通过如上代码我们可以知道：

（1）生成器对象test是通过生成器函数newName创建的；

（2）生成器对象test是一个可迭代对象，因为它拥有Symbol.iterator属性，此属性是一个方法；

（3）生成器对象test也是一个迭代器，因为它有一个next方法；

（4）生成器对象test的迭代器就是它自己。

以上代码运行结果如下所示：

图片

迭代会触发生成器函数中的副作用。当生成器函数恢复执行以返回序列中下一个元素的时候，每一个yield语句后面的console.log()语句都会执行：

function * newName(){
    yield 'new'
    console.log(1)
    yield 'name'
    console.log(2)
    yield 'study'
    console.log(3)
    yield 'JavaScript'
    console.log(4)
}
console.log([...newName()])

运行效果如下图：

图片

再来看一个使用for...of的例子：

function * newName(){
    yield 'new'
    console.log(1)
    yield 'name'
    console.log(2)
    yield 'study'
    console.log(3)
    yield 'JavaScript'
    console.log(4)
}
for(let item of newName()){
    console.log(item)
}

运行结果如下图：

图片

 

3.使用yield* 委托生成序列

生成器函数可以使用 yield* 将生成序列的任务委托给一个生成器对象或其他可迭代对象。如下代码所示：

function * test() {
    yield* 'hello'
}
console.log([...test()])

运行结果如下图：

图片

 

当然直接使用[…'hello']更简单。然而，有多条yield语句时，委托的作用就体现出来了，如下代码所示：

function * test(name) {
    yield* 'hello '
    yield* name
}
console.log([...test('newName')])

运行结果如下图：

图片

我们可以通过yield* 将生成序列的任务委托给任何遵守可迭代协议的对象，而不仅仅是字符串。如下代码就展示了如何使用yield和yield*，并组合其他生成器函数、可迭代对象和扩展操作符来描述一个值序列：

const test1 = {
    [Symbol.iterator]() {
        const items = ['n','e','w']
        return {
            next: () => ({
                done: items.length === 0,
                value: items.shift()
            })
        }
    }
}
function* test2(num1,num2) {
    yield num1+num2
    yield num2*num2
}
function* test3(){
    yield* test1
    yield 777
    yield* ['new','name']
    yield* [...test2(2,3)]
    yield [...test2(2,3)]
}
console.log([...test3()])

运行结果如下图：

图片

 

除了使用Array.from(g)，[…g]，for..of的方式来迭代生成器对象，我们也可以直接手工迭代生成器对象：

4.手工迭代生成器

能够手工迭代生成器的原因是，生成器器对象与其他可迭代对象一样，有Symbol.iterator属性，也就可以通过next方法按需取值。

如下代码展示了：创建了生成器newName，以及如何使用生成器对象generatorTest和while循环来手工迭代它：

function * newName(){
    yield 'new'
    yield 'name'
    yield 'study'
    yield 'JavaScript'
}
const generatorTest = newName()
while(true) {
    const item = generatorTest.next()
    if(item.done) {
        break
    }
    console.log(item.value)
}

代码执行结果如下图所示

图片

 

和for…of循环比较而言，用迭代器遍历生成器看起来比较麻烦，但是有一些场景却比较合适。因为for…of是一个同步循环，而有迭代器的话，什么时候调用next()方法就可以由我们控制。

迭代完生成器generatorTest的整个序列后，再调用next()方法不会有什么变化，只会返回{done:true},如下代码所示：

function * newName(){
    yield 'new'
    yield 'name'
    yield 'study'
    yield 'JavaScript'
}
const generatorTest = newName()
while(true) {
    const item = generatorTest.next()
    if(item.done) {
        break
    }
    console.log(item.value)
}
console.log(generatorTest.next())
console.log(generatorTest.next())

代码执行结果如下图所示：

图片

 

如下代码定义了一个生成无穷斐波那契序列的生成器，然后我们实例化了生成器对象并读取序列中的前3个值：

function *f() {
    let f1 = 0
    let f2 = 1
    while(true) {
        yield f2
        const next = f1 + f2
        f1 = f2
        f2 = next
    }
}
const g = f()
console.log(g.next())
console.log(g.next())
console.log(g.next())

代码运行结果如下图所示：

图片

 

也可以使用可迭代对象来实现与此相似的效果：

const f = {
    [Symbol.iterator]() {
        let f1 = 0
        let f2 = 1
        return{
            next() {
                const value = f2
                const next = f1 + f2
                f1 = f2
                f2 = next
                return {
                    value,
                    done: false
                }
            }
        }
    }
}
const g = f[Symbol.iterator]()
console.log(g.next())
console.log(g.next())
console.log(g.next())
console.log(g.next())

代码运行结果如下图所示：

图片

 

如果将Symbol.iterator属性改写成为一个生成器函数，那么它照样会工作，如下代码所示：

const f = {
    *[Symbol.iterator]() {
        let f1 = 0
        let f2 = 1
        while(true) {
            yield f2
            const next = f1 + f2
            f1 = f2
            f2 = next
        }
    }
}
const g = f[Symbol.iterator]()
console.log(g.next())
console.log(g.next())
console.log(g.next())
console.log(g.next())
console.log(g.next())

代码运行结果如下图所示：

图片

 

验证可迭代协议的有效性：如下代码中我们使用了for…of 验证了如果symbol.iterator属性是一个生成器的情况。

const f = {
    *[Symbol.iterator]() {
        let f1 = 0
        let f2 = 1
        while(true) {
            yield f2
            const next = f1 + f2
            f1 = f2
            f2 = next
        }
    }
}
for (let item of f) {
    if(item >10) {
        break
    }
    console.log(item)
}

运行结果如下图所示：

图片

 

5.给生成器传参数以及生成器的关闭

可以使用yield实现输入和输出，上一次让生成器函数暂停的yield关键字会接收到传给next方法的第一个值。

需要注意的是第一次调用next方法传入的值不会被使用，因为这一次调用是为了开始执行生成器函数：

function * newName(item){
    console.log(item)
    console.log(yield)
    console.log(yield)
}

let g = newName('new')
g.next('name')
g.next('study')
g.next('JavaScript')
g.next('good')

运行结果如下图所示：

图片

再来看一段代码：

function * newName(){
    return yield 'new'
}

let g = newName()
console.log(g.next())
console.log(g.next('name'))

其运行结果为：

图片

 

因为必须要对整个表达式求值才能确定要返回的值，所以它在遇到yield关键字的时候暂停执行并计算出要返回的值：“new”。下一次调用next传入“name”，作为交给同一个yield的值。然后这个值被确定为本次生成器函数要返回的值。

yield关键值并非只能使用一次，如下代码就多次使用yield定义了一个无穷计数的生成器函数：

// 使用生成器定义一个无穷计数生成器函数
function * generateCount(){
    for(let i=0;;i++){
        yield i
    }
}
let couterGen = generateCount();

console.log(couterGen.next().value)
console.log(couterGen.next().value)
console.log(couterGen.next().value)
console.log(couterGen.next().value)
console.log(couterGen.next().value)
console.log(couterGen.next().value)

运行结果如下图所示：

图片

使用生成器可以实现范围和填充数组：

function* range(start,end) {
    while(end>start){
        yield start++
    }
}
for(const x of range(4,7)) {
    console.log(x)
}

如上代码实现了范围，代码运行效果如下图所示：

图片

如下代码实现了填充数组：

function* zeroes(n) {
    while(n--) {
        yield 0;
    }
}
console.log(Array.from(zeroes(8)))

运行结果如下图所示：

图片

生成器可选的return方法用于提前终止迭代器，还有throw方法也可以强制生成器进入关闭状态。

如下代码调用了生成器的return方法：

function * newName(){
    yield 'new'
    yield 'name'
    yield 'study'
    yield 'JavaScript'
}
const g = newName()
console.log(g.next())
console.log(g.next())
console.log(g.return())
console.log(g.next())

运行结果如下图所示：

图片

使用try/finally块可以避免立即终止迭代序列，因为finally块内的代码会在执行流退出函数前执行，这意味着finally块中的yield表达式会继续回送序列中值。

function * newName(){
    try{
        yield 'new'
    } finally {
        yield 'name'
        yield 'study'
    }
    yield 'JavaScript'
}

const g = newName()
console.log(g.next())
console.log(g.return())
console.log(g.next())

运行结果如下图所示：

图片

 

如果使用扩展操作符、Array.from或者for…of来迭代这个生成器，那么无论return语句放在什么位置，结果中都不会包含返回的value,如下代码所示：

function * newName(){
    yield 'new'
    yield 'name'
    return 'study'
    yield 'JavaScript'
}
for(const item of newName()) {
    console.log(item)
}
console.log([...newName()])
console.log(Array.from(newName()))

运行结果如下图所示：

图片

 

要取生成器返回的值则必须使用next()方法去获取：

function * newName(){
    yield 'new'
    yield 'name'
    return 'study'
    yield 'JavaScript'
}
const g = newName()
console.log(g.next())
console.log(g.next())
console.log(g.next())
console.log(g.next())

运行结果如下图所示：

图片

6.生成器的应用

如下代码中定义了树形结构，并定义了一个基于生成器函数的深度优先遍历方法：

// 生成器遍历树形结构
class Node {
    constructor(value,...children) {
        this.value = value
        this.children = children
    }
}
const root = new Node(
    1,
    new Node(2),
    new Node(3,
        new Node(4,
            new Node(5,
                new Node(6)
            ),
            new Node(7)
        )
    ),
    new Node(8,
        new Node(9),
        new Node(10)
    )
)
function* depthFirst(node) {
    yield node.value
    for(const child of node.children) {
        yield* depthFirst(child)
    }
}
console.log([...depthFirst(root)])

在深度优先遍历方法中，返回当前节点的值，然后再迭代其子节点，使用yield*操作符来拼接迭代器递归的结果，返回序列中的每一项。

图片

也可以将上面定义的depthFirst生成器作为迭代器，将node转换为可迭代对象，如下代码所示：

// 生成器遍历树形结构
class Node {
    constructor(value,...children) {
        this.value = value
        this.children = children
    }
    *[Symbol.iterator](){
        yield this.value
        for(const child of this.children) {
            yield* child
        }
    }
}
const root = new Node(
    1,
    new Node(2),
    new Node(3,
        new Node(4,
            new Node(5,
                new Node(6)
            ),
            new Node(7)
        )
    ),
    new Node(8,
        new Node(9),
        new Node(10)
    )
)
console.log([...root])

运行结果如下：

图片

 

如果要使用宽度优先遍历来遍历树的节点，则可以使用队列来保存尚未访问的节点，在遍历的每一步都是先打印当前节点值，并将当前节点的所有子节点放入队列中。

// 生成器遍历树形结构
class Node {
    constructor(value,...children) {
        this.value = value
        this.children = children
    }
    *[Symbol.iterator](){
        const queue = [this]
        while(queue.length) {
            const node = queue.shift()
            yield node.value
            queue.push(...node.children)
        }
    }
}
const root = new Node(
    1,
    new Node(2),
    new Node(3,
        new Node(4,
            new Node(5,
                new Node(6)
            ),
            new Node(7)
        )
    ),
    new Node(8,
        new Node(9),
        new Node(10)
    )
)
console.log([...root])

运行结果为：

图片

也可以使用生成器定义一个计数器，代码如下所示：

// 使用生成器定义一个计数器
function* times(n){
    while(n--) {
        yield
    }
}
for(let item of times(3)) {
    console.log('new name')
}
//输出3次 new name

今天我们要一起学习的内容就这些，下次我们将一起学习Promise。来一张图总结回顾今日的内容：

图片

重温新知
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
用Java设计实现Python中的生成器
ZeaLot4J的博客
06-15 3816
引言 　　相信无论是谁，第一次接触Python，肯定会为她的优雅简洁感到震撼（她的性能咱先抛一边去），然而本人主要使用C和Java开发，Python虽然感觉很好，但是碍于一些环境因素，没机会去使用，况且语言只是一种工具，现在像Python这种高级动态语言又确实不少，掌握其本质思想才是关键，所以本文通过分析Java和Python的一些语法特性，用Java语言设计实现了Python语言中的强大而实用...
Java笔记---生成器Generator
热门推荐
GuLu_GuLu_jp的专栏
02-17 1万+
一、前言 和前一篇博文所述的迭代器 Iterator 不同，本文所述为生成器 Generator。这两者有很大不同。迭代器是用于遍历容器中的元素的，Java标准库中是有 Iterator 接口及其实现的；但生成器是用于创建对象的，Java标准库中并没有提供 Generator 接口及其实现。 [注：要注意将此处的生成器 Generator 和设计模式中的生成器模式(也就是建造者模式)区分，二者...
java 生成器模式_生成器模式（Builder）
weixin_39595008的博客
02-12 169
目的将复杂对象的构造与其表示分开，以便相同的构造过程可以创建不同的表示。说明例如角色扮演游戏的角色生成器。最简单的选择是让计算机为你创建角色。但是如果你想选择职业，性别，头发颜色等角色细节，那么角色生成就会逐步完成所有选择准备就绪的过程。简而言之允许您创建不同风格的对象，同时避免对构造函数造成污染。当对象有多种风格，或在创建对象时涉及很多步骤时适用。维基百科说生成器模式是对象创建软件设计模式，其目...
一种新的流：为Java加入生成器(Generator)特性
编码行者的博客
04-19 229
首先给出Seq的接口定义。
将生成器函数定义到类中
Jack的博客
10-03 312
问题：想定义一个生成器函数，但是他还涉及一些额外的状态，我们希望能以某种形式将这些状态暴露给用户 解决方案：实现一个类，将生成器函数代码放到__iter__()方法中即可 import collections class linehistory: def __init__(self, lines, histlen=3): self...
JAVA入坑之JAVADOC（Java API 文档生成器）与快速生成
qq_62377885的博客
04-30 5105
Javadoc是Java SE中的一个工具，文档注释以/**开头，并以*/结束，可以通过 Javadoc 生成一个和源代码配套的 API 帮助文档，Java 帮助文档主要用来说明类、成员变量和方法的功能。文档注释只放在类、接口、成员变量、方法之前，因为 Javadoc 只处理这些地方的文档注释，而忽略其它地方的文档注释。
一种新的流：为 Java 加入生成器(Generator)特性
BASK2311的博客
04-27 777
这篇文章不是工具推荐，也不是应用案例分享。其主题思想，是介绍一种全新的设计模式。它既拥有抽象的数学美感，仅仅从一个简单接口出发，就能推演出庞大的特性集合，引出许多全新概念。同时也有扎实的工程实用价值，由其实现的工具，性能均可显著超过同类的头部开源产品。这一设计模式并非因Java而生，而是诞生于一个十分简陋的脚本语言。它对语言特性的要求非常之低，因而其价值对众多现代编程语言都是普适的。首先给出Seq的接口定义复制代码它本质上就是一个consumer of consumer，其真实含义我后边会讲。
数据结构-链表
RichardGeek的博客
06-20 930
链表的相关知识
Java8 Lambda表达式教程
M_Jack的博客
02-18 236
1. 什么是λ表达式 λ表达式本质上是一个匿名方法。让我们来看下面这个例子： public int add(int x, int y) { return x + y; } 转成λ表达式后是这个样子： (int x, int y) -> x + y; 参数类型也可以省略，Java编译器会根据上下文推断出来： (x, y) -> x + y; //返回两数之和 或者 (x, y) -> { return x + y...
生成器函数
feng的博客
08-27 1887
什么是生成器： 生成器是能够动态提供数据的对象，生成器对象也是可迭代对象（实例） 生成器有两种： 生成器函数 生成器表达式 生成器函数的调用将返回一个生成器的对象，生成器对象是一个可迭代对象 def myyield(): """ 此函数为生成器函数 """ yield 2 yield 3 yield 5 yield 7 """ 此时生成一个生成器函数 "".
Java代码生成器简介、原理、开发流程和Demo
hsunnyc的博客
07-04 4663
<h2 id="java代码生成器简介、原理、开发流程和demo">Java代码生成器简介、原理、开发流程和Demo</h2> <h3 id="简介和背景">简介和背景</h3> <p>刚开始学习的时
函数生成器
weixin_44737199的博客
04-18 5515
生成器 生成器 generator 生成器指的是生成器对象，可以由生成器表达式得到，也可以使用yield关键字得到一个生成器函数，调用这个函数得到一个生成器对象 生成器对象，是一个可迭代对象，是一个迭代器 生成器对象，是延迟计算、惰性求值的 生成器函数 函数体中包含 yield 语句的函数，就是生成器函数，调用后返回生成器对象 普通函数调用，函数会立即执行直到执行完毕,生成器函...
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2000
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 432
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
Module “console“ has been externalized for browser compatibility.
Alvin的博客
09-07 262
在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 275
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 455
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
vue3中动态引入本地图片的两种方法
最新发布
haodanzj的博客
09-11 110
动态在本地引入图片
手写 Vue Router 中的 Hash 模式和 History 模式
书呆子ITme
09-06 1039
通过手写简化版的Vue Router，我们深入理解了Hash 模式和History 模式的实现原理。Hash 模式依赖于hashchange事件，而 History 模式依赖于pushState和API。两种模式各有优缺点，可以根据项目需求选择合适的路由模式。Hash 模式：简单、无需服务器配置，但URL不美观，对SEO不友好。URL美观且符合SEO要求，但需要服务器支持。
在javascritp中如何进行时间转换
03-24
在JavaScript中，可以使用Date对象进行时间转换。可以使用Date对象的一些方法来获取、设置、计算日期和时间。例如，可以使用以下代码将日期（例如"2021-07-09"）转换为JavaScript中的时间戳： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

重温新知

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值