为什么在 javascript 生成器中产生突变的 object 会在转换为数组时导致不同的行为？

Question

I have a generator function foo written in JavaScript.

function* foo() {
    const bar = { a: 0, b: 0 };
    yield bar;

    bar.a += 1;
    yield bar;

    bar.b += 10;
    yield bar;
}

The function foo takes no parameter but keeps an internal object bar that is used for yielding. The function can yield 3 times, each time returning a different value.

The expected behavior is observed when calling next().value on the resulting object.

const baz = foo()
console.log(baz.next().value)   // => { a: 0, b: 0 }
console.log(baz.next().value)   // => { a: 1, b: 0 }
console.log(baz.next().value)   // => { a: 1, b: 10 } 

However, when using the Array.from method to create an array from the resulting iterator, a strange behavior is observed instead.

console.log(Array.from(foo()))  // => [ { a: 1, b: 10 }, { a: 1, b: 10 }, { a: 1, b: 10 } ]

The final object is returned for every yield instead of return the value each time yield was called. This behavior happens in both node 10.13 and node 12.7? Why is this happening? Shouldn't the results be the same for both cases?

Answer 1

Since in javascript objects are passed by reference you are modifying the same object after each yield and in the end you have an array with 3 references to the same object in memory in its final state.

To get an array with different objects you would have to create new objects on each yield, for example using object spread syntax.

 function* foo() { let bar = { a: 0, b: 0 }; yield bar; bar = {...bar, a: bar.a + 1} yield bar; bar = {...bar, b: bar.b + 10} yield bar; } const baz = foo() console.log([...baz])