es5 の yield と es6 の aysnc/await の紹介 (例付き)

この記事の内容は、es5 での yield と es6 での aysnc/await の導入に関するものです (例付き)。一定の参考価値があります。必要な友人は参考にしてください。お役に立てれば幸いです。 。

最近、暇なときに js 関連の本を読んだり、Geek Time でフロントエンド関連のコラムを購入したりしています。jser 以外の人間としては、いつも感じています。 js コミュニティは本物です。急進的で衝動的で、ルール作成者は抑制が何であるかをまったくわかっていないようです。固有のものは処理できる場合もありますが、いくつかの概念や構文糖を人為的に作成し、人工的に次々と構築することを好みます。ガオシャンさん、どうやらそうです。それを越えていないなら、あなたはただの「新人」です。

私の悪意をお許しください。「JS 言語エッセンス」を読んだとき、その思いが非常に強かったのです。著者は業界の有名人です。 、json も定式化しましたが、各章の冒頭にはシェイクスピアの名言「無関係に見えるが、隠された哲学がある」が引用されており、本の多くの内容は常に 1 つの意味を持っています。普通の人に理解してもらう はっきり理解できるけどできない

昔だったらこの人は崇拝すべき大山だと思っていたのですが、近年はまだまだスキルは低いですが、考えるのが好きです。 「内面のことについて少しずつ改善していきたいと思っています。私の心の中にある権威崇拝は取り除かれています。これらを再び見ると、「…」の句読点が簡単に心に刻み込まれます。これは一人や二人ではなく、おそらく JS サークル全体がそうなのではないかと感じています。ジェネレーターと async/await については長い間完全に理解できていなかったため、実行中のプロセス全体を整理しようとしました

Generator

まず、yield の後には何も追わないようにしています。コンソール出力に直接出力します

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}

上記に基づいて、メソッドの戻り値を与えます

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}

次に、yieldの後にコンテンツを追加してみます

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}

最後に、上記でメソッドの戻り値を与えます

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}

yieldの動作ロジックは大まかに明らかです。上記を踏まえるとf3は一例です。上記の出力を見ると、実際にはメソッドをいくつかのセクションに分割して実行しています。 ##

// 下面  五行一起的竖线(|)  用一个大括号表示出来会更直观一点
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} 返回
}

もう一度考えてみると、初めて next('N') When を実行するとき、渡された N は無視されることがわかります。これは、値が next() によって初めて渡されるためです。が yield で受け取れない 本を読んでも、見つけた記事を読んでも、初めて next() で渡される値が受け取れない パラメーターが渡されていない

yield は という感じです。 just for iteration. for を iteration に使用することもできますが、とても丸くなっています。理由はわかりません! 新しいものを作成するだけで済みます。for of は本当に楽しいです。next() が実行されるたびに、そのセクションが表示されるからです。が実行され、「ついに非同期になれる」とも呼ばれます。

async/await

そして es7 冒頭にこの 2 つのキーワードがありました。これら 2 つのキーワードについての理解を深めるために、これらを次の

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

に変更しました。chrome 73.0.3683.75 の下部の出力は :

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

です。 firefox 60.5.1

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

opera 58.0.3135.107 での出力は次のとおりです:

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

明らかに D H B の方が合理的です。Firefox では、オペラの実装に明らかに問題があります。それは考えられます。これほど多くのトリックを実行できるということは (もちろん、これは歴史的な問題が原因であるとも言えます)

正直に言うと、これはより適していると思います。 : 「他の言語にもそれはあります。もちろん、私たちのような前衛的な言語もそうすべきです!」

...

このような言語は、実際に現在と同じくらい人気になる可能性があります。この世界は本当に素晴らしいとしか言​​いようがありません。

この記事はここです。すべてここにあります。さらにエキサイティングなコンテンツについては、PHP 中国語の

JavaScript チュートリアル ビデオ

列に注目してください。 Webサイト！

以上がes5 の yield と es6 の aysnc/await の紹介 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。