ES6学习Generator 函数(生成器)(八)

这里写目录标题

  • 一、基本概念
  • 二、代码
  • 三、Generator 函数的异步应用
      • 三级目录

一、基本概念

  • Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同,Generator 函数有多种理解角度。
  • 语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。
    执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。
  • 形式上,Generator函数是一个普通函数,但是有两个特征。一是, function 关键字与函数名之间有一个星号;二是,函数体内部使用 yield 表达式,定义不同的内部状态( yield 在英语里的意思就是“产出”)。
  • 由于 Generator 函数返回的遍历器对象,只有调用 next 方法才会遍历下一个内部状态,所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。

二、代码

        //生成器函数:function关键字和函数名之间有一个*function* add(){console.log('start');let x = yield '2';console.log('one:'+2);let y = yield '3';console.log('two:'+y);return x+y;}// 返回一个遍历器对象let fn=add();// next() 恢复执行标志console.log(fn.next());// 当 next() 传入参数时,该参数就会被当作上一个 yield 表达式的返回值 ,即 x = 20, y = 3console.log(fn.next(20));// one:20     {value: '3', done: false}console.log(fn.next(30));// two:30     {value: '50', done: true}
  • 使用场景:为不具备 Iterator 接口的对象提供了遍历操作
  • 利用for…of循环,可以写出遍历任意对象(object)的方法。原生的 JavaScript 对象没有遍历接口(不具备 Symbol.iterator方法),无法使用for…of循环,通过 Generator 函数为它加上这个接口,即将 Generator 函数加到对象的Symbol.iterator属性上面,就可以用了。
        //Gemerator 生成器函数function* objectEntries(obj) {//获取对象的所有key保存到数组const propKeys = Object.keys(obj);for (const propkey of propKeys) {yield [propkey, obj[propkey]]}}const obj = {book: 'ES6学习',price: 18}// 把 Generator 生成器函数赋值给对象的Symbol.iterator属性, 为该对象加上遍历器接口obj[Symbol.iterator] = objectEntries;console.log(obj);//{book: 'ES6学习', price: 18, Symbol(Symbol.iterator):// objectEntries(obj) 等价于 obj[Symbol.iterator](obj) for (let [key, value] of objectEntries(obj)) {console.log(`${key}: $value`);}

三、Generator 函数的异步应用

Generator 函数在ajax请求的异步应用,让异步代码同步化

Generator 函数在加载页面的异步应用

       //Generator 函数在加载页面的异步应用// 1.加载 Loading...页面// 2.数据加载完成...(异步操作)// 3.Loading 关闭掉function loadUI() {console.log('加载 Loading...页面');}function showData() {// 模拟数据加载异步操作setTimeout(() => {console.log('数据加载完成');}, 1000);}function hideUI() {console.log('隐藏 Loading...页面');}loadUI();showData();hideUI();

上述代码执行后效果:

加载 Loading...页面
隐藏 Loading...页面
数据加载完成

