ES6 Generator的作用及代码实现

最新推荐文章于 2022-04-11 16:41:25 发布
最新推荐文章于 2022-04-11 16:41:25 发布
阅读量274 收藏
点赞数 1
文章标签： es6 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46816740/article/details/108454003
版权

用处：
1.状态机(有限状态交替变化)有限状态自动机，每运行一次 改变一次状态
Generator 函数实现的状态机：
状态维护在generator函数内部，外部无法修改

function* generator_clock(){
		    while(true){
		        console.log("开")
		yield;
		console.log("关")
		yield;
 }
		}
var gclock=generator_clock();
		gclock.next();
		gclock.next();
		gclock.next();
		gclock.next();

返回结果：
在这里插入图片描述
2.为不具备迭代器功能的object对象提供一个遍历方法

function* objEntries(obj){
		const propKeys=Reflect.ownKeys(obj);
		for(const propKey of propKeys){
		yield [propKey,obj[propKey]]
			}
		}
		const obj={one:"larry",two:"Jane",three:"Tom"}
		for(const [key,value] of objEntries(obj)){
		console.log(key+":"+value);
		}

返回结果:
在这里插入图片描述

3.异步操作同步化

function* main(){
		var result =yield request("http://47.106.244.1:8099/manager/user/findAllUser");
		console.log(result)
        }
        function request(url){
            axios.get(url).then((response)=>{
                it.next(response)
            })
        }
        var it = main()
        it.next()

将其代码转换到网页实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>异步同步化</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>
</head>
<body>
    <script>
    function* main(){
		var result =yield request("http://47.106.244.1:8099/manager/user/findAllUser");
		console.log(result)
        }
        function request(url){
            axios.get(url).then((response)=>{
                it.next(response)
            })
        }
        var it = main()
        it.next()

    </script>
</body>
</html>

返回结果：
在这里插入图片描述

