ES6 Generator

5201 단어
Generator 함수는 ES6에서 협동하여 이루어진 것으로 가장 큰 특징은 함수의 집행권(즉 집행 정지)을 넘길 수 있다는 것이다.Generator 함수와 일반 함수의 차이는 두 가지가 있는데 1:function과 함수 이름 사이에는 *번호가 하나 있고 2:함수체 내부에는 yield 표현식이 사용된다.예:
function *gen(){
           yield '1';
           yield '2'; 
           return '3';
}

전체Generator 함수는 봉인된 비동기 작업, 또는 비동기 작업의 용기입니다.비동기 조작을 멈추어야 하는 곳은 모두 yield 문장으로 명시되어 있다.Generator 함수의 실행 방법은 다음과 같습니다.
var g = gen();
g.next(); //{value: 1 ,done:fasle}
g.next(); //{value: 2 ,done:fasle}
g.next(); //{value: 3 ,done:true}

위의 코드에서Generator 함수를 호출하면 내부 바늘 (즉 캐리어) g를 되돌려줍니다.이것은Generator 함수가 일반 함수와 다른 곳입니다. 즉, 그것을 실행하면 결과를 되돌리지 않고 바늘 대상을 되돌려줍니다.포인터 g의next () 방법을 호출하면 포인터를 이동하여 첫 번째로 만나는 yield 문장을 가리킵니다.그리고 이 방법의value에 yield의 매개 변수를 되돌려줍니다.다시 호출하면 두 번째 yield 문장을 실행하고 매개 변수를 되돌려줍니다.넥스트 방법은 2개의 매개 변수를 되돌려줍니다. 하나는value이고, 하나는done입니다. 첫 번째value는yield의 매개 변수이고, 두 번째는value가 끝났는지 확인하는 것입니다.위 코드는retrun을 만들었기 때문에 코드가 끝나고true로 돌아갑니다.문자열 출력에 맞추려면 () 를 추가해야 합니다. 예를 들어
function *gen(){
console.log('hello'+(yield));
console.log('hello'+(yield 123));
} 

next 방법은 yield 표현식 자체에 반환 값이 없거나 undefined를 항상 반환할 수 있습니다.next 방법은 매개 변수를 가져올 수 있습니다. 이 매개 변수는 yield의 반환 값으로 간주되지 않습니다.예컨대
function* gen(x){
var y = 2 * (yield(x+ 1));
var z = yield (y/3);
return (x+y+z);
}
var a = gen(5);
a.next()  // value: 6;
a.next()  // value:NaN;
a.next()  // value:NaN;
var b = gen(5);
b.next(); // value:6;
b.next(12); //value :8
b.next(13);//value:42 

위 코드에서 두 번째next 방법을 실행할 때 매개 변수를 가지고 있지 않아서 y가 undefined, 2undefined로 되돌아오기 때문에 NaN으로 되돌아갑니다.next에 매개 변수를 전송하면 첫 번째 x+1=6;6, 두 번째next전참12212=24로 되돌아오기;24/3 = 8;8, 세 번째next전참13, 5+24+13=42를 되돌려줍니다.돌아가다
Generator는 for...of 반복, 반복은 더 이상next 방법이 필요하지 않습니다.
function *gen(){
yield 1;
yield 2;
yield 3;
yield 4;
yield 5;
return 6;
}

for(let v of gen()){
console.log(v);//1 2 3 4 5 
}

위 코드 사용 for...of 순환, 순서대로 5개의 yield 표현식 값을 표시합니다. 여기서 주의해야 할 것은next 방법의 반환 대상의done 속성이true, for...of 순환이 중단됩니다.이 반환 대상이 포함되지 않기 때문에 위 코드retrun6, for에 포함되지 않습니다...of 순환 중.for 말고...of 루프 이외의 확장 연산자(...),부치와array를 해체합니다.from 방법 내부에서 호출된 것은 모두 캐리어 인터페이스입니다.이것은 Generator 함수를 매개 변수로 되돌릴 수 있다는 것을 의미합니다.
function *gen(){
yield 1;
yield 2;
return 3;
yield 4;
}

//    
[...gen()]   //  [1,2]

