ES6---对yield和yield*的理解

sourcenode 发布于2019-08-23 11:29 / 2716人阅读

摘要：概念和都是配合进行使用的。虽然有些混乱，但是如果打断点来看的话会更加清晰。是表达式，因此又返回值，其语法如下是可遍历对象，可以是数组，也可以是另外一个函数的执行表达式，等等其实说简单点，就是将多个语句根据某种规则合并为一个，示例如下

概念

yield和yield*都是配合Generator进行使用的。

yield

yield是关键字，其语法如下：

[rv] = yield [expression];

expression：是Generator函数返回的遍历器对象调用next方法是所得到的值；

rv：是遍历其对象调用next方法是传递给next方法的参数

这里要简单的说一下next方法，其语法如下：

gen.next(value)

value：传递给Generator函数的值，也就是上文中的rv

这里比较有意思的就是传递给next方法的值value，下面通过例子来看一下：

function* _testYieldExpression(){
    let value = "";
    value = yield "yield value";
    console.info(`1 value is: ${value}`);//输出1

    value = yield "yield value";
    console.info(`2 value is: ${value}`);//输出2
    return "over";
}

let _testIterator = _testYieldExpression();
let _res = _testIterator.next();
console.info(`1:no params to next, result is: ${_res.value}`);//输出3

_res = _testIterator.next("params from next");
console.info(`2:params to next, result is: ${_res.value}`);//输出4

_res = _testIterator.next();
console.info(`3:params to next, result is: ${_res.value}`);//输出    512345678910111213141516171819

输出如下：

1:no params to next, result is: yield value
1 value is: params from next
2:params to next, result is: yield value
2 value is: undefined
3:params to next, result is: over12345

注释中标记了几个输出语句，

输出1

是在第二次调用next方法是执行，可以看到，此时的value值是传递给next方法的参数，但是在_testYieldExpression函数中可以看到value = yield yield value，所以可以理解为，在第一次执行next函数的时候，语句yield yield value没有返回值，并且没有赋值给value，而在第二次调用next时，才将next函数的参数赋值给value。虽然有些混乱，但是如果打断点来看的话会更加清晰。

yield*

yield*是表达式，因此又返回值，其语法如下：

yield* [[expression]];

expression：是可遍历对象，可以是数组，也可以是另外一个Generator函数的执行表达式，等等

其实说简单点，就是将多个yield语句根据某种规则合并为一个，示例如下：

function* g3() {
  yield* [1, 2];
  yield* "34";
  yield* Array.from(arguments);
}

var iterator = g3(5, 6);

console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: "3", done: false}
console.log(iterator.next()); // {value: "4", done: false}
console.log(iterator.next()); // {value: 5, done: false}
console.log(iterator.next()); // {value: 6, done: false}
console.log(iterator.next()); // {value: undefined, done: true}

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

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

深入理解 Generator 函数

摘要：同时，迭代器有一个方法来向函数中暂停处抛出一个错误，该错误依然可以通过函数内部的模块进行捕获处理。本文翻译自：Diving Deeper With ES6 Generators 由于个人能力有限，翻译中难免有纰漏和错误，望不吝指正issue ES6 Generators:完整系列 The Basics Of ES6 Generators Diving Deeper With E...

jzzlee 2019-08-20 18:34 评论0 收藏0
ES6学习笔记之Generator函数

摘要：调用函数后和普通函数不同的是，该函数并不立即执行，也不返回函数执行结果，而是返回一个指向内部状态的对象，也可以看作是一个遍历器对象。第一个只是用来启动函数内部的遍历器，传参也没有多大意义。之前断断续续接触到了一些ES6的知识，异步编程方面听得比较多的就是Promise，直到最近比较系统地学习了ES6的新特性才发现Generator这个神奇的存在，它可以实现一些前所未有的事情，让我顿时...

cjie 2019-08-21 14:52 评论0 收藏0
ES6 之 Iterator&Generator

摘要：可迭代对象就具有属性，它是一种与迭代器密切相关的对象。它通过指定的函数可以返回一个作用于附属对象的迭代器。迭代器特点每次调用方法时，返回一个数组，数组中两个元素，分别表示键和值。示例之输出输出输出之迭代器特点返回集合中存在的每一个键。 Iterator由来不推荐Iterator方法。 Iterator 函数是一个 SpiderMonkey 专有特性，并且会在某一时刻被删除。有一点，需...

xietao3 2019-08-23 18:40 评论0 收藏0
理解 es5 开始有的 yield 和 es6 开始有的 aysnc/await

摘要：始最近的业余时间在看相关的书也在极客时间上买了前端相关的专栏对于一个非的人来说时时会有一种感觉社区是真的激进和浮燥这帮规则的制定者似乎从来也不知道克制为何物有很多时候固有的东西是可以处理好的但是偏偏喜欢人为制造一些概念和语法糖人为的建起一座始最近的业余时间在看 js 相关的书, 也在极客时间上买了前端相关的专栏, 对于一个非 jser 的人来说, 时时会有一种感觉: js 社区是真...

NicolasHe 2019-08-23 16:07 评论0 收藏0
深入理解Generator

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

Euphoria 2019-08-26 11:43 评论0 收藏0