首页 web前端 js教程 在Es6中有关Generator函数详细解析

在Es6中有关Generator函数详细解析

Jun 04, 2018 pm 04:00 PM
解析 详细

Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。这篇文章给大家介绍Es6 Generator函数的相关知识,感兴趣的朋友一起看看吧

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 }
登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

解决vue2.0动态绑定图片src属性值初始化时报错的问题

react以create-react-app为基础创建项目

200行代码实现blockchain 区块链实例详解

以上是在Es6中有关Generator函数详细解析的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

深入探讨HTTP状态码460的含义和使用情况 深入探讨HTTP状态码460的含义和使用情况 Feb 18, 2024 pm 08:29 PM

深入解析HTTP状态码460的作用和应用场景HTTP状态码是Web开发中非常重要的一部分,用于表示客户端和服务器之间的通信状态。其中,HTTP状态码460是一个较为特殊的状态码,本文将深入解析它的作用和应用场景。HTTP状态码460的定义HTTP状态码460的具体定义是"ClientClosedRequest",意为客户端关闭请求。该状态码主要用于表示

iBatis与MyBatis:比较与优势剖析 iBatis与MyBatis:比较与优势剖析 Feb 18, 2024 pm 01:53 PM

iBatis和MyBatis:区别和优势解析导语:在Java开发中,持久化是一个常见的需求,而iBatis和MyBatis是两个广泛使用的持久化框架。虽然它们有很多相似之处,但也有一些关键的区别和优势。本文将通过详细分析这两个框架的特性、用法和示例代码,为读者提供更全面的了解。一、iBatis特性:iBatis是目前较为老旧的持久化框架,它使用SQL映射文件

Oracle错误3114详解:如何快速解决 Oracle错误3114详解:如何快速解决 Mar 08, 2024 pm 02:42 PM

Oracle错误3114详解:如何快速解决,需要具体代码示例在Oracle数据库开发和管理过程中,我们常常会遇到各种各样的错误,其中错误3114是比较常见的一个问题。错误3114通常表示数据库连接出现问题,可能是由于网络故障、数据库服务停止、或者连接字符串设置不正确等原因导致的。本文将详细解释错误3114的产生原因,以及如何快速解决这个问题,并附上具体的代码

Win11新功能解析:跳过登录微软账户的方法 Win11新功能解析:跳过登录微软账户的方法 Mar 27, 2024 pm 05:24 PM

Win11新功能解析:跳过登录微软账户的方法随着Windows11的发布,许多用户发现其带来了更多的便捷和新功能。然而,有些用户可能不喜欢将其系统与微软账户绑定,希望跳过这一步骤。本文将介绍一些方法,帮助用户在Windows11中跳过登录微软账户,实现更加私密和自主的使用体验。首先,我们来了解一下为什么有些用户不愿意登录微软账户。一方面,一些用户担心他们

PHP 中点的含义和用法解析 PHP 中点的含义和用法解析 Mar 27, 2024 pm 08:57 PM

【PHP中点的含义和用法解析】在PHP中,中点(.)是一个常用的操作符,用于连接两个字符串或者对象的属性或方法。在本文中,我们将深入探讨PHP中点的含义和用法,并通过具体的代码示例加以说明。1.连接字符串中点操作符.在PHP中最常见的用法是连接两个字符串。通过将.放置在两个字符串之间,可以将它们拼接在一起,形成一个新的字符串。$string1=&qu

Apache2无法正确解析PHP文件的处理方法 Apache2无法正确解析PHP文件的处理方法 Mar 08, 2024 am 11:09 AM

由于篇幅限制,以下是一个简短的文章:Apache2是一种常用的Web服务器软件,而PHP是一种广泛使用的服务器端脚本语言。在搭建网站过程中,有时会遇到Apache2无法正确解析PHP文件的问题,导致PHP代码无法执行。这种问题通常是因为Apache2没有正确配置PHP模块,或者PHP模块与Apache2的版本不兼容导致的。解决这个问题的方法一般有两种,一种是

解析Wormhole NTT:适用于任何Token的开放框架 解析Wormhole NTT:适用于任何Token的开放框架 Mar 05, 2024 pm 12:46 PM

Wormhole在区块链互操作性方面处于领先地位,专注于创建有弹性、面向未来的去中心化系统,优先考虑所有权、控制权和无需许可的创新。这一愿景的基础是对技术专业知识、道德原则和社区一致性的承诺,旨在以简单、清晰和广泛的多链解决方案套件重新定义互操作性格局。随着零知识证明、扩容方案和功能丰富的Token标准的兴起,区块链变得更加强大,而互操作性也变得越来越重要。在这个不断创新的应用程序环境中,新颖的治理系统和实用功能为整个网络的资产带来了前所未有的机会。协议构建者现在正在努力思考如何在这个新兴的多链

解析C语言中的指数函数及示例演示 解析C语言中的指数函数及示例演示 Feb 18, 2024 pm 03:51 PM

C语言中指数函数的详细解析与示例引言:指数函数是一种常见的数学函数,在C语言中也有相应的指数函数库函数可以使用。本文将详细解析C语言中指数函数的使用方法,包括函数的原型、参数、返回值等;并给出具体的代码示例,以便读者能更好地理解和运用指数函数。正文:C语言中的指数函数库函数math.h中包含了许多与指数相关的函数,其中最常用的是exp函数。exp函数的原型如

See all articles