//  Array.from  
Array.from(gen());  // [1,2]

//   
let [x,y] = gen();
x  // 1
y  //  2 

//   for...of   
for(let v of gen()){
console.log(n);
//    1
//    2
}

Generator 함수가 되돌아오는 트랙터 대상은throw 방법이 있습니다. 함수체 밖에서 오류를 던지고Generator 함수체에서 포획할 수 있습니다.
var g = funciton* (){
try{
  yield;
} catch(e){
console.log(' ',e)
}
}

var i = g();
i.next();

try{
 i.throw('a');
i.throw('b');
} catch(e){
console.log(' ',e);
}
//   a
//   b

위 코드에서 캐리어 대상 i가 두 개의 오류를 연속으로 내보냅니다.첫 번째 오류는Generator 함수에 있는catch 문장에 포착되었습니다.i 두 번째 오류가 발생했습니다.Generator 함수 내부의catch 문장이 실행되었기 때문에 이 오류를 다시 포착하지 않을 것입니다. 그래서 이 오류는Generator 함수체를 던져 함수체 밖의catch 문장에 포착되었습니다.
Generator 함수는 주어진 값을 되돌려주고 Generator 함수를 끝낼 수 있는return 방법이 있습니다.
funciton *gen(){
  yield 1;
  yield 2;
  yield 3;
}

var g = gen();
g.next(); // value 1 done :false
g.return('foo') // value 2 done :false
g.next()  // value :undefined done :true

위의 코드에서 캐리어 대상 g가retrun 방법을 호출한 후 값을 되돌려주는value 속성은retrun 방법의 매개 변수foo입니다.그리고Generator 함수의 반복이 종료되었습니다. 값을 되돌려주는done 속성은true입니다. 이후next 방법을 사용하면done 속성은true로 되돌려줍니다.만약retrun이 전삼이 없다면, 되돌아오는 value는undefined입니다.Generator 함수 내부에 try가 있다면...finally 코드 블록,retrun 방법은finally 코드 블록이 실행될 때까지 연기됩니다.
funciton* gen(){
yield 1;
  try{
      yield 2;
      yield 3;
  } finally{
    yield 4;
    yield 5;
  }
yield 6;
}

var g = gen();
g.next(); // value :1 done :false
g.next(); // value :2 done :false
g.reture(7); // value :4 done :false
g.next(); // value :5 done :false
g.next(); // value :7 done :true

위 코드에서retrun 방법을 호출한 후,finally 코드 블록을 실행하기 시작하고,finally 코드 블록이 실행될 때,retrun 방법을 실행합니다.
만약foo와bar가 모두Generator 함수라면bar에서foo를 호출하면 효과가 없습니다.이것은 하나의 Generator 함수에서 다른 Generator 함수를 실행하는 데 사용됩니다
funciton* bar(){
      yield 'x';
      yield* foo();
      yield 'y';
}

// 
funciton* bar(){
    yield 'x';
    yield 'a';
    yield 'b';
    yield 'y';
}

// 
function* bar(){
  yield 'x';
  for(let v of foo()){
    yield v;
  }
  yield 'y';
}

for(let v of bar()){
  console.log(v);
}
// 'x'
// 'a'
// 'b'
// 'y'

yield* 뒤에 있는Generator 함수 (retrun 문장이 없을 때) 는Generator 함수 내부에 for를 배치하는 것과 같습니다.of 순환.
function *concat(item1,item2){
  yield* item1;
  yield* item2;
}

//  
function* concat(item1,item2){
  for(var value of item1){
      yield value;
  }
  for(var value of item2){
      yield value;
  }
}

만약 yield* 뒤에 하나의 그룹을 따라간다면, 그룹의 원생은 트랙터를 지원하기 때문에, 트랙터 구성원을 추적합니다.
function* gen(){
  yield* [1,1,1,2,3,3,5];
}
gen().next()  // value 1;

위 코드에서 yield 명령 뒤에 별표를 붙이지 않으면 전체 수조가 되돌아오고 별표를 붙인 후에 되돌아오는 것은 수조가 두루 다니는 대상이다.

좋은 웹페이지 즐겨찾기