es5中yield和es6中aysnc/await的介绍（附示例）
比来的业余时间在看 js 相关的书, 也在极客时间上买了前端相关的专栏, 关于一个非 jser 的人来说, 不时会有一种感受: js 社区是真的激进和浮燥, 这帮规则的拟定者好像从来也不知道抑制为什么物. 有许多时候固有的东西是可以处置好的, 但是偏偏喜爱人为制造一些概念和语法糖, 人为的建起一座又一座的高山, 好像你没跨过就是个 "菜鸡"
请谅解我的狠毒, 看《js 说话精粹》的时候, 这种感受非常的热烈. 作者是业内的大牛, 还拟定了 json, 但是每一章还在最开头引一句莎翁的话, "好像可有可无又隐藏哲理". 书中许多内容要表达的意思总有一种: 明明可以将话说成 10 分让一个一般人都能看得清楚的, 却偏不, 只说 6 分, 剩下的本人去悟, 有许多规则性的东西并非是靠悟, 而是靠几句话说分明其本质就恍然大悟的.
换成之前, 会觉得这人是一座好大的高山要停止膜拜, 这几年虽然本人技术仍然不那么好, 但是还是喜爱去思索一些内在的东西, 更在努力一点一点把心里的权威崇敬给去除, 再看到这些的时候, "..." 这几个标点符号很容易印在脑子里. 感受这不只是一两个人这样, 极有大概是整个 js 圈子都是这样
说回标题上来, 除了看书, 看专栏, 寻材料, 很久都还是没有把 generator 和 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}在上面的根基上给办法 return 值
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}最后, 在上面的根基上给办法 return 值
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') 的时候, 传进去的 N 是会被忽略的, 由于第一次 next() 传的值没有 yield 前面来接收. 再去看书也好, 看查到的文章也好, 第一次 next() 都是没有传过参数
感受 yield 就是为了迭代而生的, 迭代完全可以就用 for 啊, 但是却绕成这样, 也不知道这是为哪般! 就这还能新弄一个 for of 玩出花来, 由于每施行 next() 才会施行那一段段, 还美其名曰 "咱们终于可以异步了"
async/await
再是 es7 开端有的这俩关键字, 看了一个大厂的面试题, 本人为了加深对这两个关键字的懂得改了一下成下面这样
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 和 opera 的实现中明显是有问题的, 想像得到, 低版本一点的 chrome 也大概是后面的结果
终
还有像 var let const 这种一个简便的赋值都能玩出这么多花样(当然, 这可以说是历史遗留问题致使的)
诚实说, 我觉得这更多是为了: "别的说话有, 咱们这么前卫的说话当然应当要有!"
...
就这么样一门说话, 竟然可以流行成此刻这样, 只能说这个世界是真巧妙
本篇文章到这里就已经全部完毕了，更多其他出色内容可以关注PHP中文网的JavaScript教程视频栏目！
以上就是es5中yield和es6中aysnc/await的介绍（附示例）的具体内容，更多请关注百分百源码网其它相关文章！
