JavaScript中||（逻辑或）运算符在条件判断中的正确使用与常见陷阱-html教程-PHP中文网

JavaScript中||（逻辑或）运算符在条件判断中的正确使用与常见陷阱

霞舞

发布： 2025-09-19 13:03:08

原创

1054人浏览过

JavaScript中||（逻辑或）运算符在条件判断中的正确使用与常见陷阱

本文旨在深入解析JavaScript中||（逻辑或）运算符在if语句条件判断时常遇到的误区。通过具体代码示例，详细阐述了if (variable === "value1" || "value2")这种写法为何会产生非预期结果，并提供了正确的显式比较方式if (variable === "value1" || variable === "value2")。此外，文章还介绍了使用数组includes()方法等更简洁高效的多值比较策略，帮助开发者编写更健壮、可读性更强的条件逻辑。

理解JavaScript中的逻辑或（||）运算符

在javascript中，||（逻辑或）运算符用于连接两个或多个表达式。它的基本作用是：如果第一个操作数为真值（truthy），则返回第一个操作数的值；否则，返回第二个操作数的值。这个行为与许多其他编程语言中只返回布尔true或false的逻辑或有所不同，javascript的||运算符具有“短路评估”和“值返回”的特性。

一个常见的误区发生在尝试比较一个变量是否等于多个不同值时，例如：

if (characterClass === "wizard" || "sorcerer") {
    console.log("Squishy boi");
} else {
    console.log("Not a wizard/sorcerer");
}

登录后复制

这段代码的预期是“如果characterClass是"wizard"或者"sorcerer"，则执行第一个代码块”。然而，当characterClass的值为"artificer"时，console.log("Squishy boi")依然会被执行。这表明||运算符并未按照直觉工作。

为什么会出现非预期结果？

问题的根源在于JavaScript对“真值”（truthy）和“假值”（falsy）的判断。在条件语句中，JavaScript会将非布尔值转换为布尔值进行评估。以下值被认为是假值：

false
0 (数字零)
"" (空字符串)
null
undefined
NaN (Not-a-Number)

所有其他值，包括非空字符串（如"sorcerer"）、非零数字、对象、数组等，都被认为是真值。

立即学习“Java免费学习笔记（深入）”；

回到之前的错误示例： if (characterClass === "wizard" || "sorcerer")

这个条件表达式可以分解为两部分：

characterClass === "wizard"
"sorcerer"

当characterClass为"artificer"时：

characterClass === "wizard" 的结果是 false。
由于第一个操作数是false，||运算符会继续评估第二个操作数。
第二个操作数是字符串"sorcerer"。作为一个非空字符串，"sorcerer"在布尔上下文中被视为真值。
因此，整个表达式 false || true 的结果是 true，导致if语句的第一个分支被执行。

正确的比较方式

要正确地比较一个变量是否等于多个值，每个比较都必须是完整的表达式。这意味着characterClass需要与每个目标值进行独立的比较。

// HTML 结构示例
/*
<input type="number" id="stat" value="0"> <button id="roll-btn">Roll Stats</button><br><br>
    <select name="class" id="character-class">
        <option value="artificer">Artificer</option>
        <option value="barbarian">Barbarian</option>
        <option value="bard">Bard</option>
        <option value="cleric">Cleric</option>
        <option value="druid">Druid</option>
        <option value="fighter">Fighter</option>
        <option value="monk">Monk</option>
        <option value="paladin">Paladin</option>
        <option value="ranger">Ranger</option>
        <option value="rogue">Rogue</option>
        <option value="sorcerer">Sorcerer</option>
        <option value="warlock">Warlock</option>
        <option value="wizard">Wizard</option>
    </select>
*/

// 正确的JavaScript代码
let characterClass = document.getElementById("character-class").value; // 获取选中的职业值
console.log(characterClass); // 假设此时 characterClass 为 "artificer"

if (characterClass === "wizard" || characterClass === "sorcerer") {
    // 只有当 characterClass 等于 "wizard" 或 characterClass 等于 "sorcerer" 时才执行
    console.log("Squishy boi");
} else {
    console.log("Not a wizard/sorcerer");
}

登录后复制

在这个修正后的代码中：

百度文心百中

百度大模型语义搜索体验中心

查看详情

characterClass === "wizard" 是一个布尔表达式。
characterClass === "sorcerer" 也是一个布尔表达式。
||运算符连接这两个布尔表达式，只有当其中任意一个为true时，整个条件才为true。

如果characterClass是"artificer"：

"artificer" === "wizard" 结果是 false。
"artificer" === "sorcerer" 结果是 false。
false || false 的结果是 false，因此会执行else分支，输出"Not a wizard/sorcerer"，这符合预期。

多值比较的优化策略

当需要比较的值数量较多时，使用多个||连接的显式比较可能会使代码变得冗长。JavaScript提供了更简洁高效的替代方案。

1. 使用 Array.prototype.includes() 方法

这是最推荐的简洁方式，尤其适用于比较值列表较长的情况。

let characterClass = document.getElementById("character-class").value;
console.log(characterClass);

const squishyClasses = ["wizard", "sorcerer"];

if (squishyClasses.includes(characterClass)) {
    console.log("Squishy boi");
} else {
    console.log("Not a wizard/sorcerer");
}

登录后复制

includes()方法检查数组是否包含某个指定的值，并返回true或false。这种方法不仅代码更短，而且可读性更强，易于维护。

2. 使用 switch 语句

如果根据不同的值需要执行不同的逻辑，switch语句是一个很好的选择。

let characterClass = document.getElementById("character-class").value;
console.log(characterClass);

switch (characterClass) {
    case "wizard":
    case "sorcerer":
        console.log("Squishy boi");
        // 可以在这里添加更多逻辑
        break;
    case "barbarian":
    case "fighter":
        console.log("Tough guy");
        break;
    default:
        console.log("Not a wizard/sorcerer or a tough guy");
        break;
}

登录后复制

switch语句在匹配多个case到同一个逻辑块时，可以通过省略break来达到类似||的效果。

总结与注意事项

明确比较原则： 在JavaScript的if语句中使用||运算符进行多值比较时，必须对每个值进行完整的、显式的比较，即if (variable === value1 || variable === value2)。
理解真值/假值： 记住JavaScript中非空字符串、非零数字等都是真值，这对于理解||运算符的行为至关重要。
优化可读性： 对于涉及多个值的比较，优先考虑使用Array.prototype.includes()方法，它能显著提升代码的简洁性和可读性。当需要根据不同值执行不同逻辑时，switch语句也是一个强大的工具。

掌握这些核心概念和最佳实践，将帮助开发者编写出更准确、更易于理解和维护的JavaScript条件逻辑。

以上就是JavaScript中||（逻辑或）运算符在条件判断中的正确使用与常见陷阱的详细内容，更多请关注php中文网其它相关文章！