对于循环循环太多次

Question

我有一些代码：

var cart = [];
var items = [];
var cart_node = document.querySelectorAll('#tblItineraryModuleStayDetail > tbody > tr');
var cart_as_array = Array.prototype.slice.call(cart_node, 2); // start at item 3 (2)
for(var i=0;i<cart_as_array.length;i+=2) {
    items.push(cart_as_array[i]);
}

现在，在控制台中，如果我输入项目，我会得到：

所以我希望在这个例子中循环一次。

这是我的循环：

for(i=0; i < items.length; i++) {
    // set vars
    cart[i] = {};
    var name = items[i].querySelector('.txtStayRoomDescription').textContent;
    var price = items[i].querySelector('.tblItinPriceSummary tr td:last-child').textContent;
    var brand = items[i].querySelector('.txtStayRoomLocation').textContent;

    // add to object
    cart[i].name = name;
    cart[i].price = price;
    cart[i].brand = brand;

    // add to cart array
    cart.push(cart[i]);
  }

给出了：

我预计数组购物车的结果包含一个项目对象而不是两个。但它有两个相同的对象。

这里发生了什么？

Answer 1

您首先将cart数组的第i个元素设置为您的对象，然后将其推到最后;如你所见，这将放入两份副本。

在评论中修改问题：

让我们逐行完成您的代码：

for(i=0; i < items.length; i++) {
    // set vars
    cart[i] = {};

cart[i] = {}将cart数组中的空对象放在索引i处;如果之前有某些东西，它将被覆盖，否则只会添加数组。

// stuff setting properties removed

// add to object
cart[i].name = name;
cart[i].price = price;
cart[i].brand = brand;

现在，cart[i]处的对象已收到您构建的属性。 cart数组现在包含一个在i位置具有这些名称，价格和品牌属性的对象。

// add to cart array
cart.push(cart[i]);

现在，除了i处的引用之外，您已将对i存储的对象的第二个引用推送到数组的末尾。这将产生您正在观察的行为：对象将在数组中两次。

我建议更改cart[i] = {}（以及添加此对象属性的相关代码）来构造对象，同时将其存储在局部变量中，然后在循环结束时将其推送到数组

Answer 2

在代码的第3行，您将在数组中创建一个空对象：

cart[i] = {};

然后在第14行，您将该对象再次推送到数组 ：

cart.push(cart[i]);

您应该只创建一个对象，并在最后推送它：

var item = {};
// ... add properties to item ...
cart.push(item)