麻烦填充对象的Javascript数组

Question

我想在Javascript中填充对象数组。如果我在将数组推入数组后立即检查数组项，它看起来不错。但是，如果在填充数组后尝试使用数组的元素，整个数组似乎会填充我推送的最后一个对象的副本。 Chrome和Firefox都有同样的问题。我附上了演示此问题的简化版代码。任何指导将不胜感激。

<script type="text/javascript"> 
    var JSONHLDat=[ 
    [ 
    "2", 
    "1", 
    "72.2", 
    "52.1" 
    ], 
    [ 
    "2", 
    "2", 
    "72.2", 
    "52.2" 
    ], 
    [ 
    "2", 
    "3", 
    "72.3", 
    "52.4" 
    ], 
    [ 
    "2", 
    "4", 
    "72.4", 
    "52.5" 
    ] 
    ];//data to be added to array 
    var oHiLo ={ 
    oMonth: 0, 
    oDay: 0, 
    oHi: 0, 
    oLo: 0 
    };//oHiLo is the object 

    var HiLo=[];//HiLo is the array to contain multiple oHiLo objects 
    for (var j in JSONHLDat) 
    { 
     oHiLo.oMonth = JSONHLDat[j][0]; 
     oHiLo.oDay = JSONHLDat[j][1]; 
     oHiLo.oHi = JSONHLDat[j][2]; 
     oHiLo.oLo = JSONHLDat[j][3]; 
     console.log("oHiLo=", oHiLo);// here I display the object, it looks good. 
     var ndx = HiLo.push(oHiLo); 
     console.log("ndx=", ndx, " HiLo[(ndx-1)] = ", HiLo[(ndx - 1)]);//here I display the object in HiLo. It looks good. 
    } 
    for (var k=0;k<4;k++) 
    { 
     console.log("k=", k, " HiLo[k] = ", HiLo[k]);// This appears to show that the array is populated with four copies of the last element pushed. 
    } 
</script> 

Answer 1

在循环声明var oHiLo={oMonth:0,oDay:0,oHi:0,oLo:0};//oHiLo is the object：

<script type="text/javascript"> 
var JSONHLDat=[["2","1","72.2","52.1"],["2","2","72.2","52.2"],["2","3","72.3","52.4"],["2","4","72.4","52.5"]];//data to be added to array 
var HiLo=[];//HiLo is the array to contain multiple oHiLo objects 
for (var j in JSONHLDat) 
{ 
     var oHiLo={oMonth:0,oDay:0,oHi:0,oLo:0};//oHiLo is the object 
     oHiLo.oMonth=JSONHLDat[j][0]; 
     oHiLo.oDay=JSONHLDat[j][1]; 
     oHiLo.oHi=JSONHLDat[j][2]; 
     oHiLo.oLo=JSONHLDat[j][3]; 
     var ndx=HiLo.push(oHiLo); 
} 
console.log(HiLo); 
for (var k=0;k<4;k++) 
{ 
     console.log("k=",k," HiLo[k]=",HiLo[k]);// This appears to show that the array is populated with four copies of the last element pushed. 
} 
</script> 

Answer 2

你一遍又一遍的改变同样oHiLo对象。

尝试以下操作（注意oHilo定义的周期内移动 - 这将创造在每个周期中一个新的对象）：

<script type="text/javascript"> 
var JSONHLDat=[["2","1","72.2","52.1"],["2","2","72.2","52.2"],["2","3","72.3","52.4"],["2","4","72.4","52.5"]];//data to be added to array 
var HiLo=[];//HiLo is the array to contain multiple oHiLo objects 
for (var j in JSONHLDat) 
{ 
    var oHiLo = {oMonth:0,oDay:0,oHi:0,oLo:0};//oHiLo is the object 
    oHiLo.oMonth=JSONHLDat[j][0]; 
    oHiLo.oDay=JSONHLDat[j][1]; 
    oHiLo.oHi=JSONHLDat[j][2]; 
    oHiLo.oLo=JSONHLDat[j][3]; 
    console.log("oHiLo=",oHiLo);// here I display the object, it looks good. 
    var ndx=HiLo.push(oHiLo); 
    console.log("ndx=",ndx," HiLo[(ndx-1)]=",HiLo[(ndx-1)]);//here I display the object in HiLo. It looks good. 
} 
for (var k=0;k<4;k++) 
{ 
    console.log("k=",k," HiLo[k]=",HiLo[k]);// This appears to show that the array is populated with four copies of the last element pushed. 
} 
</script> 

您还可以使用地图功能：

<script type="text/javascript"> 
var JSONHLDat=[["2","1","72.2","52.1"],["2","2","72.2","52.2"],["2","3","72.3","52.4"],["2","4","72.4","52.5"]];//data to be added to array 

var HiLo = JSONHLDat.map(function($data){ 
    return { 
     oMonth: $data[0], 
     oDay: $data[1], 
     oHi: $data[2], 
     oLo: $data[3] 
    } 
}); 

for (var k=0;k<4;k++) 
{ 
    console.log("k=",k," HiLo[k]=",HiLo[k]);// This appears to show that the array is populated with four copies of the last element pushed. 
} 
</script> 

Answer 3

阵列中没有对象的四个副本：只有四个引用到相同对象。这是因为你在你的循环更新对象的属性，但是当你做

HiLo.push(oHiLo) 

发生的事情是，你只是推到已经oHiLo数组中引用的对象的引用。

你应该做的是每次创建一个新的对象。无论是使用这样

HiLo.push({oMonth: JSONHLDat[j][0], oDay: JSONHLDat[j][1] … 

或更好的litteral，定义构造像oHiLo对象，然后

HiLo.push(new oHiLo(JSONHLDat[j]))