EnlightenCode

🎯 优雅地处理条件判断 ​

在JavaScript开发中，我们经常会遇到需要进行多重条件判断的场景。大量的if-else不仅会让代码变得冗长，还会降低代码的可读性和可维护性。本文将介绍几种优化条件判断的方法。

1. 使用逻辑运算符简化代码 ⚡ ​

js
// 1. 使用 && 运算符
// 传统写法
if (result) {
  this.obj = result;
}
// 优化写法
result && (this.obj = result);

// 2. 使用 || 运算符（设置默认值）
this.obj = result || defaultValue;

// 3. 使用空值合并运算符 ??（处理null或undefined）
this.obj = result ?? defaultValue;

2. 三元运算符 🔄 ​

js
// 传统写法
if (condition) {
  return value1;
} else {
  return value2;
}

// 优化写法
return condition ? value1 : value2;

// 可以嵌套使用（但不建议嵌套过多层）
return condition1 ? value1 : condition2 ? value2 : value3;

3. 对象映射替代if-else 📝 ​

js
// 传统写法
if (type === 'A') {
  handleA();
} else if (type === 'B') {
  handleB();
} else if (type === 'C') {
  handleC();
}

// 优化写法
const actionMap = {
  A: handleA,
  B: handleB,
  C: handleC
};
actionMap[type]?.();

4. switch(true)模式 🔍 ​

js
switch (true) {
  case age < 18:
    console.log('未成年');
    break;
  case age >= 18 && age < 60:
    console.log('成年人');
    break;
  default:
    console.log('老年人');
}

5. 数组方法替代条件判断 🎲 ​

js
// 使用数组includes替代多个条件判断
// 传统写法
if (type === 'A' || type === 'B' || type === 'C') {
  // do something
}

// 优化写法
const validTypes = ['A', 'B', 'C'];
if (validTypes.includes(type)) {
  // do something
}

注意事项 ⚠️ ​

  1. 选择合适的方案要根据具体场景，不要为了优化而优化
  2. 保持代码的可读性是首要原则
  3. 对于复杂的业务逻辑，适当的if-else可能比过度优化更好
  4. 注意运算符的优先级，必要时使用括号确保逻辑正确

最佳实践 💡 ​

  1. 对于简单的条件判断，使用逻辑运算符或三元运算符
  2. 对于多个条件分支，考虑使用对象映射
  3. 对于范围判断，可以使用switch(true)模式
  4. 代码优化的同时要注意维护性和可读性的平衡