const val of foo()是什么意思？

Question

https://developer.mozilla.org...

generator文档的例子，有一个代码看不懂是什么ISIS

const foo = function* () {
  yield 'a';
  yield 'b';
  yield 'c';
};

let str = '';
// 下面这句
for (const val of foo()) {
  str = str + val;
}

console.log(str);

Answer 1

for...of

以下来自google

无论是 for...in 还是 for...of 语句都是迭代一些东西。 它们之间的主要区别在于它们的迭代方式。 for...in 语句以任意顺序迭代对象的可枚举属性。 for...of 语句遍历可迭代对象定义要迭代的数据。

Answer 2

函数foo是一个生成器函数, 执行后默认返一个生成器实例, Generator {}, yield 关键字使生成器函数执行暂停，yield 关键字后面的表达式的值返回给生成器的调用者。它可以被认为是一个基于生成器的版本的 return 关键字。, 使用for...of进行迭代就相当于循环的调用函数foo并得到yield的返回值val, 然后拼接字符串
具体可一个看一下阮一峰写的ES教程:
https://es6.ruanyifeng.com/#d...

Answer 3

1. 首先明白 Iterator 迭代器对象，以及迭代器对象的迭代原理。
2. 依据问题 foo 函数是一个 生成器函数（解决异步中断问题），函数调用之后，函数不会立即执行，自然产生类似普通函数的返回结果。到一个生成器对象 {[[GeneratorState]]: 'suspended'}。
3. 生成器对象 上有内置属性 [[Prototype]].[[Prototype]] 具有 next/return/throw 等方法，手动调用 next 方法可以访问 yield 语句后面的值。即 g.next().value。
4. for-of 语法是 es5+ 语法，它可以自动迭代生成器对象(调用 next 方法)，获取 yeild 后面的值。
5. 根据 for-of 与 生成器函数 的特点，最后的结果是 'abc'。