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

您正在反复更改相同的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 2

在循环中声明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 3

数组中没有四个对象副本：只有四个引用到同一个对象。那是因为你在循环中更新对象的属性但是当你做

时

HiLo.push(oHiLo)

发生的事情是你只是推动对数组中oHiLo引用的对象的引用。

您应该做的是每次都创建一个新对象。要么使用像这样的litteral

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

或更好，为oHiLo等对象定义构造函数，然后

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

无法填充Javascript对象数组

3 个答案: