码农教程 - 一技在手,衣食无忧! tools

目录

JavaScript 比较

❮ 上一节 下一节 ❯

比较运算符用于测试true或者false。

比较运算符

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

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

Operator Description Comparing Returns 尝试一下
== 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 尝试一下 »

如何使用

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

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

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

逻辑运算符

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

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

Operator Description Example 尝试一下
&& and (x < 10 && y > 1) is true 尝试一下 »
|| or (x == 5 || y == 5) is false 尝试一下 »
! not !(x == y) is true 尝试一下 »

条件（三元）运算符

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

语法

variablename = ( condition) ? value1: value2 

示例

let voteable = (age < 18) ? "Too young":"Old enough";
亲自试一试 »

如果变量age的值小于18，则变量voteable的值为"Too young"，否则voteable的值为"Old enough"。

比较不同类型

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

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

Case Value Try
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。

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

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

空合并运算符 (??)

这个??如果不是，则运算符返回第一个参数无效的（null或者undefined）。

否则它返回第二个参数。

示例

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

可选链接运算符 (?.)

这个?.运算符返回undefined如果一个物体是undefined或者null（而不是抛出错误）。

示例

// 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

通过练习测试一下

练习:

选择正确的比较运算符提醒true， 什么时候x大于y。

x = 10;
y = 5;
alert(x  y);

开始练习 »

❮ 上一节 下一节 ❯