专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

在 JavaScript 中 if else, 三元运算符、switch如何选择

ins518 2025-10-08 18:29:57 技术文章 20 ℃ 0 评论

在 JavaScript 中,if else、三元运算符和switch都是条件判断工具,它们的选择主要取决于条件复杂度分支数量代码可读性。以下是具体的选择指南:

1. 三元运算符(condition ? a : b)

适用场景:简单的「二选一」判断,且逻辑简短(通常是单一表达式)。
优势:简洁紧凑,可作为表达式直接参与赋值或运算。
注意:避免嵌套(嵌套会严重降低可读性)。

// 合适:简单的二选一赋值
const result = score >= 60 ? "及格" : "不及格";

// 不合适:嵌套导致可读性差
const level = score > 90 ? "优秀" : 
              score > 70 ? "良好" : 
              score > 60 ? "及格" : "不及格"; 
// 这种情况更适合用if else

2.if else

适用场景

  • 条件复杂(包含逻辑运算符&&、||、!组合);
  • 分支需要执行多句代码;
  • 范围判断(如x > 10 && x < 20);
  • 分支数量较少(通常 3 个以内,过多会冗长)。

优势:灵活性最高,能处理所有类型的条件判断。

// 合适:复杂条件+多语句执行
if (age > 18 && hasId && !isBlacklisted) {
  console.log("允许进入");
  grantAccess();
} else {
  console.log("禁止进入");
  showError();
}

// 合适:范围判断
if (score < 60) {
  grade = "F";
} else if (score < 70) {
  grade = "D";
} else if (score < 80) {
  grade = "C";
} else {
  grade = "A";
}

3.switch

适用场景

  • 判断条件是同一个变量 / 表达式的离散值(如状态码、枚举值);
  • 分支数量较多(通常 4 个以上,比多分支if else更清晰)。

优势:结构清晰,避免重复写相同的判断变量(如if (x === 1) {} else if (x === 2) {})。

注意

  • 每个case后需加break(否则会穿透执行下一个case);
  • 只能做严格相等(===) 比较,不支持范围或复杂逻辑。
// 合适:同一变量的离散值判断
switch (statusCode) {
  case 200:
    console.log("成功");
    break;
  case 404:
    console.log("资源不存在");
    break;
  case 500:
    console.log("服务器错误");
    break;
  default:
    console.log("未知状态");
}

总结选择优先级

  1. 简单二选一 → 三元运算符(简洁);
  2. 复杂条件 / 范围判断 / 少分支 → if else(灵活);
  3. 同一变量的多离散值 → switch(清晰)。

核心原则:优先保证可读性。如果某种写法让代码更难理解(如嵌套三元、超长if else链),即使 “理论上合适”,也应换成更清晰的方式。

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表