JavaScript 中怎么用 reduce 计算购物车商品的总金额-js教程-PHP中文网

用 reduce 计算购物车总金额的核心是累加每个商品的 price × quantity，初始值设为 0；需校验字段有效性并处理非数字值，展示时可用 tofixed(2) 保留两位小数。

javascript 中怎么用 reduce 计算购物车商品的总金额

用 reduce 计算购物车总金额，核心是把每个商品的「单价 × 数量」累加起来，一行代码就能搞定，关键在于传对初始值和累加逻辑。

购物车数据结构要清晰

确保你的购物车是一个数组，每个商品对象至少包含 price（单价）和 quantity（数量）字段，例如：

[
  { name: "苹果", price: 5.5, quantity: 2 },
  { name: "牛奶", price: 12.0, quantity: 1 },
  { name: "面包", price: 8.5, quantity: 3 }
]

reduce 的基本写法

调用 reduce 时，传入一个累加器函数和初始值 0。每次迭代，把当前商品的 price * quantity 加到累加器上：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);

第一个参数：累加器（如 sum），代表当前已计算的总金额
第二个参数：当前遍历的商品对象（如 item）
初始值设为 0：避免 undefined 参与运算导致 NaN

加上容错更稳妥

实际项目中，商品字段可能缺失或为非数字，建议简单校验：

const total = cart.reduce((sum, item) => {
  const price = Number(item.price) || 0;
  const quantity = Number(item.quantity) || 0;
  return sum + price * quantity;
}, 0);

用 Number() 转换并处理空值、字符串数字等
用 || 0 防止 NaN 或 undefined 导致整个结果变 NaN

如果需要保留两位小数（显示用）

reduce 本身返回的是精确数值，四舍五入应在最后一步做，避免中间计算误差：

const total = parseFloat(
  cart.reduce((sum, item) => {
    const price = Number(item.price) || 0;
    const quantity = Number(item.quantity) || 0;
    return sum + price * quantity;
  }, 0).toFixed(2)
);