资讯专栏INFORMATION COLUMN

Generator函数的语法和应用

hedzr / 671人阅读

摘要:函数从暂停状态到恢复运行,它的上下文状态是不变的。也就是说,可以在函数运行的不同阶段,从外部向内部注入不同的值,从而调整函数行为。循环循环可以自动遍历函数时生成的对象,且此时不再需要调用方法。

基本概念

状态机,封装了多个内部状态;

返回一个遍历器对象,通过改对象可以一次遍历Generator函数内部的每一个状态

带*号,yeild表达式定义不同的内部状态;

调用 Generator 函数后,该函数并不执行,返回的也不是函数运行结果,而是一个指向内部状态的指针对象,也就是遍历器对象;

Generator 函数是分段执行的,yield表达式是暂停执行的标记,而next方法可以恢复执行;

暂停标志

next()方法允许逻辑

遇到yield表达式,就暂停执行后面的操作,并将紧跟在yield后面的那个表达式的值,作为返回的对象的value属性值;

下一次调用next方法时,再继续往下执行,直到遇到下一个yield表达式;

没有再遇到新的yield表达式,就一直运行到函数结束,直到return语句为止,并将return语句后面的表达式的值,作为返回的对象的value属性值;

如果该函数没有return语句,则返回的对象的value属性值为undefined;

yield表达式只能用在 Generator 函数里面,用在其他地方都会报错。

var arr = [1, [[2, 3], 4], [5, 6]];
var flat = function* (a) {
  a.forEach(function (item) {
    if (typeof item !== "number") {
      yield* flat(item);
    } else {
      yield item; //forEach()的参数是一个普通函数使用yield会报错,可以使用for循环解决这个问题
    }
  });
};
for (var f of flat(arr)){
  console.log(f);
}

使用for循环改正

var arr = [1, [[2, 3], 4], [5, 6]];
var flat = function* (a) {
  var length = a.length;
  for (var i = 0; i < length; i++) {
    var item = a[i];
    if (typeof item !== "number") {
      yield* flat(item);
    } else {
      yield item;
    }
  }
};

for (var f of flat(arr)) {
  console.log(f);
}// 1, 2, 3, 4, 5, 6

yield表达式如果用在另一个表达式之中,必须放在圆括号里面;

yield表达式用作函数参数或放在赋值表达式的右边,可以不加括号

与Iterator的关系

可以把 Generator 赋值给对象的Symbol.iterator属性,从而使得该对象具有 Iterator 接口

var myIterable = {};
myIterable[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};

[...myIterable] // [1, 2, 3]
next()方法的参数

yield表达式本身没有返回值,或者说总是返回undefined。next方法可以带一个参数,该参数就会被当作上一个yield表达式的返回值

function* f() {
  for(var i = 0; true; i++) {
    var reset = yield i;
    if(reset) { i = -1; }
  }
}

var g = f();

g.next() // { value: 0, done: false }
g.next() // { value: 1, done: false }
g.next(true) // { value: 0, done: false }

Generator 函数从暂停状态到恢复运行,它的上下文状态(context)是不变的。通过next方法的参数,就有办法在 Generator 函数开始运行之后,继续向函数体内部注入值。也就是说,可以在 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 }

next()传参,参数代表上一次yeild表达式返回的值,因此第一次使用next()传参是无效的;

function* dataConsumer() {
  console.log("Started");
  console.log(`1. ${yield}`);
  console.log(`2. ${yield}`);
  return "result";
}

let genObj = dataConsumer();
genObj.next();
// Started
genObj.next("a")
// 1. a
genObj.next("b")
// 2. b

如果想第一次调用next()方法就能够输入值,可以在Genrator函数外再包一层

function wrapper(generatorFunction) {
  return function (...args) {
    let generatorObject = generatorFunction(...args);
    generatorObject.next();
    return generatorObject;
  };
}

const wrapped = wrapper(function* () {
  console.log(`First input: ${yield}`);
  return "DONE";
});
wrapped().next("hello!")// First input: hello!

