Utilisation de base du générateur ES6

Les exemples de cet article décrivent l'utilisation de base d'ES6 Generator. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

1 Introduction à Generator

Jetons d'abord un coup d'œil au code de base de Generator

function* g(){
 yield 100;
 yield 200;
 return 300;
}
let gg = g();
console.log(gg);            // Object [Generator] {}
console.log(gg.next());        // { value: 100, done: false }
console.log(gg.next());        // { value: 200, done: false }
console.log(gg.next());        // { value: 300, done: true }
console.log(gg.next());        // { value: undefined, done: true }

Tout d'abord. on voit :

• Le générateur est défini par functinon*, et le rendement peut être utilisé à l'intérieur du générateur

• Le générateur n'est pas une fonction, mais un objet, et entre dans l'état en pause au début de l'exécution, au lieu d'effectuer directement toutes les opérations

• pour effectuer l'opération suivante via next(), les retours sont tous sous la forme de { valeur : xxx, terminé : xxx }, et valeur représente la dernière fois. La valeur renvoyée par l'opération, terminé a deux valeurs, l'une est vraie et l'autre est fausse, indiquant si l'ensemble du processus est terminé.

2. Programmation asynchrone du générateur

Generator est une solution asynchrone introduite dans ES6 Jetons un coup d'œil à sa comparaison avec le traitement des promesses de manière asynchrone pour voir leurs différences.

// 这里模拟了一个异步操作
function asyncFunc(data) {
 return new Promise( resolve => {
  setTimeout(
   function() {
    resolve(data)
   },1000
  )
 })
}

Méthode de traitement de la promesse :

asyncFunc("abc").then( res => {
 console.log(res);                    // "abc"
 return asyncFunc("def")
}).then( res => {
 console.log(res);                    // "def"
 return asyncFunc("ghi")
}).then( res => {
 console.log(res);                    // "ghi"
})

Méthode de traitement du générateur :

function* g() {
 const r1 = yield asyncFunc("abc");
 console.log(r1);                            // "abc"
 const r2 = yield asyncFunc("def");
 console.log(r2);                            // "def"
 const r3 = yield asyncFunc("ghi");
 console.log(r3);                            // "ghi"
}

let gg = g();
let r1 = gg.next();
r1.value.then(res => {
 let r2 = gg.next(res);
 r2.value.then(res => {
  let r3 = gg.next(res);
  r3.value.then(res => {
   gg.next(res)
  })
 })
})

Les rappels multiples de promesse semblent plus compliqués et le code n'est pas assez concis. Le générateur semble asynchrone. traitement Le code apparemment synchrone est en fait une opération asynchrone. La seule chose est que le traitement est relativement compliqué. Si une seule opération asynchrone est effectuée, un générateur est plus approprié.

3.yield et rendement*

Regardons d'abord deux morceaux de code

function* g1() {
 yield 100;
 yield g2();
 return 400;
}

function* g2() {
 yield 200;
 yield 300;
}

let gg = g1();
console.log(gg.next());                // { value: 100, done: false }
console.log(gg.next());                // { value: Object [Generator] {}, done: false }
console.log(gg.next());                // { value: 400, done: true }
console.log(gg.next());                // { value: undefined, done: true }

rrree

yield ne traversera pas un autre générateur et renvoie un objet itérateur, tandis que rendement * Will parcourir et itérer le générateur.

Tutoriel recommandé : "Tutoriel JS"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!