解构数组如何与生成器函数一起工作？

【问题标题】：How does works the destructuring array with generator functions?解构数组如何与生成器函数一起工作？
【发布时间】：2017-05-16 17:42:11
【问题描述】：

我找到了这个例子，我很惊讶生成器的最终值是从生成器中获取的。这是代码：

function* foo() {
  yield 'a';
  yield 'b';
  yield 'c';
}

const [...values] = foo();

根据我对生成器的理解，我认为解构生成器执行相当于：

const array = [];
for(const val of foo()) {
    array.push(val)
}

所以，我的问题是：这是获取生成器函数值的有效方法吗？还有哪些其他方法可以实现这一点？

【问题讨论】：

这对我来说似乎是正确的
"这是一种有效的方法吗？" --does it work? Yes? Then it's valid.“还有什么其他方法可以实现这一点？”很多;对于 SO 来说，这可能是一个过于宽泛的问题。
它是有效的，但恕我直言，它的可读性不如 const values = [...foo()] 甚至 const values = Array.from(foo())。
相关/重复：Creating an array from ES6 generator

标签： javascript ecmascript-6 destructuring

【解决方案1】：

迭代 （可迭代和迭代器） 协议为您提供无限可能...

function* foo() {
  yield 'a';
  yield 'b';
  yield 'c';
}

const [...values] = foo();

console.log(...values);

function* foo() {
  yield 'a';
  yield 'b';
  yield 'c';
}

const [a, b, c] = foo();

console.log(a, b, c);

function* foo() {
  yield 'a';
  yield 'b';
  yield 'c';
};

let values = [];

for (const str of foo()) {
  values.push(str);
}

console.log(values[0], values[1], values[2]);

function* foo() {
  yield 'a';
  yield 'b';
  yield 'c';
}

const [a, b, ...values] = Array.from(foo());

console.log(a, b, values.toString());

let foo = (function* () {
  yield 'a';
  yield 'b';
  yield 'c';
})();

console.log(foo.next().value, foo.next().value, foo.next().value);

【讨论】：