理解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条件逻辑。
