JavaScript逻辑或（||）运算符的正确用法与多值比较策略

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

在javascript中，逻辑或运算符 || 用于连接两个或多个表达式。它的基本工作原理是：如果第一个操作数是“真值”（truthy），则返回第一个操作数的值；否则，它会评估第二个操作数并返回其值。这个过程被称为“短路评估”（short-circuit evaluation）。

在条件语句（如 if 语句）中，|| 运算符的返回值会被隐式转换为布尔值进行判断。这意味着只要 || 运算符的任何一个操作数被评估为真值，整个条件表达式就会被视为 true。

JavaScript中的真值和假值：

• 假值（Falsy values）：false, 0, -0, 0n (BigInt zero), "" (empty string), null, undefined, NaN。
• 真值（Truthy values）：除上述假值之外的所有值，包括非空字符串、非零数字、对象、数组等。

常见陷阱：多值比较中的误解

许多初学者在使用 || 运算符进行多值比较时，会遇到一个常见的误区。他们可能期望 if (variable === "value1" || "value2") 能够判断 variable 是否等于 "value1" 或 等于 "value2"。然而，这种写法并不会按照预期工作。

让我们通过一个具体的D&D角色职业选择案例来分析：

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

假设我们有一个HTML select 元素，用于选择角色职业：

<select name="class" id="character-class">
    <option value="artificer">Artificer</option>
    <option value="barbarian">Barbarian</option>
    <!-- ... 其他职业 ... -->
    <option value="sorcerer">Sorcerer</option>
    <option value="wizard">Wizard</option>
</select>

然后，在JavaScript中尝试根据选择的职业进行判断：

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

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

当 characterClass 的值为 "artificer" 时，这段代码的输出却是 "Squishy boi"，而不是预期的 "Not a wizard/sorcerer"。这是因为 if (characterClass === "wizard" || "sorcerer") 这个条件表达式被错误地解析了：

1. 首先评估 characterClass === "wizard"。由于 characterClass 是 "artificer"，所以 characterClass === "wizard" 的结果是 false。
2. 因为第一个操作数是 false，|| 运算符会继续评估第二个操作数，即 "sorcerer"。
3. 字符串 "sorcerer" 是一个非空字符串，在JavaScript中被视为真值（truthy value）。
4. 因此，整个条件表达式 false || true 的结果是 true。
5. 最终，if 语句的条件被判断为 true，从而执行了 console.log("Squishy boi")。

正确的多值比较方法

要正确地使用 || 运算符进行多值比较，必须为每个比较条件重复变量本身：

码哩写作

最懂作者的AI辅助创作工具

91

查看详情

1. 重复比较法

这是最直接和明确的修正方式。为 || 运算符的每个部分都提供一个完整的比较表达式：

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

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

现在，如果 characterClass 是 "artificer"：

1. characterClass === "wizard" 结果为 false。
2. characterClass === "sorcerer" 结果为 false。
3. 整个条件表达式 false || false 的结果是 false。
4. if 语句的条件被判断为 false，从而执行 else 块中的 console.log("Not a wizard/sorcerer")。这符合预期。

2. 更优雅的多值比较策略

当需要比较的值数量较多时，重复比较法可能会导致代码冗长且不易维护。以下是两种更优雅的替代方案：

a. 使用 Array.prototype.includes()

includes() 方法可以判断一个数组是否包含某个指定的值，返回 true 或 false。这使得它非常适合用于检查一个变量是否在多个预设值之中。

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

const squishyClasses = ["wizard", "sorcerer"]; // 将所有“脆弱”职业放入数组

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

这种方法尤其适用于当需要比较的职业列表很长时，代码会更加简洁和可读。

b. 使用 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("Tanky boi");
    //     break;
    default:
        console.log("Not a wizard/sorcerer");
        break;
}

在 switch 语句中，如果多个 case 块需要执行相同的代码，可以像上面那样将它们连续排列，而不使用 break，这样会“穿透”到下一个 case，直到遇到 break 或 switch 块结束。

注意事项与总结

• 理解 || 的短路特性：|| 运算符会从左到右评估操作数，一旦遇到真值，就会立即返回该真值，而不再评估后续的操作数。这是导致 if (variable === "value1" || "value2") 行为异常的根本原因。
• 区分表达式和值：在条件判断中，每个 || 运算符的操作数都应该是一个完整的布尔表达式（例如 variable === "value"），而不是一个单独的值（例如 "value2"）。
• 选择合适的比较策略：
  • 对于两个或三个值的简单比较，重复比较法（a === b || a === c）足够清晰。
  • 当需要比较的值数量较多时，Array.prototype.includes() 提供了一种更简洁、更具可读性的解决方案。
  • 当需要根据变量的不同值执行不同的代码块时，switch 语句是更好的选择，它能使逻辑结构更清晰。

通过深入理解 || 运算符的工作原理并掌握正确的比较策略，开发者可以避免常见的逻辑错误，编写出更健壮、更易于维护的JavaScript代码。

以上就是JavaScript逻辑或（||）运算符的正确用法与多值比较策略的详细内容，更多请关注php中文网其它相关文章！