带有for循环的Javascript数组，仅返回最后一个元素答案

【问题标题】：Javascript array with for loop, returns only last element带有for循环的Javascript数组，仅返回最后一个元素
【发布时间】：2017-01-16 11:39:13
【问题描述】：

我有一个for 循环，它将数据添加到array。但是当我console.log 数组时，它充满了for 循环的最后一项！

这是我的代码：

var materialsData = results[1].data, // results[1].data is a http.get return
ln = Object.size(materialsData),
materials = [],
material = {};
material['Product'] = {};

for (var i = 0; i < ln; i++) {
    material.Product['Name'] = materialsData[i].Product.Name;
    material.Product['Id'] = materialsData[i].Product.Id;
    material.StartingDate = materialsData[i].StartingDate.replace("T00:00:00", "").split('-').reverse().join('-');
    material.Device = materialsData[i].Device;
    materials.push(material);
}

【问题讨论】：

您在哪里以及如何定义变量material？
对象通过引用传递。所以每次迭代，你都会覆盖相同的变量

标签： javascript arrays loops

【解决方案1】：

在for 块中定义material。当对象通过引用传递时，相同的object 被更新并推送到数组中。

for (var i = 0; i < ln; i++) {
    var material = {
        Product : {
            Name : materialsData[i].Product.Name,
            Id : materialsData[i].Product.Id,
        },
        StartingDate : materialsData[i].StartingDate.replace("T00:00:00", "").split('-').reverse().join('-'),
        Device : materialsData[i].Device
    };
    materials.push(material);
}

另外，您可以使用Array.map()

var materials = materialsData.map(function(m){
    return {
        Product : {
            Name : m.Product.Name,
            Id : m.Product.Id,
        },
        StartingDate : m.StartingDate.replace("T00:00:00", "").split('-').reverse().join('-'),
        Device : m.Device
    };
})

【讨论】：

【解决方案2】：

您一次又一次地更新和推送相同的对象引用，以便该对象保存最后一个元素值。相反，在 for 循环开头初始化对象保存变量。

for(var i=0; i<ln; i++){
  // initialize the object
  var material = { Product : {}, Id : {}};

  material.Product['Name'] = materialsData[i].Product.Name;
  material.Product['Id'] = materialsData[i].Product.Id;
  material.StartingDate = materialsData[i].StartingDate.replace("T00:00:00", "").split('-').reverse().join('-');
  material.Device = materialsData[i].Device;
  materials.push(material);
}

或者直接将对象定义为push方法的参数，不持有任何变量。

for (var i = 0; i < ln; i++) {
  materials.push({
    Product: {
      Name: materialsData[i].Product.Name,
      Id: materialsData[i].Product.Id,
    },
    StartingDate: materialsData[i].StartingDate.replace("T00:00:00", "").split('-').reverse().join('-'),
    Device: materialsData[i].Device
  })
}

【讨论】：

【解决方案3】：

您确实引用了同一个对象。对我来说，诀窍是将有问题的对象包裹在 JSON.stringify() 周围，然后在循环中我在结果字符串上调用 JSON.parse() 以将其转回

var materialsDataString = JSON.stringify(results[1].data), // results[1].data is a http.get return
ln = Object.size(materialsData),
materials = [],
material = {};
material['Product'] = {};

for (var i = 0; i < ln; i++) {
    var materialsData = JSON.parse(materialsDataString)
    material.Product['Name'] = materialsData[i].Product.Name;
    material.Product['Id'] = materialsData[i].Product.Id;
    material.StartingDate = materialsData[i].StartingDate.replace("T00:00:00", "").split('-').reverse().join('-');
    material.Device = materialsData[i].Device;
    materials.push(material);
}

【讨论】：