JavaScript系列之比较运算符

---

1、概述

比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

2、分类

2.1、小于（<）

2.1.1、概述

如果左操作数小于右操作数，则小于操作符（<）返回true，否则返回false。

2.1.2、语法

x < y

2.1.3、描述

操作数的比较使用Abstract Relational Comparison算法，大致总结如下：

• 首先，使用Symbol将对象转换为基本体。带有hint参数的基元为“number”。
• 如果两个值都是字符串，则根据它们所包含的Unicode码位的值作为字符串进行比较。
• 否则JavaScript会尝试将非数字类型转换为数字值
  • 布尔值true和false分别转换为1和0。
  • null被转换为0。
  • undefined被转换为NaN。
  • 字符串根据它们包含的值进行转换，如果它们不包含数值，则转换为NaN。
• 如果任何一个值是NaN，操作符返回false。
• 否则，这些值将作为数值进行比较。

2.1.4、示例

2.1.4.1、字符串的比较

console.log("a" < "b"); // true
console.log("a" < "a"); // false
console.log("a" < "3"); // false

2.1.4.2、字符串和数字的比较

console.log("5" < 3); // false
console.log("3" < 3); // false
console.log("3" < 5); // true

console.log("hello" < 5); // false
console.log(5 < "hello"); // false

console.log("5" < 3n); // false
console.log("3" < 5n); // true

2.1.4.3、数字间的比较

console.log(5 < 3); // false
console.log(3 < 3); // false
console.log(3 < 5); // true

2.1.4.4、数字和 BigInt 数据的比较

console.log(5n < 3); // false
console.log(3 < 5n); // true

2.1.4.5、Boolean, null, undefined, NaN 的比较

console.log(true < false); // false
console.log(false < true); // true

console.log(0 < true); // true
console.log(true < 1); // false

console.log(null < 0); // false
console.log(null < 1); // true

console.log(undefined < 3); // false
console.log(3 < undefined); // false

console.log(3 < NaN); // false
console.log(NaN < 3); // false

2.2、大于（>）

2.2.1、概述

当左边操作数大于右边的时候，大于（>）运算符返回true，否则返回false。

2.2.2、语法

x > y

2.2.3、描述

操作数之间按照 Abstract Relational Comparison 算法进行比较。进一步了解该算法，请参考 小于 运算符的相关文档。

2.2.4、示例

2.2.4.1、字符串的比较

console.log("a" > "b"); // false
console.log("a" > "a"); // false
console.log("a" > "3"); // true

2.2.4.2、字符串和数字的比较

console.log("5" > 3); // true
console.log("3" > 3); // false
console.log("3" > 5); // false

console.log("hello" > 5); // false
console.log(5 > "hello"); // false

console.log("5" > 3n); // true
console.log("3" > 5n); // false

2.2.4.3、数字间的比较

console.log(5 > 3); // true
console.log(3 > 3); // false
console.log(3 > 5); // false

2.2.4.4、数字和 BigInt 数据的比较

console.log(5n > 3); // true
console.log(3 > 5n); // false

2.2.4.5、Boolean, null, undefined, NaN 的比较

console.log(true > false); // true
console.log(false > true); // false

console.log(true > 0); // true
console.log(true > 1); // false

console.log(null > 0); // false
console.log(1 > null); // true

console.log(undefined > 3); // false
console.log(3 > undefined); // false

console.log(3 > NaN); // false
console.log(NaN > 3); // false

2.3、大于或等于（>=）

2.3.1、概述

如果左操作数大于或等于右操作数，大于或等于操作符（>=）则返回true，否则返回false。

2.3.2、语法

x >= y

2.3.3、描述

操作数之间按照 Abstract Relational Comparison 算法进行比较。进一步了解该算法，请参考 小于 运算符的相关文档。

2.3.4、示例

2.3.4.1、字符串的比较

console.log("a" >= "b"); // false
console.log("a" >= "a"); // true
console.log("a" >= "3"); // true

2.3.4.2、字符串和数字的比较

console.log("5" >= 3); // true
console.log("3" >= 3); // true
console.log("3" >= 5); // false

console.log("hello" >= 5); // false
console.log(5 >= "hello"); // false

2.3.4.3、数字间的比较

console.log(5 >= 3); // true
console.log(3 >= 3); // true
console.log(3 >= 5); // false

2.3.4.4、数字和 Bigint 数据的比较

console.log(5n >= 3); // true
console.log(3 >= 3n); // true
console.log(3 >= 5n); // false

2.3.4.5、Boolean, null, undefined, NaN 的比较

console.log(true >= false); // true
console.log(true >= true); // true
console.log(false >= true); // false

