ES6 생성기의 기본 사용법

이 문서의 예에서는 ES6 Generator의 기본 사용법을 설명합니다. 참조를 위해 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

1. Generator 소개

Generator의 기본 코드부터 시작하겠습니다

function* g(){
 yield 100;
 yield 200;
 return 300;
}
let gg = g();
console.log(gg);            // Object [Generator] {}
console.log(gg.next());        // { value: 100, done: false }
console.log(gg.next());        // { value: 200, done: false }
console.log(gg.next());        // { value: 300, done: true }
console.log(gg.next());        // { value: undefined, done: true }

먼저 살펴보겠습니다.

• Generator는 functinon*으로 정의되며 다음을 수행할 수 있습니다. 생성기 내부에서 사용 Yield

• Generator는 함수가 아닌 객체이며, 모든 연산을 직접 실행하는 것이 아닌 실행 시작 시 Pause 상태에 들어갑니다

• next( ), 반환된 모든 값은 { value: xxx, done: xxx }입니다. 이 형식에서 value는 이전 작업에서 반환된 값을 나타내며, 하나는 true이고 다른 하나는 false이며 전체 프로세스가 완료되었는지 여부를 나타냅니다.

2. Generator 비동기 프로그래밍

generator는 ES6에 도입된 비동기 솔루션으로 Promise의 비동기 처리와의 차이점을 살펴보겠습니다.

// 这里模拟了一个异步操作
function asyncFunc(data) {
 return new Promise( resolve => {
  setTimeout(
   function() {
    resolve(data)
   },1000
  )
 })
}

Promise 처리 방법:

asyncFunc("abc").then( res => {
 console.log(res);                    // "abc"
 return asyncFunc("def")
}).then( res => {
 console.log(res);                    // "def"
 return asyncFunc("ghi")
}).then( res => {
 console.log(res);                    // "ghi"
})

Generator 처리 방법:

function* g() {
 const r1 = yield asyncFunc("abc");
 console.log(r1);                            // "abc"
 const r2 = yield asyncFunc("def");
 console.log(r2);                            // "def"
 const r3 = yield asyncFunc("ghi");
 console.log(r3);                            // "ghi"
}

let gg = g();
let r1 = gg.next();
r1.value.then(res => {
 let r2 = gg.next(res);
 r2.value.then(res => {
  let r3 = gg.next(res);
  r3.value.then(res => {
   gg.next(res)
  })
 })
})

Promise 다중 콜백은 더 복잡하고 코드가 충분히 간결하지 않습니다. 생성기는 비동기 처리에서 동기 코드처럼 보이지만 실제로는 비동기 작업입니다. 단 하나의 비동기 작업만 수행하는 경우 처리가 상대적으로 복잡합니다. 발전기가 더 적합합니다.

3.yield 및yield*

두 가지 코드를 먼저 살펴보겠습니다

function* g1() {
 yield 100;
 yield g2();
 return 400;
}

function* g2() {
 yield 200;
 yield 300;
}

let gg = g1();
console.log(gg.next());                // { value: 100, done: false }
console.log(gg.next());                // { value: Object [Generator] {}, done: false }
console.log(gg.next());                // { value: 400, done: true }
console.log(gg.next());                // { value: undefined, done: true }

function* g1() {
 yield 100;
 yield* g2();
 return 400;
}

function* g2() {
 yield 200;
 yield 300;
}

let gg = g1();
console.log(gg.next());                // { value: 100, done: false }
console.log(gg.next());                // { value: 200, done: false }
console.log(gg.next());                // { value: 300, done: false }
console.log(gg.next());                // { value: 400, done: true }

yield는 다른 생성기를 순회하지 않고 반복자 객체를 반환하는 반면,yield*는 생성기를 순회하고 반복합니다.

추천 튜토리얼: "JS Tutorial"

위 내용은 ES6 생성기의 기본 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!