JavaScript ES6의 Generator_Basic 지식에 대한 자세한 설명

오늘 논의할 새로운 기능은 ES6의 가장 놀라운 기능이기 때문에 정말 기대됩니다.

여기서 '마법'이란 무엇을 의미하나요? 초보자에게 이 기능은 이전 JS와 완전히 다르며, 심지어 약간 모호하기도 합니다. 이는 언어의 정상적인 동작을 완전히 바꾼다는 점에서 "마법적"입니다.

그뿐만 아니라 이 기능은 프로그램 코드를 단순화하고 복잡한 '콜백 스택'을 직선 실행 형태로 변경할 수도 있습니다.

너무 많이 배치했나요? 본격적인 소개부터 시작해 보시고, 스스로 판단하시면 됩니다.
소개

제너레이터란 무엇인가요?

아래 코드를 보세요:

function* quips(name) {
 yield "hello " + name + "!";
 yield "i hope you are enjoying the blog posts";
 if (name.startsWith("X")) {
  yield "it's cool how your name starts with X, " + name;
 }
 yield "see you later!";
}
 
function* quips(name) {
 yield "hello " + name + "!";
 yield "i hope you are enjoying the blog posts";
 if (name.startsWith("X")) {
  yield "it's cool how your name starts with X, " + name;
 }
 yield "see you later!";
}

위 코드는 말하는 고양이(현재 매우 인기 있는 애플리케이션)를 흉내낸 부분입니다. 여기를 클릭하여 사용해 보세요, 코드가 헷갈린다면, 여기로 돌아오세요. 아래 설명을 참조하세요.

이것은 생성기 함수라고 불리는 함수와 매우 비슷해 보이지만 일반적인 함수와 공통점이 많지만 다음과 같은 두 가지 차이점도 볼 수 있습니다.

일반 함수는 함수로 시작하지만 제너레이터 함수는 함수*로 시작합니다.
Generator 함수 내에서 Yield는 return과 다소 유사한 키워드입니다. 차이점은 모든 함수(생성기 함수 포함)는 한 번만 반환할 수 있는 반면, 생성기 함수에서는 여러 번 반환할 수 있다는 것입니다. 항복 표현식은 생성기 함수의 실행을 일시 중지하고 일시 중지된 위치에서 실행을 재개할 수 있습니다.

일반 함수는 실행을 일시 중지할 수 없지만 제너레이터 함수는 가능합니다.
원리

quips()가 호출되면 어떻게 되나요?

> var iter = quips("jorendorff");
 [object Generator]
> iter.next()
 { value: "hello jorendorff!", done: false }
> iter.next()
 { value: "i hope you are enjoying the blog posts", done: false }
> iter.next()
 { value: "see you later!", done: false }
> iter.next()
 { value: undefined, done: true }

 
> var iter = quips("jorendorff");
 [object Generator]
> iter.next()
 { value: "hello jorendorff!", done: false }
> iter.next()
 { value: "i hope you are enjoying the blog posts", done: false }
> iter.next()
 { value: "see you later!", done: false }
> iter.next()
 { value: undefined, done: true }

우리는 함수가 호출되면 함수가 반환되거나 예외가 발생할 때까지 즉시 실행되는 일반적인 함수의 동작에 대해 매우 잘 알고 있습니다.

Generator 함수의 호출 방식은 일반 함수인 quips("jorendorff")와 동일하지만, Generator 함수 호출 시 바로 실행되지는 않지만, Generator 객체(위 코드에서는 iter)가 이때 함수 ​​코드의 첫 번째 줄에서는 즉시 Pause 함수가 반환됩니다.

Generator 객체의 .next() 메서드가 호출될 때마다 함수는 다음 항복 표현식을 만날 때까지 실행을 시작합니다.

이것이 iter.next()를 호출할 때마다 다른 문자열을 얻는 이유입니다. 이는 함수 내부의 항복 표현식에서 생성된 값입니다.

