ES6 기능 - Generators

what

Generators를 프로세스를 중단하고 복구할 수 있는 코드 세그먼트로 생각할 수 있습니다.like this:

function* genFunc() {
    // (A)
    console.log('First');
    yield;
    console.log('Second');
}

function*는 새로운Generators 함수의 키워드입니다.

yield는 자신의 조작을 멈출 수 있는 부호이다.

Generators는 yield를 통해서도 수신 및 발송할 수 있습니다.

생성기 함수genFunc()를 호출하면 프로세스를 제어하는 데 사용할 수 있는 생성기 대상genObj:

const genObj = genFunc();

Generators의 개념

Generators are defined with function* .

function* foo(x) {
    yield x + 1;

    var y = yield null;
    return x + y;
}

결과:

var gen = foo(5);
gen.next(); // { value: 6, done: false }
gen.next(); // { value: null, done: false }
gen.send(2); // { value: 7, done: true }

이 방법을 온라인 편집기에 붙여서 실행한 후에 인쇄한 y = 2 나는 이해하지 못하고 자료를 찾아서 알게 되었다.
·var y = yield; or var yield null;을 사용하여 수신합니다.next(파라미터) 방법의 파라미터, 즉 이 파라미터는 생성기에 전송되어 이전 단계의 비동기 작업의 반환 결과로 함수 내의 변수 y에 의해 수신됩니다.
다른 예:

function* foo(x) {
  yield x+1;
  var y  = yield;
  console.log(`y=${y}`);
  return x + y ;
}

var gen = foo(5);
console.log(gen.next());
console.log(gen.next());
console.log(gen.next(4));

결과:

Object {
  "done": false,
  "value": 6
}
Object {
  "done": false,
  "value": undefined
}
"y=4"
Object {
  "done": true,
  "value": 9
}

Notes:

yield is allowed anywhere an expression is. This makes it a powerful construct for pausing a function in the middle of anything, such as foo(yield x, yield y), or loops.

Calling a generator looks like a function, but it just creates a generator object. You need to call next or send to resume the generator. send is used when you want to send values back into it. gen.next() is equivalent to gen.send(null). There's also gen.throw which throws an exception from within the generator.

Generator methods don't return a raw value, they return an object with two properties: value and done. This makes it clear when a generator is finished, either with return or simply the end of the function, instead of a clunky StopIteration exception was the old API.

      --  ， 。

Generators 유형

Generator function declarations:

function* genFunc() { ··· }
 const genObj = genFunc();

Generator function expressions:

 const genFunc = function* () { ··· };
 const genObj = genFunc();

Generator method definitions in object literals:

 const obj = {
     * generatorMethod() {
         ···
     }
 };
 const genObj = obj.generatorMethod();

Generator method definitions in class definitions (class declarations or class expressions):

 class MyClass {
     * generatorMethod() {
         ···
     }
 }
 const myInst = new MyClass();
 const genObj = myInst.generatorMethod();

특성

교체 실현

비동기식 코드 단순화

function fetchJson(url) {
    return fetch(url)
    .then(request => request.text())
    .then(text => {
        return JSON.parse(text);
    })
    .catch(error => {
        console.log(`ERROR: ${error.stack}`);
    });
}

위아래는 등가이다

// es6
const fetchJson = co.wrap(function* (url) {
    try {
        let request = yield fetch(url);
        let text = yield request.text();
        return JSON.parse(text);
    }
    catch (error) {
        console.log(`ERROR: ${error.stack}`);
    }
});
// ECMAScript 2017
async function fetchJson(url) {
    try {
        let request = await fetch(url);
        let text = await request.text();
        return JSON.parse(text);
    }
    catch (error) {
        console.log(`ERROR: ${error.stack}`);
    }
}

Generator가 맡은 역할.

Iterators - 데이터 생성기 하나하나yield는 next()를 통해 하나의 데이터를 되돌릴 수 있기 때문에 순환이나 귀속을 통해 많은 데이터를 생성할 수 있다.

Observers-데이터 소비자yield는 next()를 통해 데이터를 되돌릴 수 있다. 그러면 다음 데이터를 받기 전에 잠시 멈추고 이 데이터를 소비한 다음에 다시 복구하여 계속 데이터를 받을 수 있다.

Coroutines - 데이터 생성기 및 데이터 소비자

어떻게 일해요?

function* genFunc() {
    yield 'a';
    yield 'b';
}

호출 결과:

> const genObj = genFunc();
> genObj.next()
{ value: 'a', done: false }

> genObj.next()
{ value: 'b', done: false }

> genObj.next() // done: true => end of sequence
{ value: undefined, done: true }

yield는 리셋 함수에서 사용할 수 없습니다.

function* genFunc() {
    ['a', 'b'].forEach(x => yield x); // SyntaxError
}

function* genFunc() {
    for (const x of ['a', 'b']) {
        yield x; // OK
    }
}

참고

Generators

뒤에 써주세요.
GitHub는 지난번에 여러분의 힘을 모아 전단면 시험 문제를 만들었습니다. 그 안에 여러분이 면접을 볼 때 겪는 문제와 학습 자료가 있습니다. 관심이 있으면 주목해 보세요.당신도 우리에 가입할 흥미가 있다면 프로젝트에 메시지를 남겨 주세요.프로젝트는gitbook에서도 볼 수 있습니다.
InterviewLibrary-GitHub InterviewLibrary-gitbook