ES6: Introducción a la aplicación de generadores y escenarios

---

1. Función de generador

En JavaScript, una vez que una función comienza a ejecutarse, se ejecuta hasta el final o cuando se encuentra un retorno, y no hay código que pueda pausar la ejecución mientras se ejecuta la función.
El surgimiento de la función de generador Generador hace posible tal imposible.
La función de generador es una solución de programación asíncrona proporcionada por ES6, y su forma es ligeramente diferente de las funciones ordinarias:

• La palabra clave de la función seguida de un asterisco (*)
• La declaración de rendimiento puede pausar una función.

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}

Podemos ver en el ejemplo anterior:

• En la función del generador fn, se generan tres puntos de pausa a través de la palabra clave yield.
• Y cuando llamamos a la función fn, devolverá un objeto transversal g , el objeto transversal tiene un método siguiente , el método siguiente puede reanudar la ejecución y la expresión de rendimiento es una marca para suspender la ejecución.
• Cada vez que se llame a la siguiente función, se devolverá un objeto, y el objeto tendrá un atributo de valor y un atributo hecho (el valor indica el valor de la expresión del punto de pausa (el valor después del rendimiento), y hecho indica si el recorrido es terminado)

De hecho, la función Generador devolverá un objeto con una interfaz Iterator. El generador Generador se analiza principalmente aquí. Si está interesado, puede leer este artículo para comprender qué es la interfaz Iterator: https://blog.csdn.net /weixin_60297362/artículo/ detalles/122838780

siguiente método

En circunstancias normales, cuando el siguiente método no pasa parámetros, el valor de retorno de la expresión de rendimiento no está definido. Cuando se pasa un parámetro a next, el parámetro se usará como el valor de retorno de yield en el paso anterior.

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))

método de devolución

El método de retorno devuelve el valor dado y finaliza el recorrido de la función Generador.
Cuando el método de retorno proporciona un parámetro, devuelve el parámetro; cuando no se proporciona ningún parámetro, devuelve 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}

2. Aplicación: Resuelva la programación asíncrona de Js (infierno de devolución de llamada)

Requisito: imprime 111 después de 1s, imprime 222 después de 2s, imprime 333 después de 3s

1. Sin generador generador

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

2. Usar generador generador

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() //执行第一个暂停点