JS条件判断常用写法有哪些？

掌握JS条件语句，让代码更智能！本文深入解析JavaScript中常见的条件语句写法，包括`if...else`、`switch`以及简洁的三元运算符。`if...else`结构灵活，适用于复杂条件判断；`switch`语句则擅长处理单一变量的多值匹配。此外，文章还介绍了逻辑短路（`&&`、`||`）、空值合并（`??`）和可选链（`?.`）等高级技巧，它们能有效提升代码的简洁性和健壮性。但请注意，选择合适的条件语句需权衡可读性与维护性，根据实际场景和代码清晰度做出明智决策，让你的JavaScript代码更加高效、易懂。

JavaScript中的条件语句主要包括if...else、switch和三元运算符，用于根据不同条件执行相应代码块；if...else适用于复杂条件和范围判断，switch适合单一变量的多个离散值匹配，三元运算符用于简洁的二元选择，而逻辑短路（&&、||）、空值合并（??）和可选链（?.）等特性则提供了更灵活的条件控制方式，提升代码简洁性与健壮性，但需权衡可读性与维护性，最终选择应基于具体场景和代码清晰度需求。

JavaScript中的条件语句，说白了，就是程序根据不同的情况去执行不同的代码块。最核心的写法无非就是if...else、switch，以及更简洁的三元运算符。它们就像是我们日常做决策时，根据“如果这样，就那样；否则就另一样”的逻辑，只不过是用代码来表达罢了。

解决方案

我们来细致地聊聊这些常见的条件语句写法。

1. if...else if...else 结构 这是最基础也最灵活的。它允许你检查一系列条件，并执行第一个满足条件的代码块。

let score = 85;

if (score >= 90) {
    console.log("优秀！");
} else if (score >= 80) {
    console.log("良好。");
} else if (score >= 60) {
    console.log("及格。");
} else {
    console.log("不及格。");
}

这种结构在处理复杂、多分支且条件之间可能存在重叠或范围判断时特别有用。你可以嵌套if语句，但那样代码的可读性可能会下降，需要谨慎。

2. switch 语句 当你需要基于一个变量的不同离散值来执行不同的代码时，switch语句通常比一长串的if...else if更清晰。

let dayOfWeek = "Monday";

switch (dayOfWeek) {
    case "Monday":
        console.log("一周的开始，加油！");
        break; // 别忘了break，否则会“穿透”到下一个case
    case "Friday":
        console.log("周末要来了，开心！");
        break;
    case "Saturday":
    case "Sunday": // 多个case可以共用一个代码块
        console.log("享受你的周末吧！");
        break;
    default:
        console.log("普通工作日。");
}

switch语句内部使用严格相等（===）进行比较。每个case块通常需要一个break语句来阻止代码继续执行到下一个case。如果没有case匹配，default块（如果存在）就会被执行。

3. 三元运算符（Ternary Operator） 这是一种非常简洁的条件表达式，通常用于根据一个条件给变量赋值或者返回一个值。

let age = 18;
let status = (age >= 18) ? "成年人" : "未成年人";
console.log(status); // 输出: 成年人

// 也可以用于简单的函数返回
function canVote(age) {
    return (age >= 18) ? true : false;
}
console.log(canVote(17)); // 输出: false

它的语法是 条件 ? 表达式1 : 表达式2。如果条件为真，则执行表达式1；否则执行表达式2。它让代码看起来很紧凑，尤其适合简单的二选一场景。

何时选择if/else，何时选择switch？

在我个人的经验里，选择if/else还是switch，主要看你的条件类型和代码可读性。

if/else的优势在于它的灵活性。当你的条件是复杂的表达式，比如涉及到范围判断（score >= 90）、多个变量的组合判断（age > 18 && hasLicense），或者条件之间没有明确的顺序关系时，if/else是自然而然的选择。你可以轻松地处理各种逻辑组合，它就像一个万能工具箱。

而switch呢，它在处理单一变量的多个离散值比较时表现出色。想象一下，你有一个status变量，它可能是"pending"、"approved"、"rejected"等几个固定字符串。这时候用switch会比写一堆if (status === "pending") ... else if (status === "approved") ...来得更整洁、更易于理解。它强制你关注变量的特定值，让代码结构更清晰。

但switch也有它的局限性，比如它不能直接处理范围判断，你不能写case score > 90:。而且，如果你忘记写break，就可能出现意想不到的“穿透”行为，这在调试时会让人头疼。所以，我通常会在条件是基于一个明确的、有限的枚举值时，优先考虑switch。如果情况稍微复杂一点，或者需要组合判断，我还是会回到if/else的怀抱。毕竟，代码是给人读的，清晰比什么都重要。

三元运算符的妙用与陷阱

