JavaScript中如何正确访问对象数组属性？循环求和代码报错

你的代码存在几个逻辑错误，导致无法正确计算总费用，下面逐一说明并给出修正方案：

原代码中的错误点 #

• 数组遍历方式错误：list是数组类型，Object.keys(list)返回的是数组的索引字符串（比如"0"），你把索引值当成数组元素去访问.items属性，这完全不符合逻辑——索引字符串根本没有items属性。
• for...in遍历数组误用：即便拿到了正确的分类对象，for (i in k.items)中的i是数组的索引（字符串类型），并非数组里的子项对象，而且子项中不存在data属性，你需要访问的是cost属性。
• 未声明变量：i没有用let/const声明，会成为全局变量，容易引发意外问题。

修正后的代码（forEach版本） #

const list = [
      {
        title: 'Groceries',
        items: [
          {
            id: 4,
            title: 'Food',
            cost: 540 ,
          },
          {
            id: 5,
            title: 'Hygiene',
            cost: 235,
          },
          {
            id: 6,
            title: 'Other',
            cost: 20,
          },
        ],
      }];

function calculateCost(){
  let total = 0;
  // 遍历list中的每个分类对象
  list.forEach((category) => {
    // 遍历当前分类下的所有子项
    category.items.forEach((item) => {
      total += item.cost;
    });
  });
  console.log(total); // 输出795
  return total;
}

更简洁的reduce版本 #

如果想让代码更紧凑，可以使用数组的reduce方法嵌套计算：

function calculateCost(){
  return list.reduce((total, category) => {
    // 累加当前分类下所有子项的cost
    return total + category.items.reduce((sum, item) => sum + item.cost, 0);
  }, 0);
}

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