Introduction à rendement dans es5 et aysnc/await dans es6 (avec exemples)

Le contenu de cet article concerne l'introduction de rendement dans es5 et aysnc/await dans es6 (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Récemment, j'ai lu des livres sur js pendant mon temps libre et j'ai également acheté des chroniques sur le front-end sur Geek Time. Pour une personne non-jser, j'ai toujours le sentiment : la communauté js est. Réel Radical et impétueux, ces décideurs ne semblent jamais savoir ce qu'est la retenue. Parfois, des choses inhérentes peuvent être traitées, mais ils préfèrent créer artificiellement certains concepts et sucres syntaxiques, en construisant artificiellement les uns après les autres, il semble que vous l'êtes. juste un "rookie" si vous ne l'avez pas franchi

S'il vous plaît, pardonnez-moi d'être vicieux Quand j'ai lu "JS Language Essence", j'ai eu un sentiment très fort. L'auteur est un maître dans l'industrie et. a également formulé json, mais chaque chapitre cite également une citation de Shakespeare au début, "Cela ne semble pas pertinent et il y a une philosophie cachée". De nombreux contenus dans le livre ont toujours un sens : cela peut être dit en 10 points pour faire un. Les gens ordinaires comprennent, je peux le comprendre clairement, mais je ne peux pas. Je ne dis que 6 points, et vous pouvez comprendre le reste par vous-même. Il y a beaucoup de choses ordinaires qui ne sont pas comprises par la compréhension, mais qui peuvent être soudainement comprises en expliquant. leur essence en quelques mots.

Dans le passé, j'aurais pensé que cette personne était une immense montagne à adorer. Ces dernières années, même si mes compétences ne sont toujours pas si bonnes, j'aime toujours y penser. certaines choses intérieures et travailler plus fort petit à petit. Le culte de l'autorité dans mon cœur a été supprimé. Quand je les revois, les signes de ponctuation "..." s'impriment facilement dans mon esprit. ou deux personnes, mais très probablement tout le cercle js est comme ça

Retour au titre, à part lire des livres, lire des chroniques et rechercher des informations, je n'ai toujours pas complètement compris les générateurs et async/. J'attends depuis longtemps, j'ai donc essayé de trier tout le processus en cours

Générateur

J'essaie d'abord de ne rien suivre après le rendement. Vous pouvez le copier directement dans la sortie de la console

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}

Sur la base de ce qui précède, donnez la valeur de retour à la méthode

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}

Ensuite, j'ai essayé d'ajouter du contenu après le rendement

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}

Enfin, sur la base de ce qui précède, donner la valeur de retour de la méthode

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}

Il est à peu près clair que rendement La logique en cours d'exécution, en prenant le f3 ci-dessus comme exemple, par rapport à la sortie ci-dessus, divise en fait une méthode en plusieurs sections pour l'exécution

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

Si vous y repensez, vous saurez que lorsque next('N') est exécuté pour la première fois, le N transmis sera ignoré, car la valeur transmise par next() pour le la première fois n'a pas de rendement pour le recevoir. Autant relire un livre et consulter les articles que vous avez trouvés. Eh bien, la première fois, next() n'a pas passé les paramètres

Je pense que ce rendement. est né pour l'itération. Vous pouvez simplement utiliser for pour l'itération, mais c'est enveloppé comme ça, je ne sais pas pourquoi ! Vous pouvez également créer un nouveau for pour le plaisir, car chaque fois que next() est exécuté, cela. sera exécutée, et elle s'appelle aussi "nous pouvons enfin être asynchrones"

async/ wait

Ensuite, il y a ces deux mots-clés qui ont été introduits dans es7. J'ai lu une question d'entretien de. une grande entreprise et je l'ai modifié comme suit afin d'approfondir ma compréhension de ces deux mots-clés

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

La sortie sous chrome 73.0.3683.75 est :

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

La sortie sous Firefox 60.5.1

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

La sortie sous opera 58.0.3135.107 est :

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

De toute évidence, D H B est plus raisonnable. Il y a évidemment un problème dans la mise en œuvre de Firefox et Opera It. est concevable qu'une version inférieure de Chrome puisse également en être le résultat

Enfin

Il y a aussi tellement d'astuces qui peuvent être jouées avec une simple assignation comme var let const (bien sûr, cela peut on dit que cela est causé par des problèmes historiques)

Honnêtement, je pense que c'est plus intéressant Principalement parce que : "D'autres langues l'ont, donc bien sûr, une langue d'avant-garde comme la nôtre devrait l'avoir !"

...

Une telle langue peut devenir aussi populaire qu'elle l'est maintenant, je peux seulement dire que ce monde est vraiment merveilleux

Cet article est terminé ici Pour. Pour plus de contenu passionnant, vous pouvez faire attention à la colonne

Vidéo du didacticiel JavaScript du site Web PHP chinois !

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!