ES6:Generator生成器的介绍及场景应用

文章目录

  • 一、Generator生成器函数
      • next方法
      • return方法
  • 二、应用:解决Js异步编程(回调地狱)
      • 1.不用generator生成器
      • 2.用generator生成器


一、Generator生成器函数

在JavaScript中,一旦一个函数开始执行,就会一次执行到最后或者遇到return时结束,在函数运行期间没有任何代码可以让它在执行过程中暂停。
而Generator生成器函数的出现,使得这样一个不可能成为可能。
Generator函数是ES6提供的一种异步编程解决方案,其形式上与普通函数稍微有些差别:

  • function关键字后跟一个星号(*)
  • yield语句可以暂停函数
function* fn(x) {
	yield ++x	//第一个暂停点
	yield ++x	//第二个暂停点
	yield ++x	//第三个暂停点
}
let g = fn(0)
g.next() // {value: 1, done: false}
g.next() // {value: 2, done: false}
g.next() // {value: 3, done: false}
g.next() // {value: undefined, done: true}

我们通过以上示例可以看到:

  • 在fn生成器函数中,通过yield关键字生成了三个暂停点。
  • 而当我们调用fn函数时,会返回一个遍历器对象g,遍历器对象身上有一个next方法,next方法可以恢复执行,而yield表达式是暂停执行的标记。
  • 每次调用next函数会返回一个对象,对象中会有value属性与done属性(value表示本次暂停点表达式的值(yield后面的值),done表示是否遍历完成 )

其实Generator函数会返回一带有Iterator接口的对象,这里主要讨论Generator生成器,有兴趣的话可以看看这篇文章,来了解什么是Iterator接口:https://blog.csdn.net/weixin_60297362/article/details/122838780

next方法

一般情况下,next 方法不传入参数的时候,yield 表达式的返回值是 undefined 。当 next 传入参数的时候,该参数会作为上一步yield的返回值。

function* fn(x) {
	var x = yield ++x	//第一个暂停点
	console.log(x);
	var y = yield ++x	//第二个暂停点
	console.log(y);
	var z = yield ++x	//第三个暂停点
}
let g = fn(0)
console.log(g.next())
console.log(g.next(1))
console.log(g.next(2))

ES6:Generator生成器的介绍及场景应用_第1张图片

return方法

return 方法返回给定值,并结束遍历 Generator 函数。
return 方法提供参数时,返回该参数;不提供参数时,返回 undefined 。

function* fn(x) {
  yield ++x	//第一个暂停点
  yield ++x	//第二个暂停点
  yield ++x	//第三个暂停点
}
let g = fn(0)
g.next(0) // {value: 1, done: false}
g.return('foo') // {value: 'foo', done: true}
g.next()  // {value: undefined, done: true}

二、应用:解决Js异步编程(回调地狱)

要求:1s后打印111,2s后打印222,3s打印333

1.不用generator生成器

setTimeout(() => {
	console.log(111);
	setTimeout(() => {
		console.log(222);
    	setTimeout(() => {
			console.log(333);
		}, 3000)
	}, 2000)
}, 1000)

2.用generator生成器

function one() {
  setTimeout(() => {
    console.log(111);
    iterator.next() //执行第二个暂停点
  },1000)
}
function two() {
  setTimeout(() => {
    console.log(222);
    iterator.next() //执行第三个暂停点
  },2000)
}
function three() {
  setTimeout(() => {
    console.log(333);
  },3000)
}

function * gen() {
    yield one()
    yield two()
    yield three()
}
let iterator = gen()
iterator.next() //执行第一个暂停点

你可能感兴趣的:(JavaScript基础知识,面试,javascript,前端,开发语言,es6,面试)