Conozca los escenarios de uso del generador de iteradores ES6, elemental

Conocimiento básico

Hoy, aprendí sobre los generadores e iteradores de es6. Realmente tengo muchos pensamientos. Soy un estudiante que está aprendiendo el front-end. Puedo decir que algo está mal. Por favor, tengan paciencia conmigo. Es para resumir lo que he aprendido . Ok ahora empieza

Expansión de matriz

Antes de hablar sobre los iteradores del generador, primero debemos entender el conocimiento de es6, que es la extensión de la matriz recién agregada de es6. Hay tres funciones: entradas (), claves (), valores () , estas tres funciones son muy similares , todos están en Haga una cosa, por ejemplo:

for(let index of ['a','b','c','d'].keys(){
	console.log(index)  //0,1,2,3
}
for(let values of ['a','b','c'].values()){
	console.log(values)  //'a','b','c'
}
for(let [index,value] of ['a','b','c'].entries()){
	console.log([index,value])  //  [0,'a'],[1,'b'],[2,'c'];
}

Las tres funciones de entradas (), claves () y valores () devolverán un iterador. Todos los valores que devuelven tienen la función de un iterador, por lo que puede usar el método for ... of.
Bueno, si se entienden estos tres métodos, entonces puede ingresar al iterador del generador.

Iterador

¿Qué es un iterador? Es un nuevo mecanismo transversal. Concluí que tiene dos núcleos, uno es que es una interfaz que puede acceder rápidamente a los datos. El segundo es el puntero que se utiliza para recorrer la estructura de datos. Permítanme hablar de un iterador relativamente simple para la matriz.

const items = ['one','two','three'];
//创建迭代器
const ite = items(Symbol.Iterator)();
//进行获取
console.log(ite.next())   //{value:'one',done:false}
console.log(ite.next())   //{value:'two',done:false}
console.log(ite.next())   //{value:'three',done:false}
console.log(ite.next())   //{value:undefined,done:true}

¿Qué significa el resultado de ite.next ()? Es para atravesar el valor de la matriz. Done representa si el recorrido se completó. Cuando se llama a ite.next () por cuarta vez, no hay ningún valor, por lo que el valor de done es verdadero.

Generador

El generador es una función, pero la diferencia entre él y la función ordinaria es: el método para declarar la función es:

function* func(ele){
	console.log(ele);
}

Otra diferencia es que el rendimiento solo se puede llamar dentro de una función. Explica un rendimiento, es decir, el generador suspende la función mediante la palabra clave yield, y la explicación es más clara, es decir, si declaras una función, puedes escribir un rendimiento dentro, y puedes "procesar" la función Stuck there. Un método de generador es next (). Este método consiste en reabrir el lugar donde se atascó el rendimiento y dejar que el contenido de la función continúe.

function* func(){
	console.log('start');
	yield "2";
	console.log('end');
}
let fn = func();
fn.next(); // "start"  //{value:'2',done:false}

Resuma un poco: el generador se ejecuta en etapas, el rendimiento es suspender la ejecución y next () es reanudar la ejecución.

escenas que se utilizarán

Hay dos tipos de escenarios de uso de iteradores y generadores que se utilizan con mayor frecuencia. Permítanme hablar de un tipo hoy y compartir el otro la próxima vez.
Este generador de iteradores es para crear una interfaz para objetos que no tienen un iterador.
Aquí hay un ejemplo:

//第一步 创建一个无迭代器接口的对象
let obj = {
	name: "xiaoChen",
	age: 21
}
//第二步 写一个迭代器接口 （用到了keys（），忘了往上看看哈）
function* objectEntries(obj){
    const Keys = Object.keys(obj);
    for(let key of Keys){
        yield [key,obj[key]];
    }
}
//第三步 给obj接口
obj[Symbol.iterator] = objectEntries;
//第四步 遍历
for(let [name,age] of objectEntries(obj)){
    console.log(`${name}:${age}`); //name: "xiaoChen",age: 21
}
//成功的遍历出obj里面的属性

Bueno, compártelo aquí y comparte otra escena de uso la próxima vez.