如何实现JavaScript中用户购物车金额统计的两个自定义函数

异常原因说明 #

你遇到的NaN问题大概率是以下几个原因导致的：

• 使用reduce累加时未设置初始值0，当购物车为空时会返回undefined，参与运算就会得到NaN
• 未对匹配用户的逻辑做兜底，找不到目标用户时直接访问undefined.carts会抛出错误，后续计算异常
• 未对price、quantity字段做类型兼容，若字段值为无效字符串或缺失，相乘就会得到NaN

函数实现代码 #

// 计算单个订单项的总价值，入参order为购物车中的单个商品对象
function totalOrderValue(order) {
  // 强转为数字，无效值兜底为0，避免出现NaN
  const price = Number(order?.price) || 0
  const quantity = Number(order?.quantity) || 0
  return price * quantity
}

// 计算匹配条件的用户购物车总价值
function invoiceCustomer(users, id, name, age) {
  // 查找同时匹配id、name、age的用户，age统一转数字比对避免类型不一致匹配失败
  const targetUser = users.find(user => 
    user.id === id 
    && user.name === name 
    && Number(user.age) === Number(age)
  )
  // 未匹配到用户直接返回0，避免后续访问属性报错
  if (!targetUser) return 0
  // 累加所有商品价值，reduce必须设置初始值0
  return targetUser.carts.reduce((sum, item) => sum + totalOrderValue(item), 0)
}

测试示例 #

// 测试Peter的购物车总价值：3.44*3 + 8.44*5 = 52.52
console.log(invoiceCustomer(users, "2222", "Peter", 20)) // 输出 52.52

// 测试John的购物车总价值：13.44*13 + 1.44*1 = 176.16
console.log(invoiceCustomer(users, "43443", "John", 24)) // 输出 176.16

// 测试不存在的用户，返回0无报错
console.log(invoiceCustomer(users, "111", "Tom", 18)) // 输出 0

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