es6 新增了Generator函数,一种异步编程的解决方案

    回顾一下,es6 提供了新的遍历方法,for of ,适用于各种数据集合,统一了遍历操作,原生支持for of 集合的数据集合有。数组,字符串

  一部分的类数组,map,set。而对象是不适合与 for of 遍历的,因为原生没有实现Iterator接口,而手动的为对象添加Iterator接口,我们之前使用

  return next() 操作,而今天我们尝试用Generator 函数去实现对像的Iterator接口,

// Generator 函数实现对象的 Iterator接口
// 定义一个简单的对象
let obj = {
a: '12344444',
b: '333444',
c: 'dddddd',
d: 'meiy'
}
// 在 for of 学习中我们知道,要想使用for of 遍历 我们需要给对象实现Symbol.iterator接口
// Generator 函数的定义是function* ,每次调用Generator.next() 会执行函数内部的yeild
obj[Symbol.iterator] = function* () {
let keys =Object.keys(this) // Object.keys 得到的对象属性集合可以直接使用for of
for(let key of keys) {
yield [key,this[key]]
}
}
// 上面对象的Iterator接口已经定义完成下面我们使用for of 循环遍历
for(let item of obj) {
console.log(item)
}
// 结果

[ 'a', '12344444' ]
[ 'b', '333444' ]
[ 'c', 'dddddd' ]
[ 'd', 'meiy' ]

 

    定义后Genertation函数后,我们可以像调用普通函数一样,使用()去调用,但是Generator函数直接调用是不会执行的,我们必须掉用 

  Generator函数next()使其执行,执行到第一个yeild ,放回一个对象{value:'',done:false} ,如果对象已经执行完,则返回{value:'',done:true},如果还继续

  掉用next()方法则返回{value:undefined,done:true},Generator 除了next()外,还有两个操作,分别是throw(),return();(注,yeild 只能用于Generator内部)

  

// Generator 函数 next() return() throw()
// 让我们先定义一个简单的Generator函数
function* gen() {
console.log('开始了')
yield 1
yield 2
yield 3
return 4
}
// 当我们使用()去掉用时gen函数数,并不执行
let g = gen() // 不会输出开始了 注,Generator 不能使用new 去实例,会报错
console.log(g.next()) // 输出 开始了 { value: 1, done: false } 执行到第一个yeild处
console.log(g.next()) //{ value: 2, done: false }
console.log(g.next()) //{ value: 3, done: false }
console.log(g.next()) //{ value: 4, done: true } //执行完 则done 放回ture
// 如果没有最后一个return ,放回值就是undefined //next() 函数可以传入一个参数,作为上一个yeild 的返回值
function* fhz (x) {
let y = yield x +1
let z = yield y + 12
return y+z
}
let zx = fhz(5);
console.log(zx.next()) // 执行第一个 yeild 表达式,返回6 // 执行第二个yeild 表达式,第一个yeild并未传值进去,则y时undefined
//console.log(zx.next()) // undefined+12 =>> Nan
console.log(zx.next(2)) // 14
console.log(zx.next(1)) // 3
// 上一步执行完,y = 2 这一步,传入的是1 未yeild y+12的值,也是z的值,所有最终输出3

  Generation throw()方法

// Generator throw()
function* throws() {
try {
yield 2
} catch (ex) {
console.log('th'+ex)
}
}
let th = throws();
th.next() //只有调用了next Generator 内部才能执行
th.throw() //thundefined try {
th.throw('我该') // 内部已经没有catch 则访问外部的catch
} catch (err) {
console.log('12',err)
} function* jdd() {
throw new Error('不多不少')
yield 33; //前面抛出了 throw 这里就不会再执行了
}
let sj = jdd()
try {
sj.next()
} catch (err) {
console.log(err)
}
try {
console.log(sj.next())
} catch (err) {
console.log(err)
}

  Generation  return 函数

// Generator return()
function* fn () {
yield 1
yield 2
yield 3
yield 4
return 67
}
let f = fn()
console.log(f.return()) // { value: undefined, done: true } 因为未传入参数,返回的就是undefined
console.log(f.return(123)) // { value: 123, done: true } rerutn 后函数就不执行了
// 但如果函数内部有try finally 则直接会跳转到执行finally 内部 function* finna () {
try {
yield 1
yield 2
yield 3
}
finally {
yield 4
yield 5
}
return 6
}
let fina = finna()
console.log(fina.next()) //{ value: 1, done: false }
console.log(fina.return()) // 使用return,执行 执行yeild 4
console.log(fina.next()) //执行yeild 5
console.log(fina.next()) //执行,fina.return()
console.log(fina.next()) //{ value: undefined, done: true }

