Javascript：在循环中，修改对象的属性，然后推送到数组

Question

I have the following code (which works correctly):

var arr = [];
for(var i = 0; i < 2; i++) {
    var obj = { a: 'A'};
    obj.c = 'C' + i;
    arr.push(obj);
}

// now arr is:
// [ {a: 'A', 'c': 'C0'}, {a: 'A', 'c': 'C1'} ]

To improve the performance of my code, I placed the obj outside the loop, then adding/modifying the new property only, like this:

var arr = [];
var obj = { a: 'A'};
for(var i = 0; i < 2; i++) {
    obj.c = 'C' + i;
    arr.push(obj);
}

// now arr is:
// [ {a: 'A', 'c': 'C1'}, {a: 'A', 'c': 'C1'} ]

Why both objects got C1 ? Please explain what I'm doing wrong, and how to place the object out of the loop and get correct results?

Note : I know this is a simple problem where performance is not an issue, but I'm actually dealing with big number of objects in reality where performance matters.

Answer 1

You are pushing the object ( not a copy of the object) to the array, and then changing it.

If you want different objects in each index, then you need to create a new object each time you go around the loop.

Answer 2

Like the others wrote, you are changing the same object (the original) all the time which ends in the results being the same (the original).

To place the object out of the loop and still get the correct result, you would still have to 'copy' it inside of the loop:

var arr = [];
var obj = { a: 'A'};
var objstring = JSON.stringify(obj);
for(var i = 0; i < 2; i++) {
    var obj = JSON.parse(objstring);
    obj.c = 'C' + i;
    arr.push(obj);
}