Question

假设我想将ES6生成器的结果分配给数组变量。

function* gen() {
   for(let i = 0; i < 3; i++) {
       yield i;
   }
}

let [...b] = gen();
console.log(b); // [0, 1, 2]

此处b将被分配[0, 1, 2]。为什么这样做？

Answer 1

生成器在被调用时返回iterator。例如，我们可以使用for … of循环遍历迭代器：

for (const item of gen()) {
  console.log(item);
}

只会检查生成器中的每个项目：

0
1
2

如果我们调用spread syntax：

，会发生同样的事情

const res = [...gen()];

然后

res：

[0, 1, 2]

在您的示例中，您正在使用解构分配。使用括号语法进行解构会调用iterable来获取值（数组的原理相同）。例如：

const [a, b] = gen();
// a: 0, b: 1

由于你正在使用rest syntax，你基本上是这样说的：给我迭代器中剩下的所有值，并将它们保存在变量b中：

let [...b] = gen();
// b: [0, 1, 2]

这适用于任何可迭代：

const [a, b, ...c] = 'hello';
// a: 'h', b: 'e', c: 'llo'

就个人而言，我发现以下内容更容易理解：

const res = [...gen()];

Answer 2

我觉得我在this post找到了答案。这里的...运算符是其余运算符。当用于解构数组时，它会将被解构的数组的所有未分配元素分配给另一个数组。必须在接收结构化值的变量列表中的最后一项上使用其余运算符。例如：

let a = [1, 2, 3, 4, 5];
let [first, second, ...remainder] = a;

console.log(first); // 1
console.log(second); // 2
console.log(remainder); // [3, 4, 5]

在这个问题中，由于b是唯一被解构并且使用rest运算符的东西，因此整个数组都被分配给它。

ES6似乎运行生成器并将结果转换为=右侧的数组。

从ES6生成器创建数组

2 个答案: