优雅处理条件判断

约 924 字大约 3 分钟

2026-2-15

在JavaScript开发中，我们每天都要面对各种条件判断。当逻辑变得复杂时，代码中充斥着大量的if-else语句不仅难以阅读，更难以维护。优雅的条件判断不仅仅是代码技巧，更是一种思维方式。通过合理运用对象映射、策略映射、三元表达式、空值合并和短路运算等工具，我们可以让代码的意图更加清晰，维护更加容易。

本文将介绍几种简单简单实用的优雅处理条件判断的方法，帮助写出更清晰、更可维护的代码。

1. 对象映射：状态映射

如果返回的不同结果只是依赖某一个值时，例如根据订单状态值获取描述，对象映射则是更好的解决方案。

// 传统的if-else写法
function getStatusText(status) {
  if (status === "pending") return "处理中";
  else if (status === "processing") return "处理中";
  else if (status === "success") return "成功";
  else if (status === "failed") return "失败";
  else return "未知状态";
}

// 1. 对象映射
const STATUS_MAP = {
  pending: "处理中",
  processing: "处理中",
  success: "成功",
  failed: "失败",
  default: "未知状态",
};

function getStatusText(status) {
  return STATUS_MAP[status] || STATUS_MAP.default;
}

2. 策略映射：封装算法

策略映射是对象映射的升级，它映射的不在是某一个值，而是一个处理函数。当不同的条件需要执行不同的算法时，则可以使用策略映射。

// 支付策略示例
const PAYMENT_STRATEGIES = {
  alipay: (amount) => amount * 0.95,
  wechat: (amount) => amount * 0.98,
  creditCard: (amount) => amount * 1.0,
  cash: (amount) => amount * 0.9,
};

function calculatePayment(paymentType, amount) {
  const strategy = PAYMENT_STRATEGIES[paymentType];
  return strategy ? strategy(amount) : amount;
}

3. 卫语句：提前返回，减少嵌套

卫语句的核心思想是：先处理特殊情况，尽早返回。

// 深层嵌套
function processOrder(order) {
  if (order) {
    if (order.isValid) {
      if (order.items.length > 0) {
        return calculateTotal(order);
      } else {
        throw new Error("订单为空");
      }
    } else {
      throw new Error("订单无效");
    }
  } else {
    throw new Error("订单不存在");
  }
}

// ✅ 使用卫语句
function processOrder(order) {
  if (!order) throw new Error("订单不存在");
  if (!order.isValid) throw new Error("订单无效");
  if (order.items.length === 0) throw new Error("订单为空");

  return calculateTotal(order);
}

4. 三元表达式：简洁的条件赋值

三元表达式是处理简单条件分支的利器，可以减少不少的 if-elese。

// 基础用法
const userRole = isAdmin ? "管理员" : "普通用户";

// 链式三元
const getDiscountLevel = (points) =>
  points >= 1000 ? "VIP" : points >= 500 ? "黄金会员" : points >= 100 ? "白银会员" : "普通会员";

5. 空值合并（??）：处理空值

专门处理null和undefined，避免假值陷阱。

// 使用if判断
function getUserName(user) {
  if (user.name) {
    return user.name;
  } else {
    return "未定义";
  }
}

// 使用空值合并
function getUserName(user) {
  return user.name ?? "未定义";
}

// 深层嵌套处理
const userCity = user?.address?.city ?? user?.profile?.location ?? "未知地区";

6. 短路运算符（&&, ||）

基于布尔逻辑的灵活控制。

// 条件执行
isValid && submitForm();
user?.isAdmin && showAdminPanel();


// React条件渲染
function UserList({ users }) {
  return (
    <div>
      {users?.length > 0 ? (
        users.map((user) => <UserItem key={user.id} user={user} />)
      ) : (
        <p>暂无用户</p>
      )}
      {isLoading && <Spinner />}
    </div>
  );
}

let username = user || defaultUser;

总结

保持简单：不要过度设计，简单的if有时就是最佳选择
单一职责：每个条件判断函数只做一件事
可读性优先：代码是写给人看的
避免重复: 避免重复代码，先封装再判断
组合使用：根据场景灵活组合不同模式

优雅的条件判断不仅仅是代码技巧，更是一种思维方式。通过合理运用对象映射、策略映射、三元表达式、空值合并和短路运算等工具，我们可以让代码的意图更加清晰，维护更加容易。