Grundlegende Verwendung des ES6-Generators

Die Beispiele in diesem Artikel beschreiben die grundlegende Verwendung des ES6-Generators. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1 Einführung in den Generator

Werfen wir zunächst einen Blick auf den Grundcode des Generators

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 }

Zuerst wir sehen:

• Generator wird durch functinon* definiert, und yield kann innerhalb des Generators verwendet werden

• Generator ist keine Funktion, sondern eine Objekt und wechselt zu Beginn der Ausführung in den Pausenzustand. Anstatt alle Vorgänge

• direkt auszuführen, um den nächsten Vorgang über next() auszuführen, haben die Rückgaben alle die Form { value: xxx, done: xxx }, und value stellt das letzte Mal dar. Der von der Operation zurückgegebene Wert done hat zwei Werte, einer ist wahr und der andere ist falsch, was angibt, ob der gesamte Prozess abgeschlossen ist.

2. Generator-Asynchronprogrammierung

Generator ist eine in ES6 eingeführte asynchrone Lösung, um deren Unterschiede zu erkennen.

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

Promise-Verarbeitungsmethode:

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

Generator-Verarbeitungsmethode:

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

Promise-Mehrfachrückrufe scheinen komplizierter zu sein und der Code ist nicht prägnant genug Verarbeitung Der scheinbar synchrone Code ist tatsächlich eine asynchrone Operation. Das einzige ist, dass die Verarbeitung relativ kompliziert ist. Wenn nur eine asynchrone Operation ausgeführt wird, ist ein Generator besser geeignet.

3.yield und yield*

Sehen wir uns zunächst zwei Codeteile an

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 durchläuft keinen anderen Generator und gibt ein Iteratorobjekt zurück, während yield *The Der Generator wird durchlaufen und iteriert.

Empfohlenes Tutorial: „JS-Tutorial“

Das obige ist der detaillierte Inhalt vonGrundlegende Verwendung des ES6-Generators. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!