请教扩展运算符和for...of在遍历generator函数时的输出顺序为什么不一致？

Question

先上代码：

function* numbers () {
  yield 1
  yield 2
  console.log('hint')
  return 3
  yield 4
}

console.log([...numbers()]) 
// 输出 
// hint
// [ 1, 2 ]

for (let n of numbers()) {
  console.log(n)
}
// 输出
// 1
// 2
// hint

这是我在学习阮老师的es6的“Generator 函数的语法”这一章时发现扩展运算符...在遍历有输出或有return返回时的generator函数时的输出顺序跟我的预想不一样，而for...of则比较符合直觉。
按阮老师的说法“for...of循环、扩展运算符（...）、解构赋值和Array.from方法内部调用的都是遍历器接口”，那输出顺序应该是一致的呀？
请有心人帮忙解释。

Answer 1

console.log([...numbers()])
等同于

let a = [];
for (let n of numbers()) {
  a.push(n);
}
console.log(a);

明白没？

Answer 2

额,第一个输出和第二个输出的不是同一种东西,第一个输出的是扩展运算符转换之后的数组,而第二个则是输出每次调用Generator之后返回的值,如果要跟第一个等价的话,应该是下面这段代码.

var arr=[]
for (let n of numbers()) {
  arr.push(n)
}
console.log(arr)