JavaScript 比较 和 逻辑运算符

JavaScript 比较与逻辑运算符深度解析

比较运算符和逻辑运算符是 JavaScript 控制程序流程（如if、while、for）的核心。它们决定了代码的执行路径。

一、比较运算符 (Comparison Operators)

比较运算符用于比较两个值，返回布尔值true或false。

1. 相等性判断：==vs===(核心重点)

这是 JavaScript 中最容易出错的地方。

为什么推荐===？

==的隐式类型转换规则非常复杂且反直觉，容易导致 Bug。

// 令人困惑的 == 行为console.log(0==false);// true (false -> 0)console.log(''==0);// true ('' -> 0)console.log(''==false);// true (两边都转成 0)console.log(null==undefined);// true (特殊规则)console.log([]==false);// true ([] -> "" -> 0)console.log([]==0);// true// 使用 === 则非常清晰console.log(0===false);// falseconsole.log(''===0);// falseconsole.log(null===undefined);// false

最佳实践：永远优先使用===和!==。只有在明确需要类型转换的极少数场景下才使用==。

2. 大小比较运算符

比较时的类型转换陷阱

当比较不同类型时，JavaScript 会尝试将它们转换为数字进行比较。

console.log('5'>3);// true ('5' -> 5)console.log('10'>2);// true ('10' -> 10)console.log('10'>'2');// false (字符串比较是按字符编码逐位比较，'1' < '2')console.log(true>0);// true (true -> 1)console.log(false<1);// true (false -> 0)console.log(''<1);// true ('' -> 0)console.log('a'>1);// false ('a' -> NaN, NaN 与任何数比较都是 false)

注意：字符串比较是字典序（逐字符比较 ASCII/Unicode 码），不是数值大小。

• '10' < '2'是true，因为'1'的编码小于'2'。
• 如果需要数值比较，请确保两边都是数字：Number('10') > Number('2')。

3. 特殊值比较

• NaN(Not a Number)：

  • NaN与任何值（包括它自己）比较都返回false。

  console.log(NaN==NaN);// falseconsole.log(NaN===NaN);// false// 判断 NaN 的正确方法console.log(Number.isNaN(NaN));// true (推荐)console.log(isNaN(NaN));// true (旧方法，会尝试转换类型)

• null和undefined：

  • null == undefined返回true。
  • null === undefined返回false。
  • 它们与其他任何值比较（除了彼此）都返回false。

  console.log(null==undefined);// trueconsole.log(null>0);// falseconsole.log(null>=0);// true (null 转为 0)

二、逻辑运算符 (Logical Operators)

逻辑运算符用于组合布尔值，或者在表达式中返回非布尔值。

1. 逻辑与 (&&)

• 规则：如果第一个操作数为真，返回第二个操作数；否则返回第一个操作数。
• 短路特性：如果第一个操作数为假，不会计算第二个操作数。

// 返回第一个假值console.log(false&&"Hello");// falseconsole.log(0&&"Hello");// 0console.log(null&&"Hello");// nullconsole.log(""&&"Hello");// ""// 返回第二个值（如果第一个为真）console.log(true&&"Hello");// "Hello"console.log(1&&2);// 2console.log("Hi"&&"World");// "World"// 常用场景：条件执行// 只有当 user 存在时，才访问 user.nameletuser=null;letname=user&&user.name;// name 为 null，不会报错

2. 逻辑或 (||)

• 规则：如果第一个操作数为真，返回第一个操作数；否则返回第二个操作数。
• 短路特性：如果第一个操作数为真，不会计算第二个操作数。

// 返回第一个真值console.log(true||"World");// trueconsole.log(1||2);// 1console.log("Hi"||"World");// "Hi"// 返回第二个值（如果第一个为假）console.log(false||"World");// "World"console.log(0||10);// 10console.log(null||"Default");// "Default"// 常用场景：设置默认值letusername="";letdisplayName=username||"Guest";// "Guest"

