首页 > 文章 > 前端

JavaScript多条件判断技巧分享

时间：2025-10-09 11:00:42 497浏览收藏

本文深入解析JavaScript多条件判断中`||`运算符的常见误用，着重讲解了`if (variable === value1 || value2)`错误写法的原因，并对比展示了`if (variable === value1 || variable === value2)`的正确用法。通过具体代码示例，揭示了JavaScript中真值和假值的概念在条件判断中的影响。此外，文章还推荐使用数组的`includes()`方法作为更优雅、可读性更强的替代方案，避免重复变量名和比较运算符，提高代码的可维护性。旨在帮助开发者掌握JavaScript条件判断的正确姿势，编写更清晰、准确的条件逻辑，提升代码质量。本文还附带了完整的HTML+JS代码示例，方便读者理解和实践。

JavaScript || 运算符：多值条件判断的正确姿势

本教程深入探讨JavaScript中||（逻辑或）运算符在多值条件判断时常见的误用及其解决方案。通过分析if (variable === value1 || value2)这种写法的原理，揭示其为何不按预期工作，并提供if (variable === value1 || variable === value2)的正确用法，同时介绍使用数组includes()方法的更优雅替代方案，帮助开发者编写清晰、准确的条件逻辑。

引言与||运算符的常见误区

在JavaScript的条件判断中，||（逻辑或）运算符被广泛用于组合多个条件。然而，初学者常会遇到一个常见的陷阱，即在判断一个变量是否等于多个值时，容易写出类似if (variable === "valueA" || "valueB")的表达式。这种写法往往不会产生预期的结果，因为它利用了JavaScript中值隐式转换为布尔值的“真值”（truthy）和“假值”（falsy）特性。

例如，考虑以下代码片段：

let characterClass = "artificer"; // 假设默认选中“artificer”
console.log(characterClass);

if (characterClass === "wizard" || "sorcerer") {
    console.log("这是一个脆弱的施法者 (Squishy boi)");
} else {
    console.log("这不是一个脆弱的施法者");
}
// 预期输出：“这不是一个脆弱的施法者”
// 实际输出：“这是一个脆弱的施法者 (Squishy boi)”

尽管characterClass的值是"artificer"，既不是"wizard"也不是"sorcerer"，但上述代码却错误地输出了"这是一个脆弱的施法者"。这是因为||运算符的工作原理是：它会从左到右评估其操作数，并返回第一个“真值”操作数的值。如果所有操作数都是“假值”，则返回最后一个操作数的值。

在这个例子中：

characterClass === "wizard" 的结果是 false（因为"artificer" !== "wizard"）。
|| 运算符接着评估第二个操作数 "sorcerer"。
在JavaScript中，非空字符串（如"sorcerer"）被认为是“真值”。
因此，整个表达式false || "sorcerer"的结果是"sorcerer"，而"sorcerer"作为真值，导致if条件被满足。

||运算符的正确用法

要正确地判断一个变量是否等于多个值，每个条件都必须是一个完整的布尔表达式。这意味着你需要重复变量名和比较运算符：

let characterClass = "artificer";
console.log(characterClass);

if (characterClass === "wizard" || characterClass === "sorcerer") {
    console.log("这是一个脆弱的施法者 (Squishy boi)");
} else {
    console.log("这不是一个脆弱的施法者");
}
// 预期输出：“这不是一个脆弱的施法者”
// 实际输出：“这不是一个脆弱的施法者” (正确)

在这个修正后的例子中：

characterClass === "wizard" 的结果是 false。
characterClass === "sorcerer" 的结果是 false。
false || false 的结果是 false，因此if条件不满足，代码进入else块，输出正确的结果。

示例代码：D&D角色职业判断

结合HTML下拉选择器，我们可以构建一个完整的示例来演示这种逻辑。

