5 个可以替代 if-else 的代码优化技巧-优快云博客

技巧一：使用三元运算符

优化前:

let statusText;
if (isOnline) {
  statusText = '在线';
} else {
  statusText = '离线';
}

优化后:

const statusText = isOnline ? '在线' : '离线';

优点：代码极其简洁，可读性强，将一个简单的逻辑判断和赋值操作浓缩到一行。

技巧二：使用 Map 或对象字面量进行映射function getStatusMessage(status) {

优化前:

  if (status === 'success') {
    return '操作成功';
  } else if (status === 'error') {
    return '发生错误';
  } else if (status === 'pending') {
    return '处理中...';
  } else {
    return '未知状态';
  }
}

优化后:

const statusMessages={
	success:  "操作成功",
	error: "发生错误 ",
	pending: "处理中",
}
function getStatusMessage(status){
	// 使用||提供一个默认值
	return statusMessages[status] || '未知状态'
}

优点：

可读性高：逻辑关系一目了然，就像查字典一样
易于扩展：新增一个状态时，只需在 statusMessages 对象中增加一个键值对即可

技巧三：使用策略模式（函数映射）

优化前:

function handleApiResponse(response) {
  if (response.code === 200) {
    handleSuccess(response.data);
  } else if (response.code === 401) {
    redirectToLogin();
  } else if (response.code === 404) {
    showNotFoundPage();
  } else {
    showGenericError();
  }
}

优化后:

const statusActions ={
	200:handleSuccess,
	401:redirectToLogin，
	404:showNotFoundPage,
	default:showGenericError,
}
fuction handleapiResponse(response) {
	// 查找对应的处理函数|默认函数
	const action =statusActions[response.code] || statusActions.default;
	action(response.data);//执行函数
}

优点：将“条件判断”和“具体执行”解耦。每个操作都是一个独立的函数，职责清晰，代码结构更加模块化和可测试。

技巧四：善用短路运算符 (&&, ||, ??)

1. 使用 && 替代简单的 if

优化前:

if (isDebugMode) {
  console.log('这是一条调试信息');
}

优化后:

isDebugMode && console.log('这是一条调试信息');

原理：&& 运算符只有在左侧表达式为真（truthy）时，才会执行并返回右侧的表达式。

2. 使用 || 或 ?? 提供默认值

场景：获取一个可能不存在的用户名，如果不存在，则显示“游客”。

优化前:

let displayName;
if (user.name) {
  displayName = user.name;
} else {
  displayName = '游客';
}

优化后:

// 使用||(逻辑或)
const displayName=user.name || '游客';

//更推荐使用 ??(空值合并运算符)
const displayNameWithNullish=user.name ?? '游客

注意 || 和 ?? 的区别：

|| 会将所有“假值”（false, 0, ‘’, null, undefined, NaN) 都替换为默认值
?? 只会将 null 和 undefined 替换为默认值。如果你希望保留 0 或空字符串 ‘’ 这样的有效值，?? 是更安全的选择

技巧五：使用规则数组

场景：根据订单金额，计算不同的折扣率。

优化前:

function getDiscount(orderAmount) {
  if (orderAmount >= 500) {
    return 0.2; // 20% 折扣
  } else if (orderAmount >= 200) {
    return 0.1; // 10% 折扣
  } else if (orderAmount >= 100) {
    return 0.05; // 5% 折扣
  } else {
    return 0;
  }
}

优化后:

const discountRules = [
  { condition: amount => amount >= 500, discount: 0.2 },
  { condition: amount => amount >= 200, discount: 0.1 },
  { condition: amount => amount >= 100, discount: 0.05 },
];

function getDiscount(orderAmount) {
  // 查找第一个满足条件的规则
  const rule = discountRules.find(r => r.condition(orderAmount));
  return rule ? rule.discount : 0;
}