Es6 Generator函数详细解析


Posted in Javascript onFebruary 24, 2018

ECMAScript 6 (简称 ES6 )作为下一代 JavaScript 语言,将 JavaScript 异步编程带入了一个全新的阶段。

Generator函数跟普通函数的写法有非常大的区别:

一是,function关键字与函数名之间有一个星号;

二是,函数体内部使用yield语句,定义不同的内部状态(yield在英语里的意思就是“产出”)。

本文重点给大家介绍Es6 Generator函数,具体内容如下所示:

/*    一、generator函数的定义

    1.Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同
    2.形式上,Generator 函数是一个普通函数,但是有两个特征。一是,function关键字与函数名之间有一个星号;二是,函数体内部使用yield表达式,定义不同的内部状态
   */
  //定义一个generator函数 其内部有3种状态
  var helloGenerator = function *() {
    var next1 = yield 'hello';
    yield 'world' + next1;
    return 'ending';
  }
  //调用generator 函数和普通函数一样,直接加上双括号 () 但是跟普通函数的区别是generator不会立即执行, 返回的也不是函数的结果,而是内部的一个指针。
  var newGenerator = helloGenerator();
  //generator 函数是分段执行的 会从头部直到遇到下一个yield 表达式的时候停止下来。
  console.log(newGenerator.next('hahh')); //Object {value: "hello", done: false}
  console.log(newGenerator.next()); // {value: "worldhahh", done: false}
  console.log(newGenerator.next()); //{value: "ending", done: true}  done true| false true代表的意思内部yield 表达式已经执行完毕 false则相反
  console.log(newGenerator.next()); //{value: "undefined", done: true}
  /*
    总结一下,调用 Generator 函数,返回一个遍历器对象,代表 Generator 函数的内部指针。以后,每次调用遍历器对象的next方法,就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值,是yield表达式后面那个表达式的值;done属性是一个布尔值,表示是否遍历结束。
   */
  /*
    二、yield 表达式
    1.由于 Generator 函数返回的遍历器对象,只有调用next方法才会遍历下一个内部状态,所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。
    遍历器对象的next方法的运行逻辑如下。
    (1)遇到yield表达式,就暂停执行后面的操作,并将紧跟在yield后面的那个表达式的值,作为返回的对象的value属性值。
    (2)下一次调用next方法时,再继续往下执行,直到遇到下一个yield表达式。
    (3)如果没有再遇到新的yield表达式,就一直运行到函数结束,直到return语句为止,并将return语句后面的表达式的值,作为返回的对象的value属性值。
    (4)如果该函数没有return语句,则返回的对象的value属性值为undefined。
    2.yield 表达式和 return 语句的区别: return 不具有记忆功能, yield 具有记忆功能,下次调用next()方法的时候会接着往下执行。
    一个函数里面只能执行一个return 语句 可以执行多个yield 表达式。 yield 函数只能用在generator 函数里面不能用在其他函数里面,不然会报错。
   */
  /*
    三、与 Iterator 接口的关系
    任意一个对象的Symbol.iterator方法,等于该对象的遍历器生成函数,调用该函数会返回该对象的一个遍历器对象。由于 Generator 函数就是遍历器生成函数,因此可以把 Generator 赋值给对象的Symbol.iterator属性,从而使得该对象具有 Iterator 接口。
   */
  var myIterable = {};
  myIterable[Symbol.iterator] = function* () {
    yield 1;
    yield 2;
    yield 3;
  };
  console.log([...myIterable]) // [1, 2, 3]
  /*
    四、next 方法的参数
    yield表达式本身没有返回值,或者说总是返回undefined。next方法可以带一个参数,该参数就会被当作上一个yield表达式的返回值。
    意义:可以在 Generator 函数运行的不同阶段,从外部向内部注入不同的值,从而调整函数行为。
   */
  function* foo(x) {
    var y = 2 * (yield (x + 1));
    var z = yield (y / 3);
    return (x + y + z);
  }
  var a = foo(5);
  a.next() // Object{value:6, done:false}
  a.next() // Object{value:NaN, done:false}
  a.next() // Object{value:NaN, done:true}
  var b = foo(5);
  b.next() // { value:6, done:false }
  b.next(12) // { value:8, done:false }
  b.next(13) // { value:42, done:true }
  /*
    五、for...of 循环
    for...of循环可以自动遍历 Generator 函数时生成的Iterator对象,且此时不再需要调用next方法。(有点类似于 ... 对象的扩展运算符)
   */
  function* foo() {
    yield 1;
    yield 2;
    yield 3;
    yield 4;
    yield 5;
    return 6;
  }
  for (let v of foo()) {
    console.log(v);
  }
  // 1 2 3 4 5
  //上面代码使用for...of循环,依次显示 5 个yield表达式的值。这里需要注意,一旦next方法的返回对象的done属性为true,for...of循环就会中止,且不包含该返回对象,所以上面代码的return语句返回的6,不包括在for...of循环之中。
  //除了for...of循环以外,扩展运算符(...)、解构赋值和Array.from方法内部调用的,都是遍历器接口。这意味着,它们都可以将 Generator 函数返回的 Iterator 对象,作为参数。
  function* numbers () {
    yield 1
    yield 2
    return 3
    yield 4
  }
  // 扩展运算符
  [...numbers()] // [1, 2]
  // Array.from 方法
  Array.from(numbers()) // [1, 2]
  // 解构赋值
  let [x, y] = numbers();
  x // 1
  y // 2
  // for...of 循环
  for (let n of numbers()) {
    console.log(n)
  }
  // 1
  // 2
  /*
  六、Generator.prototype.throw()
   */
  function *testError(){
    try{
      yield ;
    }catch (e){
      console.log(e)
    }
  }
  var testE = testError();
  testE.throw(new Error('会出错吗?'));// 会出错吗? 这个错误是由generator 函数的内部捕获的。
  /*
    七、Generator.prototype.return()
    Generator 函数返回的遍历器对象,还有一个return方法,可以返回给定的值,并且终结遍历 Generator 函数。
   */
  function* gen() {
    yield 1;
    yield 2;
    yield 3;
  }
  var g = gen();
  g.next()    // { value: 1, done: false }
  g.return('foo') // { value: "foo", done: true }
  g.next()    // { value: undefined, done: true }

总结

以上所述是小编给大家介绍的Es6 Generator函数详细解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
如何快速上手Vuex
Feb 14 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
JS实现简单日历特效
Jan 03 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 #Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 #Javascript
JS抛物线动画实例制作
Feb 24 #Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 #Javascript
使用watch监听路由变化和watch监听对象的实例
Feb 24 #Javascript
vue watch监听对象及对应值的变化详解
Feb 24 #Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 #Javascript
You might like
延长phpmyadmin登录时间的方法
2011/02/06 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
Python中的包和模块实例
2014/11/22 Python
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
python 实现两个线程交替执行
2020/05/02 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
北大青鸟学生求职信
2013/09/24 职场文书
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
饮料业务员岗位职责
2013/12/15 职场文书
美德好少年主要事迹
2014/01/29 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
政协委员个人总结
2015/03/03 职场文书
校长一岗双责责任书
2015/05/09 职场文书
户外拓展训练感想
2015/08/07 职场文书
生日祝酒词大全
2015/08/10 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL