Creating an array from ES6 generator

问题

Let's say I want to assign the result of an ES6 generator to an array variable.

function* gen() {
   for(let i = 0; i < 3; i++) {
       yield i;
   }
}

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

Here b will be assigned [0, 1, 2]. Why does this work?

回答1:

A generator, when invoked, returns an iterator. We could for example loop through the iterator with a for … of loop:

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

Which would just go through each item in the generator:

0
1
2

The same things happens, if we invoke the spread syntax:

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

res would then be:

[0, 1, 2]

In your example, you're using a destructuring assignment. Destructuring with the bracket syntax invokes the iterable to get the values (same principle for arrays). Example:

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

Since you're using the rest syntax, you're basically saying: Give me all the values that are left in the iterator, and save them in the variable b:

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

This works on any iterable:

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

Personally, I find the following a lot easier to reason about:

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

回答2:

Well I think I found the answer on this post. The ... operator here is the rest operator. When used to destructure an array, it will assign all unassigned elements of the array being destructured to another array. The rest operator must be used on the last item in the list of variables receiving the destructured values. For example:

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]

In the question, since b is the only thing being destructured and its using the rest operator, the entire array is assigned to it.

ES6 appears to run the generator and turn the result into an array on the right hand side of the =.

来源：https://stackoverflow.com/questions/43939821/creating-an-array-from-es6-generator

标签

javascript

ecmascript-6

generator