JavaScript中||运算符的多条件判断：常见误区与正确实践

1. ||运算符的常见误区与核心问题

在javascript的条件判断中，开发者常会遇到需要将一个变量与多个可能的值进行比较的场景。一个常见的误区是试图通过以下简洁的方式来实现多值比较：

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

这段代码的预期是“如果characterClass是"wizard"或者"sorcerer"，则执行第一个代码块”，但实际运行结果往往出人意料。即使characterClass被设置为"artificer"，上述if语句也可能错误地输出"Squishy boi"。这表明对||（逻辑或）运算符的工作原理存在误解。

2. ||运算符的工作原理与“真值”判断

要理解上述代码为何出错，我们需要深入了解JavaScript中||运算符的两个关键特性：短路求值（Short-circuit Evaluation）和“真值”（Truthy）/“假值”（Falsy）的概念。

• 短路求值：当使用||运算符时，JavaScript会从左到右依次评估其操作数。如果左侧的操作数评估结果为真值，那么整个表达式的结果就确定为真，右侧的操作数将不再被评估。
• 真值与假值：在JavaScript中，并非所有值都是布尔类型（true或false）。许多非布尔值在布尔上下文中会被隐式转换为布尔值。例如：
  • 假值 (Falsy)：false, 0, "" (空字符串), null, undefined, NaN。
  • 真值 (Truthy)：除了上述假值之外的所有值，例如非空字符串（"sorcerer"）、非零数字、对象、数组等。

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

1. 首先评估characterClass === "wizard"。
2. 无论characterClass === "wizard"的结果是true还是false，接下来都会评估第二个操作数"sorcerer"。
3. 由于"sorcerer"是一个非空字符串，它被视为一个真值。
4. 根据||运算符的规则，如果任何一个操作数为真值，整个表达式就为真。因此，characterClass === "wizard" || "sorcerer"这个表达式最终总是评估为真值（具体来说，如果第一个是假，它会返回"sorcerer"这个真值）。

这就是为什么即使characterClass是"artificer"，if语句的条件也会被判断为true，导致执行了非预期的代码块。

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

3. 正确使用||运算符进行多条件判断

要正确地使用||运算符将一个变量与多个值进行比较，必须为每个比较操作明确指定变量：

let characterClass = document.getElementById("character-class").value; // 假设值为 "artificer"
console.log(characterClass); // 输出 "artificer"

if (characterClass === "wizard" || characterClass === "sorcerer") {
    // 只有当 characterClass 等于 "wizard" 或 "sorcerer" 时才执行
    console.log("Squishy boi");
} else {
    // 否则执行此块
    console.log("Not a wizard/sorcerer"); // 正确输出 "Not a wizard/sorcerer"
}

在这个修正后的代码中：

先见AI

数据为基，先见未见

95

查看详情

1. characterClass === "wizard"会进行第一次比较。
2. characterClass === "sorcerer"会进行第二次比较。
3. 只有当这两个比较中的至少一个结果为true时，整个if条件才为true。

4. 更优雅的多值比较方案

当需要比较的值数量较多时，重复写characterClass === "value"可能会使代码变得冗长且难以维护。JavaScript提供了更简洁、更具可读性的替代方案。

4.1 使用Array.prototype.includes()

includes()方法用于判断一个数组是否包含一个指定的值。这对于多值比较场景非常适用。

let characterClass = document.getElementById("character-class").value; // 假设值为 "artificer"
const squishyClasses = ["wizard", "sorcerer", "bard"]; // 假设需要判断的职业列表

if (squishyClasses.includes(characterClass)) {
    console.log("Squishy boi");
} else {
    console.log("Not a squishy class");
}

// 示例：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>
*/

这种方法显著提高了代码的可读性和可维护性，特别是当需要比较的值列表很长时。

4.2 使用Set.prototype.has()

对于需要进行大量查找或对性能有较高要求的场景，使用Set数据结构进行比较可能更高效。Set的has()方法提供了O(1)的平均时间复杂度查找。

let characterClass = document.getElementById("character-class").value; // 假设值为 "artificer"
const squishyClassesSet = new Set(["wizard", "sorcerer", "bard"]); // 创建一个Set对象

if (squishyClassesSet.has(characterClass)) {
    console.log("Squishy boi");
} else {
    console.log("Not a squishy class");
}

5. 注意事项与最佳实践

• 理解运算符优先级：在复杂的条件语句中，始终使用括号()来明确逻辑分组，避免因运算符优先级问题导致意外结果。
• 选择合适的比较方法：
  • 对于只有两三个简单比较的情况，||运算符的正确用法（variable === value1 || variable === value2）是清晰且高效的。
  • 当比较值列表较长或未来可能扩展时，Array.prototype.includes()是更推荐的选择，它提高了代码的可读性和可维护性。
  • 如果需要极致的查找性能，并且比较值列表非常庞大，Set.prototype.has()是一个优秀的选择。
• 代码可读性：始终优先考虑代码的可读性。清晰的逻辑和简洁的表达有助于团队协作和未来的维护。

总结

JavaScript中的||（逻辑或）运算符是一个强大的工具，但其短路求值和真值/假值转换的特性可能导致初学者产生误解。正确理解并应用if (variable === "value1" || variable === "value2")的写法是避免常见错误的关键。此外，利用Array.prototype.includes()或Set.prototype.has()等现代JavaScript特性，可以更优雅、高效地处理多值比较场景，从而编写出更健壮、更易于维护的代码。掌握这些技巧，将有助于您在JavaScript开发中更加游刃有余。

以上就是JavaScript中||运算符的多条件判断：常见误区与正确实践的详细内容，更多请关注php中文网其它相关文章！