javascript - For 循环循环次数过多

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] = {}(以及添加该对象属性的相关代码)以构造该对象，同时将其存储在局部变量中，然后将其推送到循环末尾的数组。