javascript - 为什么这个 for 循环只打印一个元素？

Question

您能帮我解决我在 MDN 上发现的这个问题吗？

var list = document.querySelector('.output ul');
var totalBox = document.querySelector('.output p');
var total = 0;

list.innerHTML = '';
totalBox.textContent = '';

var products = [
  'Underpants:6.99',
  'Socks:5.99',
  'T-shirt:14.99',
  'Trousers:31.99',
  'Shoes:23.99'
];

for (var i = 0; i < products.length; i++) {
  var subArray = products[i].split(':');
  var name = subArray[0];
  var price = Number(subArray[1]);

  total += price;
  itemText = name + ' — $' + price;

  var listItem = document.createElement('li');

  listItem.textContent = itemText;
  list.appendChild(listItem);
}

totalBox.textContent = 'Total: $' + total.toFixed(2);

<div class="output">
  <ul></ul>
  <p></p>
</div>

我理解逻辑，但是当我在控制台上仅编写下面这部分代码时，它仅返回 "Socks:5.99":

var products = [
  'Underpants:6.99',
  'Socks:5.99',
  'T-shirt:14.99',
  'Trousers:31.99',
  'Shoes:23.99'
];

for (var i = 0; i < products.length; i++) {
  var subArray = products[i].split(':');
  var name = subArray[0];
  var price = Number(subArray[1]);
}

并且 subArray 仅包含该元素。看起来 for 循环不起作用。它不应该给我一个全新的数组吗:

Underpants — $6.99
Socks — $5.99
T-shirt — $14.99
Trousers — $31.99
Shoes — $23.99

Answer 1

您的代码可以工作，您只需将每个迭代结果存储在某个地方，例如新数组中。这是一个例子:

var products = [
  'Underpants:6.99',
  'Socks:5.99',
  'T-shirt:14.99',
  'Trousers:31.99',
  'Shoes:23.99'
];

var formattedProducts = [];

for (var i = 0; i < products.length; i++) {
  var subArray = products[i].split(':');
  var name = subArray[0];
  var price = Number(subArray[1]);
  formattedProducts.push(name + ' - $' + price);
}

console.log(formattedProducts);

编辑

在第一个代码示例中，结果直接存储在 DOM 中的 .output ul 列表元素内:

  var listItem = document.createElement('li');

  listItem.textContent = itemText;
  // list is defined outside the loop and will receive a new li element with the result of the iteration as textContent
  list.appendChild(listItem);