JavaScript数组循环实操报错，对照MDN示例无法定位问题求助

代码存在的问题 #

• 调用split(':')拆分每个产品字符串后得到的是长度为2的数组，如['Underpants', '6.99']，直接将整个数组传入Number()会得到NaN，需要单独取下标为1的元素（也就是价格字符串）做类型转换
• 额外嵌套的z循环完全多余，外层循环已经在遍历每一个产品，直接把单个产品的价格累加到全局的total变量即可；且total是数字类型不是数组，total[z]的写法属于类型误用，会直接报错
• 模板字符串语法错误，没有闭合${}标识，且拼接逻辑不符合输出要求：需要拆分产品名和价格，价格前补充$符号
• 拆分后直接用prices[i]取值属于逻辑错误，prices是当前单个产品拆分后的数组，长度只有2，i是外层遍历products的下标，很容易超出prices的下标范围

修正后完整代码 #

const list = document.querySelector('.output ul');
const totalBox = document.querySelector('.output p');
let total = 0;
list.innerHTML = '';
totalBox.textContent = '';
let products = ['Underpants:6.99',
                'Socks:5.99',
                'T-shirt:14.99',
                'Trousers:31.99',
                'Shoes:23.99'];
                
for (let i = 0; i < products.length; i++) {
  // 拆分单个产品的名称和价格
  let productItem = products[i].split(':');
  let productName = productItem[0];
  let productPrice = Number(productItem[1]);

  // 累加价格到总金额
  total += productPrice

  // 拼接符合要求的展示文本
  let itemText = `${productName} — $${productPrice}` ;

  const listItem = document.createElement('li');
  listItem.textContent = itemText;
  list.appendChild(listItem);
}

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

运行后即可输出要求的列表效果，总金额会正确计算为$83.95。

内容的提问来源于stack exchange，提问作者troubledcoder