마지막 iter.next()가 실행되면 Generator 함수의 끝에 도달하므로 반환된 결과의 .done 속성 값은 true이고 .value 속성 값은 정의되지 않습니다.

이제 Talking cat DEMO로 돌아가서 코드에 몇 가지 항복 표현식을 추가하고 어떤 일이 일어나는지 확인해 보세요.

기술적으로 말하면, Generator 함수 실행이 양보 표현식을 만날 때마다 함수의 스택 프레임(지역 변수, 함수 매개변수, 임시 값 및 현재 실행 위치)은 스택에서 제거되지만 Generator 객체는 그대로 유지됩니다. 스택 프레임이 제거되므로 다음에 .next() 메서드가 호출될 때 실행을 재개하고 계속할 수 있습니다.

Generator는 멀티 스레드가 아니라는 점을 상기할 가치가 있습니다. 멀티스레딩을 지원하는 언어에서는 실행 리소스 경쟁, 실행 결과의 불확실성 및 성능 향상과 함께 여러 코드 조각이 동시에 실행될 수 있습니다. Generator 함수의 경우는 그렇지 않습니다. Generator 함수가 실행될 때 해당 함수와 해당 호출자는 동일한 스레드에서 실행됩니다. 각 실행 순서는 결정되고 순서가 지정되며 실행 순서는 변경되지 않습니다. 스레드와 달리 생성기 함수는 내부 양보 표시에서 실행을 일시 중지할 수 있습니다.

제너레이터 기능의 일시 중지, 실행 및 재개를 소개함으로써 제너레이터 기능이 무엇인지 알았으므로 이제 질문을 던집니다. 제너레이터 기능의 용도는 무엇입니까?
반복자

이전 기사를 통해 iterator는 ES6의 내장 클래스가 아니라 단지 언어의 확장점일 뿐임을 알고 있습니다. [Symbol.iterator]() 및 .next(를 구현하여 정의할 수 있습니다. ) 반복자.

그러나 인터페이스를 구현하려면 여전히 일부 코드를 작성해야 합니다. 실제로 반복자를 구현하는 방법을 살펴보겠습니다. 이 반복자는 단순히 한 숫자에서 다른 숫자로 누적됩니다. C 언어의 for(;;) 루프와 비슷합니다.

// This should "ding" three times
for (var value of range(0, 3)) {
 alert("Ding! at floor #" + value);
}
 
// This should "ding" three times
for (var value of range(0, 3)) {
 alert("Ding! at floor #" + value);
}

이제 ES6 클래스를 사용하는 솔루션이 있습니다. (아직 클래스 구문에 익숙하지 않더라도 걱정하지 마세요. 향후 기사에서 다루겠습니다.)

class RangeIterator {
 constructor(start, stop) {
  this.value = start;
  this.stop = stop;
 }

 [Symbol.iterator]() { return this; }

 next() {
  var value = this.value;
  if (value < this.stop) {
   this.value++;
   return {done: false, value: value};
  } else {
   return {done: true, value: undefined};
  }
 }
}

// Return a new iterator that counts up from 'start' to 'stop'.
function range(start, stop) {
 return new RangeIterator(start, stop);
}
 
class RangeIterator {
 constructor(start, stop) {
  this.value = start;
  this.stop = stop;
 }
 
 [Symbol.iterator]() { return this; }
 
 next() {
  var value = this.value;
  if (value < this.stop) {
   this.value++;
   return {done: false, value: value};
  } else {
   return {done: true, value: undefined};
  }
 }
}
 
// Return a new iterator that counts up from 'start' to 'stop'.
function range(start, stop) {
 return new RangeIterator(start, stop);
}

查看该 DEMO。

这种实现方式与 Java 和 Swift 的实现方式类似，看上去还不错，但还不能说上面代码就完全正确，代码没有任何 Bug？这很难说。我们看不到任何传统的 for (;;) 循环代码：迭代器的协议迫使我们将循环拆散了。

在这一点上，你也许会对迭代器不那么热衷了，它们使用起来很方便，但是实现起来似乎很难。

我们可以引入一种新的实现方式，以使得实现迭代器更加容易。上面介绍的 Generator 可以用在这里吗？我们来试试：

function* range(start, stop) {
 for (var i = start; i < stop; i++)
  yield i;
}
 
function* range(start, stop) {
 for (var i = start; i < stop; i++)
  yield i;
}

查看该 DEMO。

上面这 4 行代码就可以完全替代之前的那个 23 行的实现，替换掉整个 RangeIterator 类，这是因为 Generator 天生就是迭代器，所有的 Generator 都原生实现了 .next() 和 [Symbol.iterator]() 方法。你只需要实现其中的循环逻辑就够了。

不使用 Generator 去实现一个迭代器就像被迫写一个很长很长的邮件一样，本来简单的表达出你的意思就可以了，RangeIterator 的实现是冗长和令人费解的，因为它没有使用循环语法去实现一个循环功能。使用 Generator 才是我们需要掌握的实现方式。

我们可以使用作为迭代器的 Generator 的哪些功能呢？

    使任何对象可遍历 — 编写一个 Genetator 函数去遍历 this，每遍历到一个值就 yield 一下，然后将该 Generator 函数作为要遍历的对象上的 [Symbol.iterator] 方法的实现。
    简化返回数组的函数 — 假如有一个每次调用时都返回一个数组的函数，比如：

// Divide the one-dimensional array 'icons'
// into arrays of length 'rowLength'.
function splitIntoRows(icons, rowLength) {
 var rows = [];
 for (var i = 0; i < icons.length; i += rowLength) {
  rows.push(icons.slice(i, i + rowLength));
 }
 return rows;
}

 
// Divide the one-dimensional array 'icons'
// into arrays of length 'rowLength'.
function splitIntoRows(icons, rowLength) {
 var rows = [];
 for (var i = 0; i < icons.length; i += rowLength) {
  rows.push(icons.slice(i, i + rowLength));
 }
 return rows;
}

使用 Generator 可以简化这类函数：

function* splitIntoRows(icons, rowLength) {
 for (var i = 0; i < icons.length; i += rowLength) {
  yield icons.slice(i, i + rowLength);
 }
}
 
function* splitIntoRows(icons, rowLength) {
 for (var i = 0; i < icons.length; i += rowLength) {
  yield icons.slice(i, i + rowLength);
 }
}

这两者唯一的区别在于，前者在调用时计算出了所有结果并用一个数组返回，后者返回的是一个迭代器，结果是在需要的时候才进行计算，然后一个一个地返回。

    无穷大的结果集 — 我们不能构建一个无穷大的数组，但是我们可以返回一个生成无尽序列的 Generator，并且每个调用者都可以从中获取到任意多个需要的值。
    重构复杂的循环 — 你是否想将一个复杂冗长的函数重构为两个简单的函数？Generator 是你重构工具箱中一把新的瑞士军刀。对于一个复杂的循环，我们可以将生成数据集那部分代码重构为一个 Generator 函数，然后用 for-of 遍历：for (var data of myNewGenerator(args))。
    构建迭代器的工具 — ES6 并没有提供一个可扩展的库，来对数据集进行 filter 和 map等操作，但 Generator 可以用几行代码就实现这类功能。

例如，假设你需要在 Nodelist 上实现与 Array.prototype.filter 同样的功能的方法。小菜一碟的事：

function* filter(test, iterable) {
 for (var item of iterable) {
  if (test(item))
   yield item;
 }
}

 
function* filter(test, iterable) {
 for (var item of iterable) {
  if (test(item))
   yield item;
 }
}

所以，Generator 很实用吧？当然，这是实现自定义迭代器最简单直接的方式，并且，在 ES6 中，迭代器是数据集和循环的新标准。

但，这还不是 Generator 的全部功能。
异步代码

异步 API 通常都需要一个回调函数，这意味着每次你都需要编写一个匿名函数来处理异步结果。如果同时处理三个异步事务，我们看到的是三个缩进层次的代码，而不仅仅是三行代码。