上述代码在wrapper函数中,首先调用一次next方法,再返回遍历器对象。当用户自己调用next方法时,看起来就像是第一次调用,但实际上,这是第二次调用next方法。

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

这里需要注意,一旦next方法的返回对象的done属性为true,for...of循环就会中止;

Generator给对象添加Iterator

方法一

function* objectEntries(obj) {
  let propKeys = Reflect.ownKeys(obj);

  for (let propKey of propKeys) {
    yield [propKey, obj[propKey]];
  }
}

let jane = { first: "Jane", last: "Doe" };

for (let [key, value] of objectEntries(jane)) {
  console.log(`${key}: ${value}`);
}
// first: Jane
// last: Doe

方法二将 Generator 函数加到对象的Symbol.iterator属性上面。

function* objectEntries() {
  let propKeys = Object.keys(this);

  for (let propKey of propKeys) {
    yield [propKey, this[propKey]];
  }
}

let jane = { first: "Jane", last: "Doe" };

jane[Symbol.iterator] = objectEntries;

for (let [key, value] of jane) {
  console.log(`${key}: ${value}`);
}
// first: Jane
// last: Doe

【完】

作者简介:郑佳欢,芦苇科技web前端实习生,公司作品:口红挑战网红小游戏、服务端渲染官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发,专注于前端领域框架、交互设计、图像绘制、数据分析等研究。 访问 www.talkmoney.cn 了解更多

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104506.html

相关文章

  • Generator函数语法以及异步应用

    摘要:返回的遍历器对象,可以依次遍历函数内部的每一个状态。由于函数就是遍历器生成函数,因此可以把赋值给对象的属性,从而使得该对象具有接口。函数从暂停状态恢复运行,它的上下文状态时不变的。从语义上讲,第一个方法用来启动遍历器对象,所以不用带有参数。 基本概念 Generator函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同。Generator函数有多种理解角度。语法上,首先...

    plokmju88 评论0 收藏0
  • 《Node.js设计模式》基于ES2015+回调控制流

    摘要:以下展示它是如何工作的函数使用构造函数创建一个新的对象,并立即将其返回给调用者。在传递给构造函数的函数中,我们确保传递给,这是一个特殊的回调函数。 本系列文章为《Node.js Design Patterns Second Edition》的原文翻译和读书笔记,在GitHub连载更新,同步翻译版链接。 欢迎关注我的专栏,之后的博文将在专栏同步: Encounter的掘金专栏 知乎专栏...

    LiuRhoRamen 评论0 收藏0
  • 深入理解Generator

    摘要:如果你已经理解基础可以直接跳过这部分和语法部分,直接看深入理解的部分。的参数可以传入一个参数,来作为上一次的表达式的返回值,就像我们上面说的会让等于。 这篇文章旨在帮你真正了解Generator,文章较长,不过如果能花时间耐心看完,相信你已经能够完全理解generator 为什么要用generator 在前端开发过程中我们经常需要先请求后端的数据,再用拿来的数据进行使用网页页面渲染等操...

    Euphoria 评论0 收藏0
  • ES6 - Generator函数

    摘要:最后,调用这个函数,得到一个遍历器对象并赋值给变量。值得注意的是如果函数内部没有部署代码块,那么遍历器对象的方法抛出的错误,将被外部代码块捕获。 本文已同步至我的个人主页。欢迎访问查看更多内容!如有错误或遗漏,欢迎随时指正探讨!谢谢大家的关注与支持! 一、什么是Generator函数 Generator函数是ES6标准中提出的一种异步编程的解决方案。这种函数与普通函数最大的区别在于它可...

    Ali_ 评论0 收藏0
  • Generator函数

    摘要:语法上,首先可以把它理解成,函数是一个状态机,封装了多个内部状态。返回的遍历器对象,可以依次遍历函数内部的每一个状态。 写在前面: 这一篇是关于ES6中生成器函数相关总结和理解... Generator函数的定义 在阮一峰老师的书中的说法是: Generator 函数有多种理解角度。语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。执行 Gener...

    yagami 评论0 收藏0

发表评论

0条评论

hedzr

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<