实际需求是加载数据完成后才关闭页面,但由于三个函数函数是同步执行的,数据加载需要时间,在数据未加载完成时,就已经隐藏loading页面。通过 Generator 函数可以解决这个问题。

         function* load(){loadUI();yield showData();     hideUI()}const itLoad = load();itLoad.next();function loadUI() {console.log('加载 Loading...页面');}function showData() {// 模拟数据加载异步操作setTimeout(() => {console.log('数据加载完成');itLoad.next();}, 1000);}function hideUI() {console.log('隐藏 Loading...页面');}

三级目录

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/890329.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JVM 详解

一. JVM 内存区域的划分 1. 程序计数器 程序计数器是JVM中一块比较小的空间, 它保存下一条要执行的指令的地址. [注]: 与CPU的程序计数器不同, 这里的下一条指令不是二进制的机器语言, 而是Java字节码. 2. 栈 保存方法中的局部变量, 方法的形参, 方法之间的调用关系. 栈又…

基于 uniapp 开发 android 播放 webrtc 流

一、播放rtsp协议流 如果 webrtc 流以 rtsp 协议返回&#xff0c;流地址如&#xff1a;rtsp://127.0.0.1:5115/session.mpg&#xff0c;uniapp的 <video> 编译到android上直接就能播放&#xff0c;但通常会有2-3秒的延迟。 二、播放webrtc协议流 如果 webrtc 流以 webrt…

frp内网穿透部署及使用

frp是什么 frp 是一款开源的高性能的反向代理应用&#xff0c;专注于内网穿透&#xff0c;它采用 C/S 模式&#xff0c;将服务端部署在具有公网 IP 的机器上&#xff0c;客户端部署在内网或防火墙内的机器上&#xff0c;通过访问暴露在服务器上的端口&#xff0c;反向代理到处…

基于MATLAB的图像增强

目录 一、背景及意义介绍背景图像采集过程中的局限性 意义 二、概述三、代码结构及说明&#xff08;一&#xff09;整体结构&#xff08;二&#xff09;亮度增强部分&#xff08;三&#xff09;对比度增强部分&#xff08;四&#xff09;锐度增强部分 四、复现步骤&#xff08;…

本地部署webrtc应用怎么把http协议改成https协议?

环境&#xff1a; WSL2 Ubuntu22.04 webrtc视频聊天应用 问题描述&#xff1a; 本地部署webrtc应用怎么把http协议改成https协议&#xff1f; http协议在安卓手机浏览器上用不了麦克风本&#xff0c;来地应用webrtc 本来是http协议&#xff0c;在安卓手机上浏览器不支持使…

重撸设计模式--代理模式

文章目录 定义UML图代理模式主要有以下几种常见类型&#xff1a;代理模式涉及的主要角色有&#xff1a;C 代码示例 定义 代理模式&#xff08;Proxy Pattern&#xff09;属于结构型设计模式&#xff0c;它为其他对象提供一种代理以控制对这个对象的访问。 通过引入代理对象&am…

重拾设计模式--组合模式

文章目录 1 、组合模式&#xff08;Composite Pattern&#xff09;概述2. 组合模式的结构3. C 代码示例4. C示例代码25 .应用场景 1 、组合模式&#xff08;Composite Pattern&#xff09;概述 定义&#xff1a;组合模式是一种结构型设计模式&#xff0c;它允许你将对象组合成…

全志H618 Android12修改doucmentsui功能菜单项

背景: 由于当前的文件管理器在我们的产品定义当中,某些界面有改动的需求,所以需要在Android12 rom中进行定制以符合当前产品定义。 需求: 在进入File文件管理器后,查看...功能菜单时,有不需要的功能菜单,需要隐藏,如:新建窗口、不显示的文件夹、故代码分析以及客制…

Mapbox-GL 的源码解读的一般步骤

Mapbox-GL 是一个非常优秀的二三维地理引擎&#xff0c;随着智能驾驶时代的到来&#xff0c;应用也会越来越广泛&#xff0c;关于mapbox-gl和其他地理引擎的详细对比&#xff08;比如CesiumJS&#xff09;&#xff0c;后续有时间会加更。地理首先理解 Mapbox-GL 的源码是一项复…

移动网络(2,3,4,5G)设备TCP通讯调试方法

背景&#xff1a; 当设备是移动网络设备连接云平台的时候&#xff0c;如果服务器没有收到网络数据&#xff0c;移动物联设备发送不知道有没有有丢失数据的时候&#xff0c;需要一个抓取设备出来的数据和服务器下发的数据的方法。 1.服务器系统是很成熟的&#xff0c;一般是linu…

jmeter中的prev对象

在jmeter中通过beanshell、JSR223的各种处理器编写脚本时&#xff0c;都会看到页面上有这样的说明 这些ctx、vars、props、OUT、sampler、prev等等都是可以直接在脚本中使用的对象&#xff0c;由jmeter抛出 今天主要讲一下prev的使用 SampleResult prev jmctx.getPreviousRe…

异步BUCK二极管损耗计算

异步BUCK工作原理 Q闭合时&#xff08;Ton&#xff09;&#xff0c;输入电压Vin为电感L和输出电容Cout充电&#xff0c;同时为负载供电&#xff1b;Q断开时&#xff08;Toff&#xff09;&#xff0c;电感L为负载供电&#xff0c;电流通过续流二极管D回流到电感L&#xff1b; 之…

跨站脚本攻击的多种方式——以XSS-Labs为例二十关详解解题思路

一、XSS-Labs靶场环境搭建 1.1、XSS介绍 跨站脚本攻击&#xff08;XSS&#xff09;_跨站脚本测试-CSDN博客https://coffeemilk.blog.csdn.net/article/details/142266454 1.2、XSS-Labs XSS-Labs是一个学习XSS攻击手法的靶场&#xff0c;方便我们系统性的学习掌握跨站脚本攻击…

html+css网页设计 美食 蛋糕美食7个页面

htmlcss网页设计 美食 蛋糕美食7个页面 网页作品代码简单&#xff0c;可使用任意HTML辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 获取源码 1&#xf…

html+css网页设计 美食 爱美食1个页面

htmlcss网页设计 美食 爱美食1个页面 网页作品代码简单&#xff0c;可使用任意HTML辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 获取源码 1&#xff0…

机器学习探索之旅:开启智能预测的新篇章!!! 笔记 ! ! !)

目录 一 . 机器学习基础&#xff1a; 1. 什么是机器学习&#xff1a; Langley&#xff08;1996&#xff09;的定义&#xff1a; Tom Mitchell&#xff08;1997&#xff09;的定义&#xff1a; 冷雨泉&#xff08;等&#xff09;的观点&#xff1a; 2. 机器学习与人工智能…

aioice里面candidate固定UDP端口测试

环境&#xff1a; aioice0.9.0 问题描述&#xff1a; aioice里面candidate固定UDP端口测试 解决方案&#xff1a; /miniconda3/envs/nerfstream/lib/python3.10/site-packages/aioice import hashlib import ipaddress import random from typing import Optional import…

Ubuntu上如何部署Nginx?

环境&#xff1a; Unbuntu 22.04 问题描述&#xff1a; Ubuntu上如何部署Nginx&#xff1f; 解决方案&#xff1a; 在Ubuntu上部署Nginx是一个相对简单的过程&#xff0c;以下是详细的步骤指南。我们将涵盖安装Nginx、启动服务、配置防火墙以及验证安装是否成功。 1. 更新…

【工具变量】中国数字经济发展水平面板数据DID(2012-2022)

数据来源&#xff1a;《中国统计年鉴》、国家统计局 时间跨度&#xff1a;2012-2022年 数据范围&#xff1a;中国各省 包含指标&#xff1a; 1. 地区 2. id 3. 年份 4. 互联网域名数 5. 互联网接入端口数 6. 互联网宽带接入用户数 7. 移动基站密度 8. 移动电…

SEO初学者-搜索引擎如何工作

搜索引擎基础搜索引擎是如何建立索引的搜索引擎如何对网页进行排名搜索引擎是如何个性化搜索结果的 搜索引擎的工作方式是使用网络爬虫抓取数十亿个页面。爬虫也称为蜘蛛或机器人&#xff0c;它们在网络上导航并跟踪链接以查找新页面。然后&#xff0c;这些页面会被添加到搜索引…