console.log(true >= 0); // true
console.log(true >= 1); // true

console.log(null >= 0); // true
console.log(1 >= null); // true

console.log(undefined >= 3); // false
console.log(3 >= undefined); // false

console.log(3 >= NaN); // false
console.log(NaN >= 3); // false

2.4、小于或等于（<=）

2.4.1、概述

如果左操作数小于或等于右操作数，则小于或等于操作符（<=）返回true，否则返回false。

2.4.2、语法

x <= y

2.4.3、描述

操作数之间按照 Abstract Relational Comparison 算法进行比较。进一步了解该算法，请参考 小于 运算符的相关文档。

扫描二维码关注公众号，回复： 14356369 查看本文章

2.4.4、示例

2.4.4.1、字符串的比较

console.log("a" <= "b"); // true
console.log("a" <= "a"); // true
console.log("a" <= "3"); // false

2.3.4.2、字符串和数字的比较

console.log("5" <= 3); // false
console.log("3" <= 3); // true
console.log("3" <= 5); // true

console.log("hello" <= 5); // false
console.log(5 <= "hello"); // false

2.3.4.3、数字间的比较

console.log(5 <= 3); // false
console.log(3 <= 3); // true
console.log(3 <= 5); // true

2.3.4.4、数字和 Bigint 数据的比较

console.log(5n <= 3); // false
console.log(3 <= 3n); // true
console.log(3 <= 5n); // true

2.3.4.5、Boolean, null, undefined, NaN 的比较

console.log(true <= false); // false
console.log(true <= true); // true
console.log(false <= true); // true

console.log(true <= 0); // false
console.log(true <= 1); // true

console.log(null <= 0); // true
console.log(1 <= null); // false

console.log(undefined <= 3); // false
console.log(3 <= undefined); // false

console.log(3 <= NaN); // false
console.log(NaN <= 3); // false

2.5、相等（==）

2.5.1、概述

等于运算符（）检查其两个操作数是否相等，并返回Boolean结果。与严格相等运算符（=）不同，它会尝试强制类型转换并且比较不同类型的操作数。

2.5.2、语法

x == y

2.5.3、描述

相等运算符（==和!=）使用抽象相等比较算法比较两个操作数。可以大致概括如下：

• 如果两个操作数都是对象，则仅当两个操作数都引用同一个对象时才返回true。
• 如果一个操作数是null，另一个操作数是undefined，则返回true。
• 如果两个操作数是不同类型的，就会尝试在比较之前将它们转换为相同类型：
  • 当数字与字符串进行比较时，会尝试将字符串转换为数字值。
  • 如果操作数之一是Boolean，则将布尔操作数转换为 1 或 0。
    • 如果是true，则转换为1。
    • 如果是 false，则转换为0。
  • 如果操作数之一是对象，另一个是数字或字符串，会尝试使用对象的valueOf()和toString()方法将对象转换为原始值。
• 如果操作数具有相同的类型，则将它们进行如下比较：
  • String：true仅当两个操作数具有相同顺序的相同字符时才返回。
  • Number：true仅当两个操作数具有相同的值时才返回。+0并被-0视为相同的值。如果任一操作数为NaN，则返回false。
  • Boolean：true仅当操作数为两个true或两个false时才返回true。

此运算符与严格等于（===）运算符之间最显着的区别在于，严格等于运算符不尝试类型转换。相反，严格相等运算符始终将不同类型的操作数视为不同。

2.5.4、示例

2.5.4.1、没有类型转换的比较

1 == 1; // true
"hello" == "hello"; // true

2.5.4.2、与类型转换比较

"1" == 1; // true
1 == "1"; // true
0 == false; // true
0 == null; // false
0 == undefined; // false
null == undefined; // true

const number1 = new Number(3);
const number2 = new Number(3);
number1 == 3; // true
number1 == number2; // false

2.5.4.3、对象比较

const object1 = {
    
     key: "value" };
const object2 = {
    
     key: "value" };

object1 == object2; // false
object2 == object2; // true

2.5.4.4、比较字符串和 String 对象

请注意，使用构造的字符串new String()是对象。如果将其中之一与字符串文字进行比较，则该String对象将被转换为字符串文字并对其内容进行比较。但是，如果两个操作数都是String对象，则将它们作为对象进行比较，并且必须引用相同的对象才能进行比较：

const string1 = "hello";
const string2 = String("hello");
const string3 = new String("hello");
const string4 = new String("hello");

console.log(string1 == string2); // true
console.log(string1 == string3); // true
console.log(string2 == string3); // true
console.log(string3 == string4); // false
console.log(string4 == string4); // true

2.5.4.5、比较日期和字符串

