==和===的用法

440 阅读3分钟

1. Equality (==)

相等运算符==检查其两个操作数是否相等,返回布尔结果

  • 如果操作数都是对象,则仅当两个操作数都引用同一个对象时才返回true
  • 如果一个操作数是null而另一个是undefined,则返回true。其他值和它们进行比较都返回假值。
  • 如果操作数得到类型不同,请在比较之前舱室将他们转换为相同的类型:
    • 数字字符串进行比较时,将字符串转换为数字之后再进行比较(使用Number()
      • Number("") 为 0
      • Number([]) 为 0
      • Number({}) 为 NaN
    • 如果操作数之一是布尔值,则将布尔操作数转换为1(如果是true)和+0(如果是false
    • 如果操作数之一是对象而另一个是数字或字符串,需要将对象转换为数字,使用对象的valueOf()toString()方法将对象转换为原始值
  • 如果操作数的类型相同,则按照一下规则比较:
    • 字符串:仅当两个操作数具有相同顺序的相同字符时才返回true
    • 数字:仅当两个操作数具有相同的值时才返回true+0-0被视为相同的值。如果任一操作数为NaN(是数字类型但不是数字),则返回falseNaN 本身也不等于 NaN
    • 布尔值:仅当操作数是both true或者false返回true,反之返回false

1.1 实例

1.1.1 例1

console.log( [] == 0 );   //true

明显左右两边操作数类型不同,左边是对象,右边是数字。

如果一个操作数是对象,另一个操作数不是,则调用对象的valueOf()方法,如果对象没有valueOf()方法,则调用 toString()。

而对于空数组,[].toString() -> '' (返回的是空字符串),也就是 [] == 0相当于 '' == 0,此时变成字符串与数字之间的比较,接下来将字符串转换为数字。Number('') -> 返回的是 0。

[] == 0 -> '' == 0 -> 0 == 0 -> true

image.png

1.1.2 例2

console.log( ![] == 0 );   //true

①根据运算符优先级 ,!的优先级是大于 == 的,所以先会执行 ![ ] ,!可将变量转换成boolean类型,null、undefined、NaN以及空字符串('')等假值 取反都为true,其余(真值)都为false。 所以 ! [] 运算后的结果就是 false。相当于false == 0

②按照上面的规则(第三条),将false转化成0,相当于0 == 0,返回true

![] == 0 -> false == 0 -> 0 == 0 -> true

1.1.3 例3

console.log( [] == ![] );   //true

[] == ![] -> [] == 0 -> '' == 0 -> 0 ==0 =>true

1.1.4 例4

console.log( [] == [] );   //false

[]是新建一个数组数组对象,两边是2个不同对象比较,因此结果为false

1.1.5 例5

console.log( {} == !{} );   //false

{}是真值,取反为false,且 {}.toString() -> NaN

{} == ! {} -> {} == false -> {} == 0 -> NaN == 0 -> false

1.1.6 例6

console.log( {} == {} );   //false

这是两个不同的对象,故是false

2. Strict equality(===)

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

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

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

const object1 = {
  name: "hello"
}
const object2 = {
  name: "hello"
}
console.log(object1 === object2);  // false
console.log(object1 === object1);  // true

3. 对比

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