array.push似乎替换了先前的对象，而不是附加

Question

I want to collect coordinates for rectangles I'm drawing across canvas area. When I push the next set of coords into my array, each of the previous entries in the array become the new set, rather than remaining as their original coords.

I'm a one-week veteran of javascript so I'm pretty sure this is a newbie question. I'm replacing a small Excel VBA I wrote to demo an algebra concept for my students because not every student has Excel on their computer, and the online version of Excel doesn't run VBA macros. I want a stand-alone app they can download and run offline. I have no problem drawing the rectangles. I want arr(ndx) to contain the coordinates of the ndx-th rectangle. Ultimately if a student selects a set of rectangles I will change the background color of that set. My console output shows that on the ndx-th iteration, all the arr entries from 0 to ndx contain the same set of coordinates, the last one that was captured. To me it looks like arr.push is over-writing each previous entry with the current one, rather than appending them to the array. What am I missing? I've gutted my code just to illustrate the problem I'm having. Included console.log code for last part of output block.

var arr = [];  var ndx = 0;   //array to contain rectangle coords  

Rows = 2; Cols = 3;           //Actual 40 X 60 or so.  
for (j=0; j<Rows;j++) {  
    for (i=0; i<Cols; i++) {  
        obj.row = j; obj.col = i;
        obj.xpos = obj.xpos + obj.xpos * j;     
        obj.ypos = obj.ypos + obj.ypos * i;  

        // will actually use fillRect() here to draw  
        //grid of rectangles spread across screen.  This works.  

        arr.push({obj});    // capture rect's coords for later reference  

        watchit0 = Object.entries(arr[ndx].obj);    //for debugging  
        if (ndx > 0) {  
            watchit1 = Object.entries(arr[ndx - 1].obj); }  
        else {  
            watchit1 = "                          ";  
        }  

        watchit2 = Object.keys(arr);    
        console.log("obj: " + Object.entries(obj)  
+ "     arr: " + watchit0 + "    arr-1: "  
+ watchit1 + "    keys: " + watchit2);

        ndx++;  
    }  
}  

//everything below is for debugging  
console.log("  ");  

watchit00 = Object.entries(arr[0].obj);  
watchit01 = Object.entries(arr[1].obj);  
watchit02 = Object.entries(arr[2].obj);  
watchit03 = Object.entries(arr[3].obj);  
watchit04 = Object.entries(arr[4].obj);  
watchit05 = Object.entries(arr[5].obj);  

console.log("     0: " + watchit00 + "     1:  " + watchit01);  
console.log("     2: " + watchit02 + "     3:  " + watchit03);  
console.log("     4: " + watchit04 + "     5:  " + watchit05);

console.log output (reformatted):

obj: row,0,col,0,xpos,1,ypos,10       
arr: row,0,col,0,xpos,1,ypos,10       arr-1:                                                       keys: 0

obj: row,0,col,1,xpos,1,ypos,20       
arr: row,0,col,1,xpos,1,ypos,20       arr-1: row,0,col,1,xpos,1,ypos,20       keys: 0,1

obj: row,0,col,2,xpos,1,ypos,60       
arr: row,0,col,2,xpos,1,ypos,60       arr-1: row,0,col,2,xpos,1,ypos,60       keys: 0,1,2

obj: row,1,col,0,xpos,2,ypos,60       
arr: row,1,col,0,xpos,2,ypos,60       arr-1: row,1,col,0,xpos,2,ypos,60       keys: 0,1,2,3

obj: row,1,col,1,xpos,4,ypos,120     
arr: row,1,col,1,xpos,4,ypos,120     arr-1: row,1,col,1,xpos,4,ypos,120    keys: 0,1,2,3,4

obj: row,1,col,2,xpos,8,ypos,360     
arr: row,1,col,2,xpos,8,ypos,360     arr-1: row,1,col,2,xpos,8,ypos,360    keys: 0,1,2,3,4,5

What's below is output arr[ndx] at the end of my code. I'm expecting the 6 entries to match obj: above but every entry is the last iteration. Why??

0:  row,1,col,2,xpos,8,ypos,360     
1:  row,1,col,2,xpos,8,ypos,360     
2:  row,1,col,2,xpos,8,ypos,360     
3:  row,1,col,2,xpos,8,ypos,360   
4:  row,1,col,2,xpos,8,ypos,360     
5:  row,1,col,2,xpos,8,ypos,360

Answer 1

Here Steve. The first code shows a simplified version of where you are going wrong. NOTE: if you were to do a test, each object in the Array would be the same object.

The second shot at the code shows using Object.create on our object function to get a new instance.

Hope this helps.

 let sampleArrValues = [1,2,3,4,5]; function myObject(num) { this.number = num; } console.log('Bad Array Demo'); // This wont work let badArray = []; var obj = new myObject(1); sampleArrValues.forEach(num => { obj.number = num; badArray.push(obj); }); // Lets look at the array content badArray.forEach(item => { console.log(item.number); }); // -> 5,5,5,5,5 console.log('Good Array Demo'); // Now do properly var goodArray = []; sampleArrValues.forEach(num => { obj = Object.create(myObject); obj.number = num; goodArray.push(obj); }); goodArray.forEach(item => { console.log(item.number); }); // -> 1,2,3,4,5 

Answer 2

Here is another attempt on the answers you already got:

• first part of the snippet shows what you have, but usually you do not want: a single object is stored in the obj1 variable at the beginning, and it gets push -ed into arr1 after setting x to a different value. The log lines in the console show that the push itself happens properly (the array grows), but as the same object is stored multiple times, the growing amount of content all shows the last value set via obj1.x
• second part of the snippet shows what you should do: it is very similar, but it initializes obj2 with a whole new object in each iteration, and thus not only the number of elements in the array grows, but they are also referring different objects with different content.

 var obj1={x:1, toString:function(){return this.x;}}; var arr1=[]; for(var i=0;i<5;i++){ obj1.x=i; arr1.push(obj1); console.log(arr1.join()); } console.log("---"); var arr2=[]; for(var i=0;i<5;i++){ var obj2={x:i, toString:function(){return this.x;}}; arr2.push(obj2); console.log(arr2.join()); } 

Side note: in the original code, arr.push({obj}); is used, which does create a new object (it is a shorthand for arr.push({obj:obj}); ), the obj field of the newly created object always refer to the same, single object you have stored in obj somewhere at the beginning.