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那种显式的条件控制，但通过利用语言的特性，巧妙地实现了条件逻辑，让代码在特定场景下更加简洁、高效。但就像三元运算符一样，滥用也可能导致可读性下降，所以关键在于理解它们的适用场景，并权衡代码的清晰度和简洁性。
