JS条件语句有哪些写法-js教程-PHP中文网

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

js条件语句有哪些写法

JavaScript中的条件语句，说白了，就是程序根据不同的情况去执行不同的代码块。最核心的写法无非就是

if...else

登录后复制

、

switch

登录后复制

，以及更简洁的三元运算符。它们就像是我们日常做决策时，根据“如果这样，就那样；否则就另一样”的逻辑，只不过是用代码来表达罢了。

解决方案

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

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

登录后复制

语句，但那样代码的可读性可能会下降，需要谨慎。

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

登录后复制

的怀抱。毕竟，代码是给人读的，清晰比什么都重要。

三元运算符的妙用与陷阱

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

KAIZAN.ai

使用AI来改善客户服体验，提高忠诚度

查看详情

// 妙用：简洁的赋值
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

登录后复制

""

登录后复制

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

登录后复制

时才返回右侧表达式的值，而不会像

||

登录后复制

那样对

登录后复制

、空字符串

""

登录后复制

或

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

登录后复制

和其他“假值”（如

登录后复制

或

""

登录后复制

）时，

??

登录后复制

是比

||

登录后复制

更精确的选择。

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

登录后复制

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

以上就是JS条件语句有哪些写法的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

JS代码调试技巧_Chrome DevTools进阶代码审查：Git Hooks与自动化检查数据持久化：IndexedDB高级用法 JavaScript调试技巧_ChromeDevTools高级功能使用浏览器渲染JavaScript_重绘与回流优化