Einführung in yield in es5 und aysnc/await in es6 (mit Beispielen)

Der Inhalt dieses Artikels befasst sich mit der Einführung von yield in es5 und aysnc/awat in es6 (mit Beispielen). Ich hoffe, dass er für Sie hilfreich ist. .

In letzter Zeit habe ich in meiner Freizeit Bücher zum Thema JS gelesen und auch Kolumnen zum Thema Frontend bei Geek Time gekauft. Als Nicht-JSer-Person habe ich immer das Gefühl: Die JS-Community ist es Wirklich radikal und ungestüm scheinen diese Regelmacher nie zu wissen, was Zurückhaltung ist. Manchmal können sie mit inhärenten Dingen umgehen, aber sie ziehen es vor, einige Konzepte und Syntaxzucker künstlich zu erschaffen und eines nach dem anderen künstlich aufzubauen, wie es scheint nur ein „Neuling“, wenn Sie es noch nicht geschafft haben

Als ich „JS Language Essence“ las, hatte ich das starke Gefühl, dass der Autor ein Meister in der Branche ist hat json auch formuliert, aber jedes Kapitel zitiert am Anfang auch ein Zitat von Shakespeare: „Es scheint irrelevant zu sein und es gibt eine verborgene Philosophie. Viele Inhalte im Buch haben immer eine Bedeutung: Man kann sie in 10 Punkten zusammenfassen.“ Ein normaler Mensch kann es klar verstehen, aber ich kann nicht nur 6 Punkte sagen, und Sie können den Rest selbst verstehen. Es gibt viele normale Dinge, die durch Verstehen nicht verstanden werden, aber durch Erklären plötzlich verstanden werden können Ihre Essenz in ein paar Worten.

Früher hätte ich gedacht, dass diese Person ein riesiger Berg ist, den man verehren kann. Obwohl meine Fähigkeiten immer noch nicht so gut sind, denke ich immer noch gerne darüber nach Einige innere Dinge und ich arbeite nach und nach härter. Wenn ich diese wieder sehe, habe ich das Gefühl, dass dies nicht nur eines ist oder zwei Leute, aber höchstwahrscheinlich ist der gesamte js-Kreis so

Zurück zum Titel: Abgesehen vom Lesen von Büchern, dem Lesen von Kolumnen und der Suche nach Informationen habe ich Generatoren und Async/ immer noch nicht vollständig verstanden. Ich habe lange gewartet, also habe ich versucht, den gesamten laufenden Prozess zu regeln

Generator

Ich versuche zunächst, nichts nach der Ausbeute zu verfolgen. Sie können es direkt in die Konsolenausgabe kopieren

function *f0(param) {
    console.log('n: ' + param);
    yield;
    console.log('i');
    let l = yield;
    console.log('l: ' + l);
}
let v0 = f0('p');
console.log(v0.next(1)); // 输出  n: p  和  {value: undefined, done: false}
console.log('----');
console.log(v0.next(2)); // 输出  i  和  {value: undefined, done: false}
console.log('----');
console.log(v0.next(3)); // 输出  l: 3  和  {value: undefined, done: true}
console.log('----');
console.log(v0.next(4)); // 输出 {value: undefined, done: true}
console.log('----');
console.log(v0.next(5)); // 输出 {value: undefined, done: true}

Geben Sie auf der Grundlage des oben Gesagten den Rückgabewert der Methode an

function *f1() {
    console.log('n');
    yield;
    console.log('i');
    let l = yield;
    console.log('l: ' + l);
    return '?';
}
let v1 = f1();
console.log(v1.next(1));     // 输出  n  和  {value: undefined, done: false}
console.log('----');
console.log(v1.next(11));    // 输出  i  和  {value: undefined, done: false}
console.log('----');
console.log(v1.next(111));   // 输出  l: 111  和  {value: '?', done: true}
console.log('----');
console.log(v1.next(1111));  // 输出 {value: undefined, done: true}
console.log('----');
console.log(v1.next(11111)); // 输出 {value: undefined, done: true}

Dann habe ich versucht, nach yield Inhalt hinzuzufügen

function *f2(param) {
    console.log('0: ' + param);
    let f = yield 1;
    console.log('1: ' + f);
    let s = yield f + 2;
    console.log('2: ' + s);
    let t = yield (s + 3);
    console.log('3: ' + t);
    let fo = (yield s) + 4;
    console.log('4: ' + fo);
}
let v2 = f2('p');
console.log(v2.next('N')); // 输出  0: p  和  {value: 1, done: false}
console.log('----');
console.log(v2.next('I')); // 输出  1: I  和  {value: "I2", done: false}
console.log('----');
console.log(v2.next('L')); // 输出  2: L  和  {value: "L3", done: false}
console.log('----');
console.log(v2.next('S')); // 输出  3: S  和  {value: "L", done: false}
console.log('----');
console.log(v2.next('H')); // 输出  4: H4  和  {value: undefined, done: true}
console.log('----');
console.log(v2.next('I')); // 输出  {value: undefined, done: true}
console.log('----');
console.log(v2.next('T')); // 输出  {value: undefined, done: true}

Geben Sie abschließend auf der Grundlage des oben Gesagten den Rückgabewert der Methode an