es6 generator函数的更多相关文章

  1. es6 generator函数的异步编程

    es6 generator函数,我们都知道asycn和await是generator函数的语法糖,那么genertaor怎么样才能实现asycn和await的功能呢? 1.thunk函数    将函数 ...

  2. ES6:Generator函数(1)

    Generator函数是ES6提供的一种异步编程解决方案.它会返回一个遍历器对象 function* helloWorldGenerator(){ yield “hello”; yield “worl ...

  3. es6 --- Generator 函数

    第一部分,ES6 中的 Generator 在 ES6 出现之前,基本都是各式各样类似Promise的解决方案来处理异步操作的代码逻辑,但是 ES6 的Generator却给异步操作又提供了新的思路, ...

  4. ES6 - Note7:Generator函数

    Generator函数 1.Generator函数是ES6增加的异步编程解决方案之一,与普通的函数行为完全不同,类似于一个状态机,内部封装了多个状态. 在函数定义的形式上,跟普通函数差不多,有两处不同 ...

  5. ES6入门之Generator函数

    Generator Generator函数是ES6提供的一种异步编程解决方案,Generator函数是一个状态机,封装了多个内部状态. 执行Generator函数会返回一个遍历器对象,也就是说,Gen ...

  6. 转: ES6异步编程:Generator 函数的含义与用法

    转: ES6异步编程:Generator 函数的含义与用法 异步编程对 JavaScript 语言太重要.JavaScript 只有一根线程,如果没有异步编程,根本没法用,非卡死不可. 以前,异步编程 ...

  7. ES6的generator函数

    generator是什么? generator是ES6提供的一种异步编程解决方案,在语法上,可以把它理解为一个状态机,内部封装了多种状态.执行generator,会生成返回一个遍历器对象.返回的遍历器 ...

  8. ES6生成器函数generator

    ES6生成器函数generator generator是ES6新增的一个特殊函数,通过 function* 声明,函数体内通过 yield 来指明函数的暂停点,该函数返回一个迭代器,并且函数执行到 y ...

  9. ES6必知必会 (七)—— Generator 函数

    Generator 函数 1.Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同,通常有两个特征: function关键字与函数名之间有一个星号: 函数体内部使 ...

随机推荐

  1. 对称加密算法 ~ Des

    一.对称加密 (Symmetric Key Encryption)  对称加密是最快速.最简单的一种加密方式,加密(encryption)与解密(decryption)用的是同样的密钥(secret ...

  2. 如何做好技术Team Leader

    背景 互联网公司的技术团队管理通常分为2个方向:技术管理和团队管理,互联网公司的技术TL与传统软件公司的PM还是有很大的区别,传统软件公司的PM更多注重于对项目的管理包括项目任务拆解.项目进度以及风险 ...

  3. Python爬虫入门教程 55-100 python爬虫高级技术之验证码篇

    验证码探究 如果你是一个数据挖掘爱好者,那么验证码是你避免不过去的一个天坑,和各种验证码斗争,必然是你成长的一条道路,接下来的几篇文章,我会尽量的找到各种验证码,并且去尝试解决掉它,中间有些技术甚至我 ...

  4. 关于ES5的indexof()和ES7的includes()的区别

    早es5的时候就有了查找数组中是否包含某个值的API  indexOf(); 使用方法很简单,比如有个数组是: var arr=[2,3,4,"php"] 如果我们想知道数组中有没 ...

  5. Docker入门(三)使用Docker Compose

    Compose介绍   Compose 项目是 Docker 官方的开源项目,负责实现对 Docker 容器集群的快速编排.Compose 是一个用户定义和运行多个容器的 Docker 应用程序.在 ...

  6. d3实现家族树

      1.  jQuery和CSS3支持移动手机的DOM元素移动和缩放插件:panzoom   2.拖动:jqueryUI-Draggable.touchpunch   3.图表:echart.heig ...

  7. DDL(数据定义语言)

    1.Oracle中常见的数据类型分类:(A) 1.number(x,y) 数字类型,x表示最大长度,y表示精度对应java中除char外所有基本数据类型(byte.short.int.long.flo ...

  8. 接口以及 LeetCode 每日一题

    1 接口 1.1 接口的概念 接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心类内方法的实现细节,只是规定这批类里面必须提供某些方法.所以接口体现的是规范和实现分离的设计哲 ...

  9. Java的内存泄露

    Java的内存泄露 1.静态集合类引起内存泄漏 像HashMap.Vector等的使用最容易出现内存泄露,这些静态变量的生命周期和应用程序一致,他们所引用的所有的对象Object也不能被释放,因为他们 ...

  10. easyui表格自动换行

    表格内容自动换行可以通过设计表格属性  nowrap:false来实现,默认值为true: 但是easyui并未提供,表头自动换行的解决方案,因为一般我们的数据表格列名都是固定的,想换行的话可以通过& ...