HTML结构 (index.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript || 运算符教程</title>
</head>
<body>
    <h1>D&D 角色职业判断</h1>

    <label for="character-class">选择角色职业:</label>
    &lt;select name=&quot;class&quot; id=&quot;character-class&quot;&gt;
        <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>
    &lt;/select&gt;
    <button id="check-class-btn">检查职业类型</button>
    <p>当前职业类型：<span id="output-incorrect"></span> (错误逻辑)</p>
    <p>当前职业类型：<span id="output-correct"></span> (正确逻辑)</p>
    <p>当前职业类型：<span id="output-includes"></span> (推荐逻辑)</p>

    <script src="script.js"></script>
</body>
</html>

JavaScript代码 (script.js):

document.addEventListener('DOMContentLoaded', () => {
    const characterClassSelect = document.getElementById("character-class");
    const checkButton = document.getElementById("check-class-btn");
    const outputIncorrect = document.getElementById("output-incorrect");
    const outputCorrect = document.getElementById("output-correct");
    const outputIncludes = document.getElementById("output-includes");

    function evaluateClass() {
        let selectedClass = characterClassSelect.value;
        console.log(`当前选中的职业: ${selectedClass}`);

        // 1. 错误用法示例
        if (selectedClass === "wizard" || "sorcerer") {
            outputIncorrect.textContent = "这是一个脆弱的施法者 (错误判断)";
        } else {
            outputIncorrect.textContent = "这不是一个脆弱的施法者 (错误判断)";
        }

        // 2. 正确用法示例
        if (selectedClass === "wizard" || selectedClass === "sorcerer") {
            outputCorrect.textContent = "这是一个脆弱的施法者 (正确判断)";
        } else {
            outputCorrect.textContent = "这不是一个脆弱的施法者 (正确判断)";
        }

        // 3. 推荐用法：使用 Array.prototype.includes()
        const squishyClasses = ["wizard", "sorcerer"];
        if (squishyClasses.includes(selectedClass)) {
            outputIncludes.textContent = "这是一个脆弱的施法者 (推荐判断)";
        } else {
            outputIncludes.textContent = "这不是一个脆弱的施法者 (推荐判断)";
        }
    }

    // 页面加载时执行一次
    evaluateClass();

    // 当选择器或按钮被操作时更新
    characterClassSelect.addEventListener('change', evaluateClass);
    checkButton.addEventListener('click', evaluateClass);
});

通过运行上述代码，你会发现：

无论选择哪个职业，output-incorrect 总是显示“这是一个脆弱的施法者”，这证明了||运算符的误用。
output-correct 会根据你选择的职业（“wizard”或“sorcerer”与其他）正确显示结果。
output-includes 也会正确显示结果，并且代码更加简洁易读。

更优雅的解决方案：使用数组includes()

当需要比较一个变量是否等于多个值时，使用Array.prototype.includes()方法通常是更简洁、可读性更强的解决方案。

const characterClass = "wizard"; // 假设值为 "wizard"
const squishyClasses = ["wizard", "sorcerer", "bard"]; // 定义一个包含所有目标值的数组

if (squishyClasses.includes(characterClass)) {
    console.log("这是一个脆弱的施法者");
} else {
    console.log("这不是一个脆弱的施法者");
}

这种方法的优点在于：

可读性强： 清楚地表达了“如果characterClass包含在squishyClasses数组中”的意图。
易于维护： 当需要添加或移除比较值时，只需修改数组squishyClasses，而无需修改if语句的结构。
简洁： 避免了重复的变量名和比较运算符。

对于更复杂的条件判断，例如需要对不同的职业组执行不同的操作，switch语句也是一个值得考虑的选项，但对于单一变量与多个固定值的比较，includes()方法通常是首选。

注意事项与最佳实践

理解真值与假值： 始终牢记JavaScript中哪些值是“真值”（例如非空字符串、非零数字、对象）以及哪些是“假值”（例如false、0、""、null、undefined、NaN）。这对于理解逻辑运算符的行为至关重要。
完整的布尔表达式： 在使用||或&&（逻辑与）运算符组合条件时，确保每个操作数都是一个完整的、独立的布尔表达式。
选择合适的比较方法：
- 对于两个或三个简单值的比较，重复variable === value的写法是可接受的。
- 当比较的值数量较多时，强烈推荐使用Array.prototype.includes()方法，以提高代码的可读性和可维护性。
- 对于需要根据不同值执行不同代码块的情况，switch语句可能更合适。

总结

正确理解和使用JavaScript中的逻辑运算符是编写健壮、可预测代码的关键。避免if (variable === value1 || value2)这种常见的误用，而是采用if (variable === value1 || variable === value2)的完整布尔表达式形式，或更推荐的Array.prototype.includes()方法，将能有效提升代码的准确性、可读性与可维护性。通过这些实践，开发者可以构建出更加可靠的条件逻辑，确保程序行为符合预期。

到这里，我们也就讲完了《JavaScript多条件判断技巧分享》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！