三元运算符，简直是代码精简的利器，尤其是在你只需要根据一个布尔条件来决定一个值的场景。它的“妙用”在于能让代码变得非常紧凑，一行就能搞定赋值或者简单的返回逻辑，对于那些追求函数式编程风格、喜欢表达式而非语句的开发者来说，它简直是福音。比如，给一个变量设置默认值，或者根据用户权限显示不同文本，用它写起来就特别顺畅。

// 妙用：简洁的赋值
const message = isLoggedIn ? "欢迎回来！" : "请登录。";
// 妙用：函数内直接返回
const getPrice = (isVip) => isVip ? 99 : 120;

然而，这把“利器”也有它的“陷阱”。最大的问题就是可读性。当你的条件或者表达式变得复杂时，三元运算符会迅速变得难以理解，甚至比嵌套的if/else还要糟糕。想象一下，一个三元运算符里面再套一个三元运算符，那简直是噩梦。它会让人在阅读时感觉像是在解谜，而不是在读代码。

// 陷阱：嵌套过深，可读性差
const finalStatus = (user.isPremium ? (user.isActive ? "Premium Active" : "Premium Inactive") : (user.isGuest ? "Guest" : "Standard User"));
// 这种情况下，还是老老实实写if/else更清晰

我的建议是，把三元运算符留给那些简单、直观的二元选择。如果你的条件或者结果表达式需要多行代码，或者逻辑本身比较复杂，那么请毫不犹豫地使用if/else。代码的清晰度永远比它的长度更重要。别为了追求“一行代码”而牺牲了未来的可维护性。

进阶：短路逻辑与条件语句的变体

除了上面那些“正规军”，JavaScript里还有一些利用其特性实现的“非典型”条件控制，它们常常能让代码更优雅、更高效。

1. 逻辑与（&&）的短路求值&&运算符在判断时有一个特性：如果左侧表达式为假值（false, 0, "", null, undefined, NaN），那么右侧表达式就不会被执行。我们可以利用这个特性来实现条件执行。

let userLoggedIn = true;
userLoggedIn && console.log("用户已登录，可以访问！"); // 如果userLoggedIn为true，则执行console.log

// 常见的应用：条件渲染（在React/Vue等框架中很常见）
// showModal && <ModalComponent />

这种写法非常简洁，尤其适合当你的“条件满足时执行某个操作”的场景。

2. 逻辑或（||）的短路求值 与&&类似，||运算符也有短路特性：如果左侧表达式为真值，右侧表达式就不会被执行。这常用于设置默认值。

let userName = ""; // 假设从某个地方获取，可能为空
let displayName = userName || "访客"; // 如果userName是空字符串（假值），则使用"访客"
console.log(displayName); // 输出: 访客

let userConfig = null;
let config = userConfig || { theme: 'dark', language: 'en' }; // 如果userConfig为null（假值），则使用默认配置
console.log(config); // 输出: { theme: 'dark', language: 'en' }

这个技巧在处理可能为null、undefined或空字符串的变量时非常实用，能快速提供一个回退值。

3. 空值合并运算符（??） 这是ES2020引入的一个新特性，比||更精确地处理“空”值。??只会在左侧表达式为null或undefined时才返回右侧表达式的值，而不会像||那样对0、空字符串""或false也进行短路。

let response = 0; // 假设后端返回0，这是个有效值
let count = response ?? 100; // 如果用||，count会是100；用??，count是0
console.log(count); // 输出: 0

let setting = ''; // 空字符串，在某些场景下也是有效值
let displaySetting = setting ?? 'Default';
console.log(displaySetting); // 输出: ''

当你需要区分null/undefined和其他“假值”（如0或""）时，??是比||更精确的选择。

4. 可选链操作符（?.） 虽然它不是严格意义上的条件语句，但?.操作符提供了一种在访问可能为null或undefined的对象的属性或方法时，避免抛出错误的方式。它本质上是一种“条件性”的属性访问。

const user = {
    profile: {
        address: {
            street: "Main St"
        }
    }
};

// 尝试安全地访问深层嵌套的属性
const streetName = user?.profile?.address?.street;
console.log(streetName); // 输出: Main St

const adminUser = null;
const adminAddress = adminUser?.profile?.address?.street;
console.log(adminAddress); // 输出: undefined，而不是报错

这让处理复杂数据结构时，代码变得更加健壮，避免了冗长的if (user && user.profile && user.profile.address)这样的判断链。它将错误处理的逻辑内联到属性访问中，非常优雅。

这些“变体”和“进阶”用法，在我看来，是JavaScript灵活性的体现。它们不直接是if/else那种显式的条件控制，但通过利用语言的特性，巧妙地实现了条件逻辑，让代码在特定场景下更加简洁、高效。但就像三元运算符一样，滥用也可能导致可读性下降，所以关键在于理解它们的适用场景，并权衡代码的清晰度和简洁性。

文中关于JavaScript,条件语句,Switch,三元运算符,if...else的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS条件判断常用写法有哪些？》文章吧，也可关注golang学习网公众号了解相关技术文章。