3. 空值合并运算符 (??) - ES2020

• 规则：如果左侧是null或undefined，返回右侧；否则返回左侧。
• 区别：||会把0,"",false视为假值，而??只关心null和undefined。

letcount=0;letprice="";letisActive=false;// 使用 || (会错误地覆盖有效值)console.log(count||10);// 10 (0 被当作假值)console.log(price||"N/A");// "N/A" (空字符串被当作假值)console.log(isActive||true);// true// 使用 ?? (正确保留有效值)console.log(count??10);// 0 (0 是有效值)console.log(price??"N/A");// "" (空字符串是有效值)console.log(isActive??true);// false// 推荐：设置默认值时使用 ??letconfig={timeout:0};lettimeout=config.timeout??3000;// 0 (而不是 3000)

4. 逻辑非 (!)

• 规则：将操作数转换为布尔值并取反。
• 双重非 (!!)：将任意值转换为布尔值。

console.log(!true);// falseconsole.log(!0);// trueconsole.log(!"Hello");// falseconsole.log(!null);// true// 转换为布尔值console.log(!!"Hello");// trueconsole.log(!!0);// falseconsole.log(!!null);// false

三、逻辑运算符的短路求值 (Short-Circuit Evaluation)

这是逻辑运算符最强大的特性，常用于优化性能和简化代码。

1.&&的短路

如果左边是假值，右边根本不会执行。

// 防止访问 null/undefined 属性functiongetName(user){returnuser&&user.profile&&user.profile.name;}// 传统写法// if (user && user.profile) { return user.profile.name; }// return undefined;

2.||的短路

如果左边是真值，右边根本不会执行。

// 避免执行昂贵的函数调用letresult=expensiveCheck()||defaultValue;// 如果 expensiveCheck() 返回真值，defaultValue 不会被计算

3. 结合性

逻辑运算符是从左到右结合的。

// 等价于 (a && b) && cletresult=a&&b&&c;// 等价于 (a || b) || cletresult=a||b||c;

四、三元运算符 (Ternary Operator)

唯一的三目运算符，是if...else的简写。

语法：条件 ? 表达式1 : 表达式2

letage=20;letstatus=age>=18?"成年":"未成年";console.log(status);// "成年"// 嵌套使用 (不推荐，降低可读性)letscore=85;letgrade=score>=90?"A":score>=80?"B":"C";

与逻辑运算符的对比：

• 三元运算符返回值。
• 逻辑运算符返回操作数的值（不一定是布尔值）。

// 三元letx=a>b?1:2;// 逻辑或 (如果 a > b 为真，返回 1，否则返回 2)// 注意：如果 a > b 为真，但 1 是假值 (不可能)，逻辑或的行为会不同lety=(a>b)&&1||2;// 这种写法不推荐，容易出错

五、常见陷阱与最佳实践

1. 陷阱：&&和||的返回值不是布尔值

letresult="Hello"&&"World";console.log(result);// "World" (不是 true)if(result){console.log("Truthy");// 会执行}

建议：如果需要布尔值，使用!!转换：let bool = !!(a && b);

2. 陷阱：0和""在||中失效

letcount=0;letdisplay=count||"No count";// 显示 "No count" (错误)// 应该使用 ??letdisplay=count??"No count";// 显示 0 (正确)

3. 陷阱：字符串比较

console.log("10">"2");// false (字符串比较)console.log(Number("10")>Number("2"));// true (数值比较)

4. 最佳实践总结

1. 比较：始终使用===和!==。
2. 默认值：
   • 如果0,"",false是有效值，使用??。
   • 如果0,"",false应被视为“无值”，使用||。
3. 安全访问：使用&&进行短路保护（如obj && obj.prop）。
4. 可读性：避免过度嵌套的三元运算符或复杂的逻辑表达式。

六、速查表

掌握这些细节，你的 JavaScript 代码将更加健壮、简洁且不易出错！