关闭

ES6 新特性之Generator

时间: 2019-07-27阅读: 576标签: 特性

1:基本概念

实际上Generator就是遍历器的一个生成器,我们可以用Generator来生成一个遍历器。Generator有两个明显的特点:第一个是function关键字与函数名之间有一个星号,一般而言是将两者写在一起的。第二个是在函数体内部有一个yield的关键字。

    function* generator(){
        yield 1;
        yield 2;
        return 3;  //return代表next的结束,对应着Generator遍历器的结束
    }
    const firstGenerator = generator();
    //
    firstGenerator.next()
    { value: 1, done: false }
    firstGenerator.next()
    { value: 2, done: false }
    firstGenerator.next()
    { value: 3, done: true }
    firstGenerator.next()
    { value: undefined, done: true }
    firstGenerator.next()
    { value: undefined, done: true }

2:执行过程

调用Generator函数后并不执行,第一次调用不执行,只有在调用next的时候才会真正的执行。

    function* generator(){
        console.log(1);
        yield 1;
        console.log(2);
        yield 2;
        console.log(3)
        return 3;
        console.log(4);
    }
    const gen = generator();

调用next方法开始执行,指针移向下一个状态

    function* generator(){
        console.log(1);
        yield 1;
        console.log(2);
        yield 2;
        console.log(3)
        return 3;
        console.log(4);
    }
    const gen = generator();
    gen.next();
    
    // 1
       { value: 1, done: false }

执行到yield或者是return语句,每一个next只能走到下一个yield或者是直接跨到了return。

    function* generator() {
      console.log(1);
      yield 1;
      console.log(2);
      yield 2;
      console.log(3);
      return 3;
      console.log(4);
    }
    const g = generator();
    g.next();
    g.next();
    
    // 1
       2
       { value: 2, done: false }

当next时,会从上一次暂停位置开始执行,直到return,return是退出next的一个标志。

    function* generator() {
      console.log(1);
      yield 1;
      console.log(2);
      yield 2;
      console.log(3);
      return 3;
      console.log(4);
    }
    
    const g = generator();
    g.next();
    g.next();
    g.next();
    g.next();
    
    // 1
       2
       3
       { value: undefined, done: true }

3:Generator方法

next,如果传了参数被当作上一个yield表达式的返回值,说明next是可以传参数的,如果没传时undefined。
function* generator(x) {
  var y = 3 * (yield (x + 3));
  var z = yield (y / 2);
  return (x + y + z) * 2;
}

const gen1 = generator();

// gen1.next(); 
   { value: NaN, done: false } 
   gen1.next();
   { value: NaN, done: false } */
   gen1.next();
   { value: NaN, done: false } */
   gen1.next();
   { value: undefined, done: true }
function* generator(x) {
  var y = 3 * (yield (x + 3));
  var z = yield (y / 2);
  return (x + y + z) * 2;
}

const gen2 = generator(10);
gen2.next();
// { value: 13, done: false } 
/*
x = 10
13 = 10 + 3
*/

gen2.next(10);
// { value: 15, done: false }
/*
y = 30
15 = 3 * 10 / 2
*/

gen2.next(10);
// { value: 100, done: false }
/*
z = 10
100 = (10 + 10 + 30) * 2
*/
throw,函数外抛出错误在Generator函数体内捕获
function* generator(x) {
  try {
    yield;
  } catch (err) {
    console.log('inner error', err);
  }
}

const g = generator();
g.next();
// { value: undefined, done: false }

g.throw(new Error('123'))
// inner error Error: 123
return ,终结当前的Generator函数。


4:Generator函数应用

yield*,在Generator函数内部调用另一个Generator函数,无需手动遍历。
function* generator1(){
  yield* [1, 2, 3];
}
generator1().next();
// { value: 1, done: false } 

function* generator2(){
  for (var value of [1, 2, 3]) {
    yield value;
  }
}
generator2().next();
// { value: 1, done: false } 

function* generator3(){
  yield [1, 2, 3];
}
generator3().next();
// { value: Array(3), done: false }

5:Generator函数应用

for of,遍历return前的数据
function* generator() {
  yield 1;
  yield 2;
  yield 3;
  return 4;
}

for (let s of generator()) {
  console.log(s);
}
//  1
    2
    3
	```	
状态机
const status = function* () {
  while (true) {
    console.log('On');
    yield true;
    console.log('Off');
    yield false;
  }
}();
status.next();

// On
   {value: true, done: false}
网络请求
import axios from 'axios';

function* generator(){
  const url = 'https://xxx.xxx.com';
  const result = yield fetch(url);
  return result();
}


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/4953

关闭

使用 React 要懂的 Js特性

与我使用的其他框架相比,我最喜欢 React 的原因之一就是它对 JavaScript 的暴露程度。没有模板DSL( JSX 编译为合理的 JavaScript),组件 API 只是通过添加 React Hooks 变得更简单,并且该框架为解决的核心 UI 问题提供非常少的抽象概念

编程语言中的 6 个有趣特性

Java 是一门不断发展的语言,这是一件好事。然而,其他语言的一些特性也是值得研究的。语言的结构是人们思考问题的方式,也是人们设计解决方案的方式。学习或至少熟悉其他语言是借鉴其设计的好方法

typescript 3.7中值得注意的3个新特性

距 typescript 3.7 正式发布已经有一段时间了,这段时间正在对手上的项目进行 typescript 的迁移工作,所以会特别留意每一次的 release。对于 3.7 中包含的新特性,其实相比较之前几次 release 来说

ES2019 新特性汇总

最近 ECMAScript2019,最新提案完成:tc39 Finished Proposals,我这里也是按照官方介绍的顺序进行整理,如有疑问,可以查看官方介绍啦~另外之前也整理了 《ES6/ES7/ES8/ES9系列》,可以一起看哈。

CSS 特性和值

CSS 声明可以为空,或者由 CSS 特性( property ),后加一个冒号 :,跟着是一个特性的值构成。中间可以有空格将它们隔开。

尤雨溪 VueConf 演讲:Vue 3.0 的新特性和设计理念

按照规划,Vue.js 框架的主迭代版本将在 2020 年第一季度发布,在 VueConf 多伦多会议 上,Vue.js 的创始人兼项目领导者尤雨溪 讨论了 Vue 3 背后的设计理念以及新版本中添加的最新特性

h5和css3的新特性有哪些?

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准。CSS3是CSS(层叠样式表)技术的升级版本。下面我们来看一下HTML5余css3的新特性有哪些。

ES6 Math方法和Number新特性简介

Math.sign() 函数返回一个数字的符号, 指示数字是正数,负数还是零。此函数共有5种返回值, 分别是 1, -1, 0, -0, NaN. 代表的分别是正数, 负数, 正零, 负零, NaN。

你可能错过的现代 JavaScript 特性

尽管我在过去 7 年中几乎每天都在写 JavaScript 代码,但不得不承认,我实际上并不是很注意 ES 语言的发布声明。 async/await 和 Proxies 之类的主要特性是一回事,但是每年都有稳定的小规模、渐进式的改进在不断涌现

神奇的javascript

虽然js是弱类型语言,声明变量时也不需要显式指定类型。但是,数据本身依旧还是有类型的,比如数字和字符串就是以不同形式存在的数据。在js中,所有数字的类型都为number。其中,一个特殊的数字就是NaN(Not a number)

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!