ES6生成器中yield关键字工作原理及首个push被忽略原因解析

这是个非常典型的生成器入门误区，核心是没搞清楚next()和yield的执行顺序——第一次调用next()的参数会被直接忽略，因为此时生成器还没遇到任何一个可以接收返回值的yield表达式。

我们一步步拆解你的代码执行过程：

1. 创建生成器迭代器：
   调用const iterator = createNames()时，生成器函数并没有立即执行，只是生成了一个迭代器对象，代码停在函数开头等待启动。

2. 第一次iterator.next('Brian')：
   这一步是启动生成器，代码会从函数开头执行，直到遇到第一个yield就暂停。注意：此时传递的'Brian'没有对应的yield来接收它——因为第一个yield是我们遇到的第一个暂停点，它还没机会返回任何值给代码。此时生成器停在people.push(yield)的yield位置，还没执行push操作。

3. 第二次iterator.next('Paul')：
   这一步才是真正给上一个yield传值：生成器从暂停的位置继续执行，第一个yield会返回你传递的'Paul'，然后执行people.push('Paul')，接着代码继续走到第二个yield，再次暂停。

4. 第三次iterator.next('John')：
   同理，第二个yield返回'John'，执行people.push('John')，然后走到第三个yield暂停。

5. 第四次iterator.next()：
   第三个yield返回undefined（因为你没传参数），执行people.push(undefined)，接着代码执行到return people，此时迭代器的value就是这个数组，也就是["Paul", "John", undefined]。

如果想要得到['Brian', 'Paul', 'John']，你需要调整调用方式：

const iterator = createNames();
iterator.next(); // 先启动生成器，不传参数
iterator.next('Brian'); // 第一个yield接收Brian
iterator.next('Paul'); // 第二个yield接收Paul
iterator.next('John'); // 第三个yield接收John，此时return返回数组

这样执行后，第四次next()的返回值就是["Brian", "Paul", "John"]了。

内容的提问来源于stack exchange，提问作者Bruno Mazza