头发多多程序媛
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
简单说说JavaScript的Generator 实现（ES6）
saucxs
05-15 406
Generator 是 ES6 中新增的语法，和 Promise 一样，都可以用来异步编程 // 使用 * 表示这是一个 Generator 函数 // 内部可以通过 yield 暂停代码 // 通过调用 next 恢复执行 function* test() { let a = 1 + 2; yield 2; yield 3; } let b = test(); console.l...
ES6 生成器功能
qq_38421628的博客
07-27 139
生成器功能 当一个正常的函数被调用时，控件将停留在被调用的函数中，直到它返回。使用ES6中的生成器，调用者函数现在可以控制被调用函数的执行。发电机就像一个普通的功能，除了： 1.该功能可以在任何时候让控制权回到主叫方。 2.当你调用生成器时，它不会立即运行。相反，你得到一个迭代器。该函数在您调用迭代器的下一个方法时运行。 生成器通过后缀函数关键字用星号表示;否则，它们的语法与常规函数相同。 以下示例说明了相同的情况。 "use strict" function* rainbow() { // the
es6 function* 函数生成器
tangkebo的博客
01-17 224
主要介绍function* 函数生成器的作用及其使用 直接复制粘贴代码即可使用： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;Document&lt;/title&gt; &lt;script
ES6基础——Generator函数详解
二阶求导的博客
04-07 722
Generator函数和Promise对象联合使用的话会极大降低异步编程的编写难度和阅读难度。 Generator写法的不同：1）* 2）函数内部使用yield语句，定义不同的内部状态 function* g() { yield 'a'; yield 'b'; return 'ending'; } var gen = g(); gen.next(); //只有 1行 next()，返回的是 {value:'a', done:false} gen.next();...
【ES6基础】生成器（Generator）
前端达人
07-01 349
开篇在上一篇文章里《【ES6基础】迭代器（iterator）》，笔者介绍了迭代器及相关实例，我们要实现一个迭代器要写不少的代码。幸运的是，ES6引入了一个新的函数类型——...
ES6 Generator函数的应用实例分析
10-16
例如，下面的代码片段展示了如何使用Generator函数处理一系列的异步操作： ```javascript function* asyncTasks() { console.log('Task 1'); yield new Promise(resolve => setTimeout(() => resolve('Task 1 ...
ES6 Generator基本使用方法示例
10-15
总的来说，ES6 Generator 提供了一种优雅的方式来处理异步操作，通过 `yield` 和 `yield*` 使得代码更接近同步风格，降低了回调地狱的问题。在实际开发中，可以结合 async/await 或其他库进一步提升代码的可读性和可...
JavaScript中 ES6 generator数据类型详解
10-21
通过使用`yield`关键字配合`yield*`表达式，可以轻松地创建复杂的迭代逻辑，甚至实现协程（coroutines），使得异步代码看起来更像同步代码，提高了代码的可读性和可维护性。 总的来说，ES6的Generator是JavaScript...
ES6中Generator与异步操作实例分析
08-30
ES6中的Generator是解决异步编程问题的一种创新方式，它通过引入`yield`关键字和遍历器对象，允许函数暂停和恢复执行，从而实现了一种控制流管理机制。Generator的概念可以被看作是一个状态机，它封装了多个内部状态...
ES6中的Generator简单说明
Jachin的博客
07-26 292
Generator在形式上和函数差不多，只是在function和函数名之间多了一个*。Generator内部必须使用yield关键字。 function *foo(x) { var y = 2 * (yield (x + 1)); console.log(y) var z = yield (y / 3); console.log(z) return (...
loadrunner 三大组件详细操作手册
11-13
该文档详细介绍了loadrunner 三大组件的使用，包括Vuser、Controller、Analysis。包含以下内容： 第一章 Loadrunner vugen录制与脚本开发 1-1 脚本的录制和优化 1-2 换个角度理解关联 1-3 手动关联排错实战 1-4 事物 1-5 检查点 1-6 文本参数化 1-7 数据库参数化 1-8 补充方法函数 1-9 脚本编写中需要注意的事项 1-10 run time settings设置中心 1-11 webservices协议脚本编写实战 1-12 LoadRunner性能测试数据库mysql实战 1-13 使用LoadRunner来录制手机APP脚本 1-14 java vuser协议脚本编写实战 第二章 Loadrunner controller场景设计和监控利器 2-1 性能测试场景设计与监控实战 2-2 集合点 2-3 IP欺骗 2-4 性能测试场景设计以及关键点补充 第三章 Loadrunner analysis结果分析实战 3-1 性能测试分析思路和方法精要 3-2 概要图-分析的突破口 3-3 运行用户图 3-4 错误图 3-5 平均事物响应时间图 3-6 TPS图 3-7 点击率和吞吐量图 3-8 连接数图 3-9 网页细分图 3-10 系统资源图 3-11 合并图
为什么使用ES6生成器
马优晨
06-27 202
官方解释： 1、异步编程，文件操作，网络操作(ajax, request) 数据库操作使用生成器操作更加方便； 2、有效的解决回调地狱的问题； 举例： 请在控制台 1s 后控制台输出 111 ，2s后输出 222 ，3s后输出 333。 （1）使用传统的的回调写法 setTimeout(() => { console.log(111); setTimeout(() => { ..
ES6—Generator函数
Gaozier的博客
04-29 181
Generator函数简介基本概念特征与Iterator接口的关系next方法参数for...of循环Generator.prototype.throw()Generator.prototype.return()yield*表达式作为对象属性的Generator函数Generator函数 this 简介 基本概念 是一种异步编程解决方案 可以看成一个状态机，封装了多个内部状态。 执行Generator函数会返回一个遍历器对象 特征 function命令与函数名之间有一个星号 函数体内部使用yield语
ECMAScript 6 学习系列课程 （ES6 Generator 函数的使用）
天外野草技术专栏
07-04 3191
在学习ES6的过程中，个人认为Generator稍微会有些难以理解，其实Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。我们从表面上看，Generator函数是一个普通函数，但是有两个特征： 1. function关键字与函数名之间有一个星号； 2. 函数体内部使用yield语句，定义不同的内部状态（yield语句在英语里的意思就是“产出”）。这里推荐给大家
es6 Class 的 Generator函数
歪脖先生的博客
02-01 1070
Class 的 Generator函数 如果某个方法之前加上星号（*），就表示该方法是一个 Generator函数。 class Foo { constructor(...args) { this.args = args; } * [Symbol.iterator]() { for (let arg of this.args) { yield arg; }
ES6之 Generator 函数
猫老板的豆
05-09 534
generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。 Generator函数有两个特征: function命令与函数名 之间有一个星号* 函数体内部使用 yield吾句定义不同的内部状态 function* hello () { yield "hello"; yield "world"; return "done"; } let h = hello(); console.log(h.next()); //{valu
es6中Generator函数的理解
sunchanglan151的博客
04-11 877
Generator函数的定义 形式上，Generator函数是一个普通函数，但是有两个特征。 一是，function关键字与函数名之间有一个星号； 二是，函数体内部使用yield表达式，定义不同的内部状态 function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending'; } var hw = helloWorldGenerator(); Generator 函数的调用方法与普通函数一样，也是在函
ES6 Generator 函数到底是什么？怎么使用？（一）
CSDN_gmm的博客
10-08 266
先上一段代码： function * f () { yield 2; } function * test () { try { yield 1; yield * f(); // 等同于for ... of for (let i of f()) { console.log('执行了for ... of') console.log(i); } yield 3; }...
es6-generator
链珠的博客
03-23 96
// yield只能配合Generator函数使用 // function* helloGeneratot(){ // console.log("This is generator") // } // 这个时候如期的打印了日志，我们分析下，对于Generator函数，下面的语句 // var h = helloGeneratot() // h.next() function* helloGeneratot(){ ...
es6 generator
最新发布
07-27
ES6 Generator 是 JavaScript 中的一个特殊类型的函数，它可以在函数执行过程中暂停和恢复。使用 `function*` 定义一个 Generator 函数，并使用 `yield` 关键字来指示函数的执行状态。 Generator 函数可以通过调用 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值