이 기사는 es5의 Yield 및 es6의 aysnc/await에 대한 소개를 제공합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
최근 여가 시간에 js 관련 책을 읽고 있으며, Geek Time에서 프론트엔드 관련 칼럼도 구매했습니다. jser가 아닌 사람으로서는 항상 느끼는 바가 있습니다. js 커뮤니티는 정말 급진적이며 이 규칙 제정자들은 구속이 무엇인지 결코 알지 못하는 것 같습니다. 때로는 본질적인 것을 다룰 수 있지만 그들은 인위적으로 몇 가지 개념과 구문 설탕을 만들어내는 것을 선호하며, 인위적으로 산을 쌓지 못한 것 같습니다. 그건 그냥 "신인"입니다
저의 악랄함을 용서해 주세요. "JS Language Essence"를 읽을 때 이 느낌이 매우 강했습니다. 저자는 업계의 대가이고 json도 공식화했지만 여전히 각 장은 그렇습니다. “하찮은 것 같고 철학이 숨어 있다”는 셰익스피어의 명언을 맨 처음에 인용했다. 책에 나오는 많은 내용은 언제나 한 가지 의미를 갖고 있다. 하지만 그렇지는 않습니다. 6점만 말하면 나머지는 스스로 이해할 수 있습니다. 이해로는 이해되지 않는 일반적인 것들이 많지만 몇 마디로 그 본질을 설명하면 갑자기 이해될 수 있습니다. 예전에는 이 사람이 숭배할 산이 너무 크다고 생각했을 겁니다. 비록 지난 몇 년 동안 제 실력이 아직 그렇게 좋지는 않지만, 여전히 내면에 대해 생각하는 것을 좋아하고 열심히 노력하고 있습니다. 마음속의 권위 숭배를 조금씩 없애고 이런 것들을 보면 '...' 이런 문장들이 쉽게 마음에 각인되는 게 한두 사람이 아니라는 생각이 듭니다. js 서클 전체가 이럴 가능성이 높습니다
제목으로 돌아가서 책을 읽고 칼럼을 읽고 정보를 찾는 것 외에도 제너레이터와 async/await를 오랫동안 완전히 이해하지 못했기 때문에 저는 실행중인 전체 프로세스를 정리해 보았습니다
Generator
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')을 사용할 때 전달된 N은 무시됩니다. next()는 처음으로 받을 수 있는 Yield가 없습니다. 책을 읽든, 찾은 기사를 읽든 첫 번째는 next()에 한 번만 전달되는 매개변수가 아닙니다. for는 반복을 위해 사용할 수 있지만 왜 이렇게 포장되어 있는지는 모르겠습니다. 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');
// 这个 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
분명히 DH B가 더 합리적입니다. . Firefox 및 Opera 구현에는 분명히 문제가 있습니다. 더 낮은 버전의 Chrome도 뒤처져 있을 수 있습니다. 결과
final
와 var let const와 같은 간단한 할당을 사용하면 많은 트릭을 사용할 수 있습니다. 물론 역사적 문제 때문이라고 할 수도 있음)
...
이러한 언어가 지금처럼 인기를 얻으려면 이 세상이 정말 놀랍다고밖에 말할 수 없습니다.
이 기사는 여기서 끝났습니다. 더 흥미로운 내용을 보려면
JavaScript 튜토리얼을 참조하세요. PHP 중국어 홈페이지의 영상칼럼!
위 내용은 es5의 Yield 및 es6의 aysnc/await 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!