JavaScript 比较和逻辑运算符

比较运算符和逻辑运算符用于测试true或false。

比较运算符

比较运算符在逻辑语句中用于确定变量或值之间的相等或差异。

鉴于此，下表解释了比较运算符：x = 5

| == | equal to | x == 8 | false | 尝试一下 |

| | | x == 5 | true | 尝试一下 |

| | | x == "5" | true | 尝试一下 |

| === | equal value and equal type | x === 5 | true | 尝试一下 |

| | | x === "5" | false | 尝试一下 |

| != | not equal | x != 8 | true | 尝试一下 |

| !== | not equal value or not equal type | x !== 5 | false | 尝试一下 |

| | | x !== "5" | true | 尝试一下 |

| | | x !== 8 | true | 尝试一下 |

| > | greater than | x > 8 | false | 尝试一下 |

| < | less than | x < 8 | true | 尝试一下 |

| >= | greater than or equal to | x >= 8 | false | 尝试一下 |

| <= | less than or equal to | x <= 8 | true | 尝试一下 |

如何使用它

可以在条件语句中使用比较运算符来比较值 并根据结果采取措施：

1

if (age < 18) text = "Too young to buy alcohol";

在本教程的下一章中，您将了解有关条件语句使用的更多信息。

逻辑运算符

逻辑运算符用于确定变量或值之间的逻辑。

鉴于x = 6和y = 3，下表解释了逻辑运算符：

| && | and | (x < 10 && y > 1) is true | 尝试一下 |

| \| | or | (x == 5 \| y == 5) is false | 尝试一下 |

| ! | not | !(x == y) is true | 尝试一下 |

条件（三元）运算符

JavaScript 还包含一个条件运算符，该运算符根据某个条件为变量赋值。

语法

1

variablename = (condition) ? value1:value2 

1

let voteable = (age < 18) ? "Too young":"Old enough";

如果变量 age 的值低于 18，则变量的值可投票 将“太年轻”，否则可投票的值将为“足够老”。

比较不同类型

比较不同类型的数据可能会产生意想不到的结果。

当将字符串与数字进行比较时，JavaScript 会在进行比较时将字符串转换为数字。空字符串转换为 0。非数字字符串转换为NaN，NaN 始终为 false。

| 2 < 12 | true | 尝试一下 |

| 2 < "12" | true | 尝试一下 |

| 2 < "John" | false | 尝试一下 |

| 2 > "John" | false | 尝试一下 |

| 2 == "John" | false | 尝试一下 |

| "2" < "12" | false | 尝试一下 |

| "2" > "12" | true | 尝试一下 |

| "2" == "12" | false | 尝试一下 |

比较两个字符串时，“2”将大于“12”，因为 （按字母顺序）1 小于 2。

为了确保正确的结果，应在比较之前将变量转换为正确的类型：

1
2
3
4
5
6

age = Number(age);  
if (isNaN(age)) {  
  voteable = "Input is not a number";  
} else {  
  voteable = (age < 18) ? "Too young" : "Old enough";  
}

无效合并运算符 （??）

这??如果第一个参数不为空（null或undefined），则运算符返回该参数。

否则，它将返回第二个参数。

1
2
3

let name = null;  
let text = "missing";  
let result = name ?? text;

自 2020 年 3 月起，所有浏览器都支持nullish运算符：

Chrome 80	Edge 80	Firefox 72	Safari 13.1	Opera 67
Feb 2020	Feb 2020	Jan 2020	Mar 2020	Mar 2020

可选的链接运算符 （?.）

这?.如果对象未定义或为 null，则运算符返回 undefined（而不是抛出错误）。

1
2
3
4

// Create an object:  
const car = {type:"Fiat", model:"500", color:"white"};  
// Ask for car name:  
document.getElementById("demo").innerHTML = car?.name;

自 2020 年 3 月起，所有浏览器都支持可选的链接运算符：

Chrome 80	Edge 80	Firefox 72	Safari 13.1	Opera 67
Feb 2020	Feb 2020	Jan 2020	Mar 2020	Mar 2020