看下面代码：

}).on('close', function () {
 done(undefined, undefined);
}).on('error', function (error) {
 done(error);
});
 
}).on('close', function () {
 done(undefined, undefined);
}).on('error', function (error) {
 done(error);
});

异步 API 通常都有错误处理的约定，不同的 API 有不同的约定。大多数情况下，错误是默认丢弃的，甚至有些将成功也默认丢弃了。

直到现在，这些问题仍是我们处理异步编程必须付出的代价，而且我们也已经接受了异步代码只是看不来不像同步代码那样简单和友好。

Generator 给我们带来了希望，我们可以不再采用上面的方式。

Q.async()是一个将 Generator 和 Promise 结合起来处理异步代码的实验性尝试，让我们的异步代码类似于相应的同步代码。

例如：

// Synchronous code to make some noise.
function makeNoise() {
 shake();
 rattle();
 roll();
}

// Asynchronous code to make some noise.
// Returns a Promise object that becomes resolved
// when we're done making noise.
function makeNoise_async() {
 return Q.async(function* () {
  yield shake_async();
  yield rattle_async();
  yield roll_async();
 });
}
 
// Synchronous code to make some noise.
function makeNoise() {
 shake();
 rattle();
 roll();
}
 
// Asynchronous code to make some noise.
// Returns a Promise object that becomes resolved
// when we're done making noise.
function makeNoise_async() {
 return Q.async(function* () {
  yield shake_async();
  yield rattle_async();
  yield roll_async();
 });
}

가장 큰 차이점은 각 비동기 메서드 호출 앞에 Yield 키워드를 추가해야 한다는 것입니다.

Q.async에서는 동기 코드와 마찬가지로 if 문이나 try-catch 예외 처리를 추가하면 다른 비동기 코드 작성 방법에 비해 학습 비용이 많이 절감됩니다.

Generator는 인간 두뇌의 사고 방식에 더 적합한 비동기 프로그래밍 모델을 제공합니다. 그러나 더 나은 구문이 더 도움이 될 수 있습니다. ES7에서는 C#의 유사한 기능에서 영감을 받아 Promise 및 Generator를 기반으로 하는 비동기 처리 기능이 계획되고 있습니다.
호환성

서버 측에서는 이제 io.js에서 직접 Generator를 사용할 수 있습니다(또는 NodeJs에서 --harmony 시작 매개변수를 사용하여 Node를 시작할 수 있습니다).

브라우저 측에서는 현재 Firefox 27과 Chrome 39 이상에서만 Generator를 지원합니다. 웹에서 직접 사용하려면 Babel이나 Google의 Traceur를 사용하여 ES6 코드를 웹 친화적인 ES5 코드로 변환할 수 있습니다.

일부 여담: JS 버전의 Generator는 Brendan Eich에 의해 처음 구현되었습니다. 그는 2006년 초에 Firefox 2.0에 흡수된 Generator에서 영감을 받은 Python Generator의 구현을 그렸습니다. 그러나 표준화를 향한 길은 험난합니다. 그 과정에서 구문과 동작은 많은 변화를 겪었습니다. Firefox와 Chrome의 ES6 생성기는 Andy Wingo에 의해 구현되었으며 이 작업은 Bloomberg의 후원을 받았습니다.
수율;

제너레이터에 관해 언급되지 않은 부분이 있습니다. .throw() 및 .return() 메소드의 사용, .next() 메소드의 선택적 매개변수 및 Yield* 구문을 아직 다루지 않았습니다. 하지만 이 포스팅은 이미 충분히 길었다고 생각하며, 제너레이터와 마찬가지로 잠시 멈추고 나머지는 다음에 마무리하도록 하겠습니다.

우리는 ES6에 매우 중요한 두 가지 기능을 도입했습니다. 이제 ES6가 우리의 삶을 변화시킬 것이라고 과감하게 말할 수 있습니다. 단순해 보이는 이러한 기능은 매우 유용합니다.