为什么在这种情况下调用ES6会“产生”一个保留字？

Question

I am using node 4.1.1. When I run this code

"use strict";

function *generator() {
  let numbers = [1,2,3,4,5];
  numbers.map(n => yield (n + 1));
}

for (var n of generator()) {
  console.log(n);
}

I get this error

  numbers.map(n => yield (n + 1));
                   ^^^^^

SyntaxError: Unexpected strict mode reserved word

If I rearrange the code to be this

"use strict";

function *generator() {
  let numbers = [1,2,3,4,5];
  let higherNumbers = numbers.map(n => n + 1);
  for(let i=0;i<higherNumbers.length;i++) {
    yield higherNumbers[i];
  }
}

for (var n of generator()) {
  console.log(n);
}

I get the expected result.

Why does the second one work, and the first fail? And surely if a keyword is reserved, it's reserved in all contexts, not just when it's used in a arrow function?

Answer 1

You can do anything but not everything – Learn to delegate

Let's first look at two examples

1. yield

 function* generator(numbers) { yield numbers.map(x => x + 1); } for (let n of generator([1,2,3])) console.log(n); // [ 2, 3, 4 ] 

Our for loop logs each value yielded by the generator. Inside our generator, we have a single yield call which will yield the result of the numbers.map call, which is a new Array. Because there is only a single yield, the only logged value is [2,3,4]

2. yield*

So yield obviously won't work in the case above. We'll have to try something else.

 function* generator(numbers) { yield* numbers.map(x => x + 1); } for (let n of generator([1,2,3])) console.log(n); // 2 // 3 // 4 

Again, our for loop logs each value yield ed by the generator. Inside our generator, we yield the same result of the numbers.map call, but this time we use yield* , which yield by delegation .

What are we yielding then? Well, Array's have a built-in generator, Array.prototype[Symbol.iterator] . So at this point, the for loop is essentially directly stepping thru the generator provided by the Array. Since the array has 3 values, we see 3 logged values.

---

Watchful eyes

So we iterate thru numbers once using Array.prototype.map but then we iterate thru the intermediate array using the for loop? Seems like a waste doesn't it?

Let's look back at your original code though

function *generator() {
  let numbers = [1,2,3,4,5];
  numbers.map(n => yield (n + 1));
}

for (var n of generator()) {
  console.log(n);
}

Notice that your numbers.map call is pretty meaningless. Array.prototype.map creates a new array, but your generator doesn't do anything with it. So really you're just using map to iterate thru the numbers, not because you actually care about the returned value of map

---

Say what you mean, mean what you say

OK, so now we know we only really care about iterating thru the numbers. So we'll use iteration the way JavaScript knows best

 function* generator(numbers) { for (let x of numbers) yield x + 1 } for (let n of generator([1,2,3])) console.log(n); // 2 // 3 // 4 

Bingo. No tricky yield* . No double iteration. No nonsense.

Answer 2

It is because arrow functions are not generator functions. For example,

function temp() {
  yield 1;
}

Can we expect this to work? No. Because temp is not a generator function. The same is applicable to arrow functions as well.

---

FWIW, the usage of yield in an Arrow function is an early error as per the ECMAScript 2015 specification, as per this section ,

ArrowFunction : ArrowParameters => ConciseBody

• It is a Syntax Error if ArrowParameters Contains YieldExpression is true .

• It is a Syntax Error if ConciseBody Contains YieldExpression is true .

Answer 3

That's because the arrow function is not a generator. If I expand your arrow function, it would look something like:

function *generator() {      // <-- this is your generator function
  let numbers = [1,2,3,4,5];
  numbers.map(function(n){   // <-- this one isn't a generator
    yield (n + 1)            // <-- there's your yield
  }.bind(this));
}

Answer 4

[1,2,3,4,5].map(function*(v){yield v+1;}).reduce((accumulator, currentValue) => accumulator = [...accumulator].concat([...currentValue]))

explanation...

[1,2,3,4,5].map(function*(v){yield v+1;})

pack all values into generator resulting

(5) [Generator, Generator, Generator, Generator, Generator]

unpack into flat array

.reduce((accumulator, currentValue) => accumulator = [...accumulator].concat([...currentValue]))

(5) [2, 3, 4, 5, 6]

for normal use

[1,2,3,4,5].map(function*(v){yield v+1;}).forEach(v => console.log([...v][0]))

2

3

4

5

6

[...v][0] is a bit ugly but it is works.

Answer 5

Just discovered you can encounter this by accidentally closing your function too early.

ie one too many }