如何在JavaScript中遍历JSON结构获取价格数据并计算用户总价

我有如下JSON数据：

var shoppingJson = [{ "user001": [ { "productId": "123", "name": "Product 123", "price": 14.23 }, { "productId": "456", "name": "Product 456", "price": 4.56 }, { "productId": "789", "name": "Product 789", "price": 72.89 } ]},{ "user002": [ { "productId": "321", "name": "Product 321", "price": 3.21 }, { "productId": "654", "name": "Product 654", "price": 61.54 }, { "productId": "987", "name": "Product 987", "price": 59.87 } ]},{ "user003": [ { "productId": "777", "name": "Product 888", "price": 4.213 }, { "productId": "888", "name": "Product 999", "price": 6.24 }, { "productId": "999", "name": "Product 111", "price": 9.71 } ]} ]

我的需求是计算每个用户的价格总和（例如user001的总和为91.68），但目前只能通过硬编码用户名（如user001）访问数据，例如使用console.log(shoppingJson[0].user001[0].price)，希望通过类似shoppingJson[i][j]的循环方式动态访问，而非指定具体用户名，请问该如何实现？

核心思路 #

你的数据结构里，数组的每个元素都是仅包含一个用户键的对象，所以关键是先动态获取每个对象的用户ID（也就是对象的键），再遍历该用户对应的商品数组计算总价。下面给你几种实用的实现方式：

方式1：用forEach+reduce实现（简洁高效） #

这种方式利用数组的高阶函数，代码更简洁，适合现代JS开发：

var shoppingJson = [{ "user001": [ { "productId": "123", "name": "Product 123", "price": 14.23 }, { "productId": "456", "name": "Product 456", "price": 4.56 }, { "productId": "789", "name": "Product 789", "price": 72.89 } ]},{ "user002": [ { "productId": "321", "name": "Product 321", "price": 3.21 }, { "productId": "654", "name": "Product 654", "price": 61.54 }, { "productId": "987", "name": "Product 987", "price": 59.87 } ]},{ "user003": [ { "productId": "777", "name": "Product 888", "price": 4.213 }, { "productId": "888", "name": "Product 999", "price": 6.24 }, { "productId": "999", "name": "Product 111", "price": 9.71 } ]} ];

// 遍历每个用户对象
shoppingJson.forEach(userObj => {
  // 动态获取用户名（因为每个对象只有一个键，取第一个即可）
  const userId = Object.keys(userObj)[0];
  // 获取当前用户的所有商品
  const products = userObj[userId];
  // 用reduce累加价格，toFixed(2)处理小数精度问题
  const totalPrice = products.reduce((sum, product) => sum + product.price, 0).toFixed(2);
  
  console.log(`用户 ${userId} 的总价：${totalPrice}`);
});

输出结果：

用户 user001 的总价：91.68
用户 user002 的总价：124.62
用户 user003 的总价：20.16

方式2：传统for循环实现（符合你想要的shoppingJson[i][j]风格） #

如果你更习惯用传统的循环写法，这种方式完全匹配你想要的动态索引访问：

var shoppingJson = [{ "user001": [ { "productId": "123", "name": "Product 123", "price": 14.23 }, { "productId": "456", "name": "Product 456", "price": 4.56 }, { "productId": "789", "name": "Product 789", "price": 72.89 } ]},{ "user002": [ { "productId": "321", "name": "Product 321", "price": 3.21 }, { "productId": "654", "name": "Product 654", "price": 61.54 }, { "productId": "987", "name": "Product 987", "price": 59.87 } ]},{ "user003": [ { "productId": "777", "name": "Product 888", "price": 4.213 }, { "productId": "888", "name": "Product 999", "price": 6.24 }, { "productId": "999", "name": "Product 111", "price": 9.71 } ]} ];

// 外层循环遍历每个用户对象（对应shoppingJson[i]）
for (let i = 0; i < shoppingJson.length; i++) {
  const userObj = shoppingJson[i];
  // 获取当前对象的用户名
  const userId = Object.keys(userObj)[0];
  const products = userObj[userId];
  
  let totalPrice = 0;
  // 内层循环遍历每个商品（对应products[j]）
  for (let j = 0; j < products.length; j++) {
    totalPrice += products[j].price;
  }
  
  // 保留两位小数输出
  console.log(`用户 ${userId} 的总价：${totalPrice.toFixed(2)}`);
}

方式3：鲁棒性更强的for...in循环（适配未来数据结构变化） #

如果未来你的数据结构可能出现一个对象包含多个用户的情况，用for...in遍历对象的所有键会更灵活：

var shoppingJson = [{ "user001": [ { "productId": "123", "name": "Product 123", "price": 14.23 }, { "productId": "456", "name": "Product 456", "price": 4.56 }, { "productId": "789", "name": "Product 789", "price": 72.89 } ]},{ "user002": [ { "productId": "321", "name": "Product 321", "price": 3.21 }, { "productId": "654", "name": "Product 654", "price": 61.54 }, { "productId": "987", "name": "Product 987", "price": 59.87 } ]},{ "user003": [ { "productId": "777", "name": "Product 888", "price": 4.213 }, { "productId": "888", "name": "Product 999", "price": 6.24 }, { "productId": "999", "name": "Product 111", "price": 9.71 } ]} ];

shoppingJson.forEach(userObj => {
  // 遍历对象的所有用户键
  for (const userId in userObj) {
    // 确保是对象自身的属性（避免遍历原型链上的属性）
    if (userObj.hasOwnProperty(userId)) {
      const products = userObj[userId];
      const totalPrice = products.reduce((sum, product) => sum + product.price, 0).toFixed(2);
      console.log(`用户 ${userId} 的总价：${totalPrice}`);
    }
  }
});

关键知识点解释 #

• Object.keys(userObj)：返回对象所有自身可枚举属性的键名数组，这里因为每个对象只有一个键，所以取[0]就能拿到用户名。
• Array.reduce()：用来高效累加数组元素，比手动写循环更简洁。
• toFixed(2)：解决JS浮点运算的精度问题，确保总价显示为两位小数。

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