javascript - 如何一次将一个项目添加(推送)到数组中(循环遍历数组)

Question

我无法解决这个奇怪的问题。 Link to Jsbin

我正在尝试使用点击函数将值添加到数组 (prices)。当用户单击按钮时，它会将定价数据添加到 Javscript 数组 prices。

我需要一次添加多个数据条目，其中包含价格但不同的 day。

这是我的#add_pricing 点击功能。

$("#add_pricing").click(function(e){
    e.preventDefault();
    data = {
        "price": "1200",
        "days": ["1","3","4"]
    }
    addData(data);
    console.log(prices)
});

因此，当用户单击它时，如您所见，它将 data 变量发送到 addData，即:

function addData(data)
{
    for (i = 0; i < data.days.length; i++){
        data.day = data.days[i]; //eg. data.day = "1"
        prices.push(data);

    }
}

因此 addData() 函数在 data.days 中循环，我希望它将一个条目推送到 prices 数组，但一次一个。

但是它似乎每次迭代都一次推送所有 4 个项目(您可以查看是否记录输出)

并且它没有正确设置我的天变量，天总是设置为 4，即使我记录输出，它似乎显示正确的。

预期输出:

[1] => {day: 1, price: 1200}
[2] => {day: 3, price: 1200}
[3] => {day: 3, price: 1200}

实际输出

[1] => {day: 4, price: 1200}
[2] => {day: 4, price: 1200}
[3] => {day: 4, price: 1200}

Answer 1

您只是在一遍又一遍地修改data 的day 属性。 data 对象永远不会重新创建。

你是故意的吗？

function addData(data)
{
    for (i = 0; i < data.days.length; i++){
        data.day = data.days[i]; //eg. data.day = "1"
        prices.push(data.day); // push data.day?

    }
}

如果你真的想克隆对象，你可以使用JQuery's extend这样做。或者，如果您在节点中，则 extend模块做同样的事情。

function addData(data)
{
    for (i = 0; i < data.days.length; i++){
        var newData = $.extend({}, data);
        newData.day = data.days[i]; //eg. data.day = "1"
        prices.push(newData);

    }
}

如果您的真实代码中的对象与您在问题中使用的对象一样简单，那么创建一个新对象可能会更容易:

function addData(data)
{
    for (i = 0; i < data.days.length; i++){
        prices.push({
          price: data.price,
          day: data.days[i]
        });
    }
}