javascript for 循环对象修改，数组插入

Question

why it's not adding 1,2,3,4

var arr = [];
var obb = {view: [], add: []};
for(var i = 0; i < 5;i++) {
    obb.view = i;
    obb.add = i;
    arr.push(obb); 
}

Instead every obb value is the very last one, why and what can i do about it?

Answer 1

You are declaring arrays inside your object which doesn't make any sense since you have an approach of assigning only one integer inside one array and then in the other same reference object you are again adding only one number to it and so on...

Here is a working example with you approach:

var arr = [];
var obb = 
{
    view: [],
    add: []
};
for (var i = 0; i < 5; i++) {
    obb.view = i;
    obb.add= i;
    arr.push(obb);
    alert(arr[i].view);
    alert(arr[i].add);
}

However this is the same thing (using object literal again) but without arrays since you don't need them:

var obb = 
{
    view:0,
    add:0
};

The rest of the code stays the same.

The best thing would to to populate the array which is inside the object and then call the object array by index:

var obb = 
{
    view: [],
    add: []
};
for (var i = 0; i < 5; i++) {
    obb.view[i] = i;
}

alert(obb.view[index]);

Last example:

for (var i = 0; i < 5; i++) {
    obb.view[i] = i;
    arr.push(obb);
    alert(arr[i].view);
}

I think this example is good for learning because it demonstrates the behaviour of objects. The array inside the object is being populated after every iteration and the same object is pushed inside another array as well. Since we are dealing with the same object you can see that if you call the object (depending on the index) you will see that values are being accumulated. For example arr[4].view will output :0,1,2,3,4 because of the same object but with values which were added in the array in every iteration.