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

修改

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

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

为什么此for循环仅打印一个元素？

1 个答案: