博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES6---对yield和yield*的理解
阅读量:6137 次
发布时间:2019-06-21

本文共 1945 字,大约阅读时间需要 6 分钟。

概念

yieldyield*都是配合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 value1 value is: params from next2:params to next, result is: yield value2 value is: undefined3: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}

转载地址:http://zmeua.baihongyu.com/

你可能感兴趣的文章
焊盘 往同一个方向增加 固定的长度方法 总结
查看>>
eclipse的maven、Scala环境搭建
查看>>
架构师之路(一)- 什么是软件架构
查看>>
jquery的冒泡和默认行为
查看>>
USACO 土地购买
查看>>
【原创】远景能源面试--一面
查看>>
B1010.一元多项式求导(25)
查看>>
10、程序员和编译器之间的关系
查看>>
前端学习之正则表达式
查看>>
配置 RAILS FOR JRUBY1.7.4
查看>>
AndroidStudio中导入SlidingMenu报错解决方案
查看>>
修改GRUB2背景图片
查看>>
Ajax异步
查看>>
好记性不如烂笔杆-android学习笔记<十六> switcher和gallery
查看>>
JAVA GC
查看>>
codeforce 599B Spongebob and Joke
查看>>
3springboot:springboot配置文件(外部配置加载顺序、自动配置原理,@Conditional)
查看>>
9、Dubbo-配置(4)
查看>>
前端第七天
查看>>
图解SSH原理及两种登录方法
查看>>