const d = new Date("December 17, 1995 03:24:00");
const s = d.toString(); // for example: "Sun Dec 17 1995 03:24:00 GMT-0800 (Pacific Standard Time)"
console.log(d == s); //true

2.6、不等于（!=）

2.6.1、概述

不等于运算符（!=）检查其两个操作数是否不相等，并返回布尔结果。与严格的不等式运算符不同，它尝试转换和比较不同类型的操作数。

2.6.2、语法

x != y

2.6.3、描述

不等式运算符检查其操作数是否不相等。这是等于运算符的取反，因此以下两行将始终给出相同的结果：

x != y
!(x == y)

有关比较算法的详细信息，请参见等于运算符的页面。

与等于运算符一样，不等于运算符将尝试转换和比较不同类型的操作数：

3 != "3"; // false

为避免这种情况，并要求将不同类型视为不同，请使用严格的不等于运算符：

3 !== "3"; // true

2.6.4、示例

2.6.4.1、没有类型转换的比较

1 != 2; // true
"hello" != "hola"; // true

1 != 1; // false
"hello" != "hello"; // false

2.6.4.2、与类型转换比较

"1" != 1; // false
1 != "1"; // false
0 != false; // false
0 != null; // true
0 != undefined; // true
0 != !!null; // false, look at Logical NOT operator
0 != !!undefined; // false, look at Logical NOT operator
null != undefined; // false

const number1 = new Number(3);
const number2 = new Number(3);
number1 != 3; // false
number1 != number2; // true

2.6.4.3、对象比较

const object1 = {
    
     key: "value" };
const object2 = {
    
     key: "value" };

object1 != object2; // true
object2 != object2; // false

2.7、严格相等（===）

2.7.1、概述

全等运算符（===）会检查它的两个操作数是否相等，并且返回一个布尔值结果。与相等运算符不同，全等运算符总是认为不同类型的操作数是不同的。

2.7.2、语法

x === y

2.7.3、描述

全等运算符（===和 !==）使用全等比较算法来比较两个操作数。

• 如果操作数的类型不同，则返回 false。
• 如果两个操作数都是对象，只有当它们指向同一个对象时才返回 true。
• 如果两个操作数都为 null，或者两个操作数都为 undefined，返回 true。
• 如果两个操作数有任意一个为 NaN，返回 false。
• 否则，比较两个操作数的值：
  • 数字类型必须拥有相同的数值。+0 和 -0 会被认为是相同的值。
  • 字符串类型必须拥有相同顺序的相同字符。
  • 布尔运算符必须同时为 true 或同时为 false。

全等运算符与相等运算符（==）最显著的区别是，如果操作数的类型不同，== 运算符会在比较之前尝试将它们转换为相同的类型。

2.7.4、示例

2.7.4.1、比较相同类型的操作数

console.log("hello" === "hello"); // true
console.log("hello" === "hola"); // false

console.log(3 === 3); // true
console.log(3 === 4); // false

console.log(true === true); // true
console.log(true === false); // false

console.log(null === null); // true

2.7.4.2、比较不同类型的操作数

console.log("3" === 3); // false

console.log(true === 1); // false

console.log(null === undefined); // false

2.7.4.3、比较对象

const object1 = {
    
    
	name: "hello"
};

const object2 = {
    
    
	name: "hello"
};

console.log(object1 === object2); // false
console.log(object1 === object1); // true

2.8、严格不相等（!==）

2.8.1、概述

严格不等式操作符（!==）检查它的两个对象是否不相等，返回一个布尔结果。与不等式运算符不同，严格不等式运算符总是认为不同类型的对象是不同的。

2.8.2、语法

x !== y

2.8.3、描述

严格不等式运算符检查其对象是否不相等。它是严格相等运算符的否定，因此下面两行总是会给出相同的结果：

x !== y
!(x === y)

有关比较算法的详细信息，请参阅严格相等运算符的页面。

与严格相等运算符一样，严格不等运算符始终认为不同类型的对象是不同的：

3 !== "3"; // true

2.8.4、示例

2.8.4.1、比较相同类型的对象

console.log("hello" !== "hello"); // false
console.log("hello" !== "hola"); // true

console.log(3 !== 3); // false
console.log(3 !== 4); // true

console.log(true !== true); // false
console.log(true !== false); // true

console.log(null !== null); // false

2.8.4.2、比较不同类型的对象

console.log("3" !== 3); // true

console.log(true !== 1); // true

console.log(null !== undefined); // true

2.8.4.3、比较 Object 对象

const object1 = {
    
    
	name: "hello"
};

const object2 = {
    
    
	name: "hello"
};

console.log(object1 !== object2); // true
console.log(object1 !== object1); // false

---

后记

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！