javascript - 如何理解javascript生成器？

Question

我有一段代码

function* dataConsumer() {
   console.log('Started');
   console.log(`1. ${yield}`);
   console.log(`2. ${yield}`);
   return 'result';
}

let genObj = dataConsumer();
genObj.next();

运行结果为

Started

我不明白为什么第二个console.log不能输出任何东西。感谢您的帮助。

Answer 1

生成器构建在迭代器之上。要理解生成器，首先需要理解迭代器。查看Documentation .

对于单流，它运行到更近的 yield 并终止函数调用。在它之后，当您再次调用 next 时，它将从它终止的地方继续并再次工作，直到最近的 yield 并且当没有 yields 或它到达 return 语句，它刚刚结束它的调用。

function* dataConsumer() {
  console.log('Started');
  console.log(`1. ${yield}`); // First `next` terminates before yield. Second `next` passes the value and terminates before the next yield.
  console.log(`2. ${yield}`); // Third call continues from the `yield` part and finishes the function, because we have returned
  return 'result';
}

let genObj = dataConsumer();
genObj.next();
genObj.next('yield1'); 
genObj.next('yield2'); 

您还可以将参数传递给next 函数，该函数将放在yield 语句中。此外，next 函数返回一个关于生成器状态的对象，该对象具有属性 value 和 done。如果函数调用未完成，它会将 done 返回为 false，最后您可以看到它已设置为 true。

function* dataConsumer() {
  console.log('Started');
  const x = yield; 
  console.log(`1. ${x}`);
  console.log(`2. ${yield}`); 
  return 'result';
}

let genObj = dataConsumer();
let result = genObj.next();
console.log(result);

result = genObj.next('x is yield1'); 
console.log(result);

result = genObj.next('yield2'); 
console.log(result);

genObj.next(); // This one has nothing to do

由于您可以在每一步将参数传递给生成器，因此您也可以从 .您需要编写类似于 return something 的内容，只需将 return 替换为 yield。

function* dataConsumer() {
  yield 1;
  yield 2;
  yield 3;
}

let genObj = dataConsumer();
let result = genObj.next();
console.log(result);

result = genObj.next(); 
console.log(result);

result = genObj.next(); 
console.log(result);

result = genObj.next(); 
console.log(result);