对于循环循环太多次

Question

I have some code:

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]);
}

Now, in the console if I type items I get:

So I expect the loop to go around once in this instance.

Here's my loop:

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]);
  }

Which gives:

I expected a result with array cart containing one item object not two. But it has two identical objects.

What's going on here?

Answer 1

You're first setting the ith element of the cart array as your object, then also pushing it onto the end; this will put two copies in, as you see.

Edit for question in comments:

Let's go through your code line by line:

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

After cart[i] = {} puts an empty object in the cart array at index i ; if there was something there before, it will be overwritten, otherwise the array will simply be added.

// stuff setting properties removed

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

Now, the object at cart[i] has received the attributes you constructed. The cart array now contains an object with these name, price, and brand attributes at position i .

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

Now, in addition to the reference at i , you've pushed a second reference to the object stored at i on to the end of the array. This will produce the behavior you are observing: the object will be in the array twice.

I would recommend changing cart[i] = {} (and the associated code that adds properties of this object) to construct the object while it is stored in a local variable, then push it on to the array at the end of the loop.

Answer 2

At line 3 of your code you create an empty object in your array:

cart[i] = {};

then at line 14 you push that object into your array again :

cart.push(cart[i]);

You should instead just create an object, and push it at the end:

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