复习JS中==和===和Object.is()的区别,你都能答对吗?

1,773 阅读2分钟

JavaScript中提供了两种值的比较方式,严格比较(===!==)和类型转换比较(==!=),严格比较要求变量的类型一致,而非严格比较会根据变量的值进行类型的转换,也就是我们俗称的隐式类型转换。在ES6中又新增了Object.is()方法,它的特性和===基本类似。

什么是==

==是一个比较运算符,在比较前会转换成相同类型。

所以,在数字和字符串相比较时,JS会将字符串先转换为数字,空字符串转换为0,没有数值的字符串会被转换为NaN,然后再进行比较。

什么是===

===是JS中的严格比较运算符,对于类型不相等时返回false。类型相等时再去比较值是否相等。

为什么使用==

在一门编程语言中,有一种比较运算符就够了,为什么在JS中有两个呢?这也正是JS即灵活又让人头疼的地方,我们可以用==来比较两个类型不同的变量,因为它会帮我们做类型转换,再进行比较。但这也是大多数人所吐槽的地方,因为它的转换规则有时让人难以琢磨,让人更加难以学习。

也有很多公司通过ESLint规则,禁止在项目中使用==进行变量比较,因为不了解==运算符的人很容易写出bug。强制使用===比较,手动去转换类型。这样在其他人维护你的代码时也清楚的知道你做了什么。

== 对比 ===

下面是一些神奇例子,你都能答对吗?

0 == false   // true
0 === false  // false
0 == ''  // true
0 == '0' // true

1 == "1"     // true
1 === "1"    // false

null == undefined // true
null === undefined // false

'0' == false // true
'0' === false // false
'' == '0' // false
' \t\r\n ' == 0 // true

false == 'false' // false
false == '0' // true
false == undefined // false
false == null // false


[] == [] //false
[] === [] //false, 因为在内存中存储地址不一样
{} == {} //false
{} === {} //false, 同理,因为在内存中存储地址不一样

NaN == NaN //false, NaN不等于任何值,包括NaN
NaN === NaN //false, NaN不等于任何值,包括NaN

Equality Comparison Table

Object.is()

Object.is()是ES6新增的方法,用来比较两个值是否是严格相等,与===大致一样,下面列出的是和===不一样的几个区别。

  • +0不等于-0
  • 0不等于-0
  • NaN等于NaN
+0 === -0 // true
0 === -0 // true
NaN === NaN // false

Object.is(0, -0) // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

总结

看了上面令人头疼的==比较,我建议你永远不要使用==。相反,始终去用===和!==。

如果有更有趣例子,欢迎评论区告诉我,我会在内容补上。

如果本文对你能起到作用,您的点赞、评论、关注是对我最大的鼓励 O(∩_∩)O👍👍👍