function *f3() {
    console.log('0');
    let y1 = yield 1;
    console.log('1: ' + y1);
    let y2 = yield y1 + 2;
    console.log('2: ' + y2);
    let y3 = yield (y2 + 3);
    console.log('3: ' + y3);
    let y4 = (yield y3) + 4;
    console.log('4: ' + y4);
    return '??';
}
let v3 = f3();
console.log(v3.next('N')); // 输出  0  和  {value: 1, done: false}
console.log('----');
console.log(v3.next('I')); // 输出  1: I  和  {value: "I2", done: false}
console.log('----');
console.log(v3.next('L')); // 输出  2: L  和  {value: "L3", done: false}
console.log('----');
console.log(v3.next('S')); // 输出  3: S  和  {value: "S", done: false}
console.log('----');
console.log(v3.next('H')); // 输出  4: H4  和  {value: "??", done: true}
console.log('----');
console.log(v3.next('I')); // 输出  {value: undefined, done: true}
console.log('----');
console.log(v3.next('T')); // 输出  {value: undefined, done: true}

Die Operationslogik von yield wird in etwa klar sein. Wenn Sie sich die obige Ausgabe ansehen, wird eine Methode tatsächlich in mehrere Abschnitte unterteilt, um

// 下面  五行一起的竖线(|)  用一个大括号表示出来会更直观一点
function *f3() {
    // 调用第 1 次 next('N') 时运行的代码
    console.log('0');
    let y1 = yield 1;
    return 1;                          // | 封装成 {value: 1, done: false} 返回
                                       // |
                                       // | 这两行等同于 let y1 = yield 1;
    // 调用第 2 次 next('I') 时运行的代码 // |
    let y1 = 'I';                      // |
    console.log('1: ' + y1);
    return y1 + 2;                     // | 封装成 {value: "I2", done: false} 返回
                                       // |
                                       // | 这两行等同于 let y2 = yield y1 + 2;
    // 调用第 3 次 next('L') 时运行的代码 // |
    let y2 = 'L';                      // |
    console.log('2: ' + y2);
    return y2 + 3;                     // | 封装成 {value: "L3", done: false} 返回
                                       // |
                                       // | 这两行等同于 let y3 = yield (y2 + 3);
    // 调用第 4 次 next('S') 时运行的代码 // |
    let y3 = 'S';                      // |
    console.log('3: ' + y3);
    return y3;                         // | 封装成 {value: "S", done: false} 返回
                                       // |
                                       // | 这两行等同于 let y4 = (yield y3) + 4;
    // 调用第 5 次 next('H') 时运行的代码 // |
    let y4 = 'H'                       // |
    console.log('4: ' + y4);
    return '??';                       // 封装成 {value: "??", done: true} 返回
}

auszuführen Denken Sie noch einmal darüber nach, Sie werden wissen, dass beim ersten Ausführen von next('N') das übergebene N ignoriert wird, da der von next() zum ersten Mal übergebene Wert nicht von yield empfangen wird Ob Sie Wenn Sie ein Buch lesen oder den von Ihnen gefundenen Artikel lesen, wird der von next() übergebene Wert nicht empfangen. Es fühlt sich an, als ob yield nur zur Iteration dient Für die Iteration verwenden, aber ich weiß nicht, warum es wirklich Spaß macht, weil jedes Mal, wenn next() ausgeführt wird, und es heißt auch „wir können endlich asynchron sein“

async/await

Und dann habe ich am Anfang eine Interviewfrage eines großen Herstellers gelesen Um mein Verständnis dieser beiden Schlüsselwörter zu vertiefen, habe ich sie wie folgt geändert:

async function async1() {
    console.log('A');
    console.log(await async2());
    return 'B';
}
async function async2() {
    console.log('C');
    return 'D';
}
console.log('E');
setTimeout(function() {
    console.log('F');
}, 0);
async1().then(function(r) {
    console.log(r);
});
new Promise(function(resolve, reject) {
    console.log('G');
    resolve();
}).then(function() {
    console.log('H');
});
console.log('I');

Die Ausgabe unter Chrome 73.0.3683.75 lautet:

// 这个 undefined 的意思应该主要是用来分隔宏任务的, 也就是前面的主线和任务队列是在一起的
E  A  C  G  I  D  H  B  undefined  F

Die Ausgabe unter Firefox 60.5.1

// 这个 undefined 的意思应该只是用来分隔主线的, 任务队列和宏任务在一起了
E  A  C  G  I  undefined  H  D  B  F

Die Ausgabe unter Opera 58.0.3135.107 lautet:

// 这个 undefined 应该跟 chrome 里面是一样的
E  A  C  G  I  H  D  B  undefined  F

Offensichtlich ist D H B sinnvoller. Es ist offensichtlich, dass es bei der Implementierung von Opera ein Problem gibt sei das Ergebnis von letzterem

endlich

und einer einfachen Aufgabe wie var let const In der Lage zu sein, so viele Streiche zu spielen (natürlich kann man sagen, dass dies auf historische Probleme zurückzuführen ist)

Um ehrlich zu sein, denke ich, dass das eher daran liegt: „Andere Sprachen haben es, natürlich sollte eine Avantgarde-Sprache wie unsere ja sein!“

...

Dass eine solche Sprache so beliebt ist wie jetzt, kann ich nur sagen, dass diese Welt wirklich erstaunlich ist

Dieser Artikel ist hier. Weitere spannende Inhalte finden Sie hier die Spalte

JavaScript Tutorial Video

der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonEinführung in yield in es5 und aysnc/await in es6 (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!