ES6 语法详解(Generator函数)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
/**
* Generator函数
* 1. ES6提供的解决异步编程方案之一
* 2. Generator函数是一个状态机,内部封装了不同状态的数据
* 3. 用来生成遍历器对象
* 4. 可以暂停函数(惰性求值), yield 可暂停 , next 方法可以启动, 每次返回的是yield后的表达式结果
* 特点:
* 1. function 与函数名之间有一个星号
* 2. 内部使用yield表达式来定义不同的状态
*/
// 列如
/*
function* generatorFun(){
let result = yield 'hello'
yield 'generator'
} */
/**
* 3. generator 函数返回的是指针对象(接之前的iterator),而不会执行函数内部逻辑
* 4. 调用next方法函数内部逻辑开始执行,遇到yield表达式停止,返回{value: yield后的表达式结果/undefined, done:如果后面还有yield返回false,否则返回true}
* 5. 再次调用next方法会从上一次停止时的yield处开始,直到最后
* 6. yield语句返回结果通常为undefined,当调用next方法时传参内容会作为启动时yield语句的返回值
*/
// 使用generator函数
function* generatorFunction(){
// 开始执行函数
console.log('function start execute!')
// 第一次暂停返回
// 定义的params不是用于接收yield的返回值的,而是接收调用next方法时传入的参数的
let params = yield 'first yield'
console.log(params)
// 函数执行中
console.log('function executing!')
// 第二次暂停返回
yield 'second yield'
// 函数执行完成
console.log('function stop')
return 'x stop'
}
// 调用generator函数,函数并不会开始执行,而是会返回一个调用指针
let point = generatorFunction()
// 第一次调用next方法时开始执行,执行到调用yield的时候暂停,并返回yield后的代码执行结果或表达式结果,如果没有结果就是undefined
// {value:值|undefined,done:true|false}
let firstValue = point.next()
console.log(firstValue)
// 当yield暂停返回后如果要继续执行,就需要再次调用next函数
// 调用next传入参数
let secondValue = point.next({username: 'flower'})
console.log(secondValue)
// 再次调用next 因为后面没有yield了,所以返回的是return的值
let threeValue = point.next()
console.log(threeValue)
/**
* 对象 默认是不可以使用for of 遍历的
* 如果想要使用for of遍历 需要手动部署 iterator 函数
*/
// 定义对象
let obj = {
username: 'flower',
age: 18,
sex: 'man'
}
// 手动部署iterator接口
obj[Symbol.iterator] = function* (){
yield this.username
yield this.age
yield this.sex
}
// 使用for of遍历
for (let item of obj) {
console.log(item)
}
</script>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-08-16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读