如何进一步优化已改进变量命名的JavaScript商品总价计算代码？

先展示原始代码与已优化变量命名后的代码：

原始代码 #

function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    if (items[i].type === "food") {
      total += items[i].price * 1.1;
    } else {
      total += items[i].price;
    }
  }
  return total;
}

const items = [
  { type: "food", price: 10 },
  { type: "clothing", price: 20 },
  { type: "electronics", price: 30 }
];

console.log(calculateTotal(items));

优化变量命名后的代码 #

function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    const item = items[i];
    if (item.type === "food") {
      total += item.price * 1.1;
    } else {
      total += item.price;
    }
  }
  return total;
}

const items = [
  { type: "food", price: 10 },
  { type: "clothing", price: 20 },
  { type: "electronics", price: 30 }
];

console.log(calculateTotal(items));

1. 采用更简洁的迭代方式 #

传统for循环可替换为可读性更强的for...of循环，或用数组reduce方法实现函数式累加，代码更简洁直观：

for...of 优化版

function calculateTotal(items) {
  let total = 0;
  for (const item of items) {
    total += item.type === "food" ? item.price * 1.1 : item.price;
  }
  return total;
}

reduce 优化版（推荐，符合函数式编程风格）

function calculateTotal(items) {
  return items.reduce((total, item) => {
    return total + (item.type === "food" ? item.price * 1.1 : item.price);
  }, 0);
}

2. 提取魔法值为常量，提升可维护性 #

代码中的"food"和1.1属于硬编码的魔法值，提取为常量后，后续修改规则时无需多处查找：

const FOOD_ITEM_TYPE = "food";
const FOOD_MARKUP_RATE = 1.1;

function calculateTotal(items) {
  return items.reduce((total, item) => {
    return total + item.price * (item.type === FOOD_ITEM_TYPE ? FOOD_MARKUP_RATE : 1);
  }, 0);
}

3. 增加输入校验，避免异常报错 #

如果传入的items不是数组，或元素缺少type/price属性，会导致代码报错。增加校验可提升鲁棒性：

const FOOD_ITEM_TYPE = "food";
const FOOD_MARKUP_RATE = 1.1;

function calculateTotal(items) {
  if (!Array.isArray(items)) return 0;
  
  return items.reduce((total, item) => {
    if (typeof item !== "object" || !item.type || typeof item.price !== "number") {
      return total;
    }
    return total + item.price * (item.type === FOOD_ITEM_TYPE ? FOOD_MARKUP_RATE : 1);
  }, 0);
}

4. 处理浮点数精度问题 #

JavaScript浮点数计算存在精度误差（如0.1 + 0.2 = 0.30000000000000004），针对金额计算可做精度处理：

const FOOD_ITEM_TYPE = "food";
const FOOD_MARKUP_RATE = 1.1;

function calculateTotal(items) {
  if (!Array.isArray(items)) return 0;
  
  const rawTotal = items.reduce((total, item) => {
    if (typeof item !== "object" || !item.type || typeof item.price !== "number") {
      return total;
    }
    return total + item.price * (item.type === FOOD_ITEM_TYPE ? FOOD_MARKUP_RATE : 1);
  }, 0);
  
  return Math.round(rawTotal * 100) / 100;
}

5. 简化条件判断逻辑 #

通过计算乘数的方式，去掉冗余的分支判断，让逻辑更清晰：

const FOOD_ITEM_TYPE = "food";
const FOOD_MARKUP_RATE = 1.1;

function calculateTotal(items) {
  if (!Array.isArray(items)) return 0;
  
  return items.reduce((total, item) => {
    if (!item || typeof item.price !== "number") return total;
    const multiplier = item.type === FOOD_ITEM_TYPE ? FOOD_MARKUP_RATE : 1;
    return total + item.price * multiplier;
  }, 0);
}

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