Javascript 의 Generator 함수 와 yield 키워드

순서.
자 바스 크 립 트 에서 가장 많이 논의 되 는 것 은 비동기 프로 그래 밍 의 조작 이다. 리 셋 의 여러 번 끼 워 넣 는 것 을 어떻게 피 할 것 인가.비동기 조작의 리 셋 이 많이 끼 워 지면 코드 가 비대 해 질 뿐만 아니 라 오류 가 발생 하기 쉽다.다양한 비동기 프로 그래 밍 솔 루 션 도 끊임없이 제기 되 고 있다. 예 를 들 어 모두 가 알 고 있 는 Promise, co 등 이다.오늘 말 한 Generator 와 yield 는 비동기 프로 그래 밍 과 관련 이 있어 서 비동기 프로 그래 밍 을 동기 화 하 는 데 도움 을 줄 수 있 습 니 다.
발전기 소개
Generator 는 형식적 으로 함수 와 차이 가 많 지 않 습 니 다. 다만 function 과 함수 명 사이 에 하나 가 더 생 겼 습 니 다 *.Generator 내 부 는 yield 키 워드 를 사용 해 야 합 니 다.예 를 들 면:

function * gen(){
  var result1 = yield 'hello';
  var result2 = yield 'world';
  return result1 + result2;
}

Generator 함 수 를 호출 할 때 함수 내부 의 코드 를 실행 하지 않 고 스 트 리밍 기 를 되 돌려 줍 니 다. 이 스 트 리밍 기 는 next 방법 을 포함 합 니 다.next 방법 을 실행 할 때마다 Generator 함수 체험 이 실 행 됩 니 다. yield 문 구 를 만 날 때 까지 이 문 구 를 실행 하고 여기 서 중단 합 니 다.용법 은 다음 과 같다.

var g = gen();
g.next(1);
//{value : 'hello', done : false}
g.next(2);
//{value : 'world', done : false}
g.next();
//{value : 3, done: true}
g.next();
//{value : undefined, done: true}

next 방법 을 호출 하면 대상 을 되 돌려 줍 니 다. 이 대상 은 두 개의 속성 을 포함 합 니 다. value 와 done, value 는 현재 yield 문장의 값 입 니 다.done 은 Generator 함수 체 가 실행 되 었 는 지 여 부 를 표시 합 니 다.next 방법 은 하나의 인 자 를 동시에 받 아들 입 니 다. 이 인 자 는 yield 문장의 반환 값 으로 뒤의 프로그램 에서 사용 할 수 있 습 니 다.프로그램 이 실행 되 거나 return 문 구 를 만 났 을 때 value 는 함수 체 의 반환 값 이 고 done 은 true 가 됩 니 다.이로써 next 방법 을 다시 실행 하면 value 는 undefined 이 고 done 은 여전히 true 입 니 다.
Generator 의 옮 겨 다 니 는 응용
js 에서 우 리 는 하나의 배열 을 옮 겨 다 녀 야 합 니 다. 우 리 는 for... of 라 는 문 구 를 사용 하여 옮 겨 다 닐 수 있 습 니 다. 이것 은 사실은 배열 에 Generator 달력 이 포함 되 어 있 기 때 문 입 니 다.우리 가 정의 하 는 대상 에 도 하나의 스 트 리밍 기 가 포함 되 어 있다 면, 우 리 는 for... of 등 스 트 리밍 문 구 를 통 해 사용자 정의 대상 을 옮 겨 다 닐 수 있 습 니 다.이 달력 은 Symbol. iterator 속성 에 존재 합 니 다.

var myArray = {
  0: ' ',
  1: ' ',
  2: '  ',
  length: 3
};

myArray[Symbol.iterator] = function * (){
  for(var i = 0; i < this.length; i++) {
    yield this[i];
  }
};

for(var item of myArray) {
  console.log(item);
}
// 
// 
//  

Generator 비동기 프로 그래 밍 에서 의 응용
Javascript 의 핵심 은 비동기 프로 그래 밍 입 니 다. 모든 비동기 작업 은 콜백 리 셋 함 수 를 제공 하여 실 행 된 결 과 를 되 돌려 줍 니 다.만약 에 우리 가 몇 가지 조작 이 있다 고 가정 하면 다음 조작 은 앞의 조작 결과 에 의존 하고 만약 에 리 셋 방식 을 사용한다 면:

step1(function(value1) {
  step2(value1, function(value2) {
    step3(value2, function(value3)) {
      //some code
    }
  });
})

이러한 코드 는 한 번 에 반복 되 는 내장 이 많아 지면 프로그램 을 이해 하기 어렵 게 만 들 고 실수 하기 도 쉽다.우리 가 해 야 할 일 은 리 셋 을 편평 하 게 하 는 것 이다.Promise 대상 은 이러한 기능 입 니 다. 상기 조작 Promise 화:

step1().then(function(value1){
  return step2(value1);
}).then(function(value2){
  return step3(value2);
}).then(function(){
  //some code
})

우 리 는 플러그 인 이 줄 어 든 것 을 볼 수 있 지만, 이것 은 결코 가장 이상 적 인 해결 방안 이 아니다. 만약 우리 가 비동기 적 인 조작 을 동기 화 조작 으로 바 꿀 수 있다 면, 플러그 인 이 없 으 면 프로그램 도 잘 이해 할 수 있 을 것 이다.Generator 함수 가 우리 에 게 제공 하 는 이런 기회.

function *workflow(){
  var value1 = yield step1();
  var value2 = yield step2();
  var value3 = yield step3();
  //some code
}

이것 이 바로 우리 가 원 하 는 결과 이다. 비동기 프로 그래 밍 은 동기 프로 그래 밍 의 형식 을 프로 그래 밍 했다.우리 가 다음 에 해 야 할 일 은 이 Generator 를 실행 시 키 는 것 이기 때문에 우 리 는 실행 기 가 필요 하 다.co 는 Generator 가 자동 으로 실행 하도록 하 는 실행 기 입 니 다.

co(function *workflow(){
  var value1 = yield step1();
  var value2 = yield step2();
  var value3 = yield step3();
  //some code
});

co 는 제한 이 있 습 니 다. yield 문 구 는 Promise 대상 이나 Thunk 함수 만 따라 갈 수 있 습 니 다. co 에 대해 더욱 상세 하 게 소개 하고 완 선생님 의 글 인 co 함수 창고 의 의미 와 용법 을 참고 할 수 있 습 니 다.그러나 이러한 방법 은 여전히 외부 라 이브 러 리 함수 에 의존 해 야 하기 때문에 ES6 에 서 는 async 와 await 키 워드 를 제시 했다.async 와 await 는 사실 Generator 의 문법 사탕 이다.그냥 실행 기 를 가지 고 있 습 니 다.위의 코드 를 async 형식 으로 바 꿉 니 다.

async function workflow(){
  var value1 = await step1();
  var value2 = await step2();
  var value3 = await step3();
  //some code
}

var result = workflow();

async 는 co 의 제한 이 없습니다.await 키워드 뒤 에는 Promise 대상 과 원본 형식의 값 (수치, 문자열, 불 값) 을 사용 할 수 있 지만 이 때 는 동기 화 작업 과 같 습 니 다.