JavaScript/TypeScript里 == 和 === 的区别

举报
gentle_zhou 发表于 2022/03/09 15:55:00 2022/03/09
【摘要】 在JS/TS项目里,除了能看到`==`操作符来判断两个变量是否相等外,我们还会看到`===`操作符,这两者有什么区别吗?

在JS/TS项目里,除了能看到==操作符来判断两个变量是否相等外,我们还会看到===操作符,这两者有什么区别吗?

先上结论,

  • 对于String, number这些基础类型,==操作符会先把两边的变量进行类型强制转换成相同的类型再比较是否相等;===操作符则不会进行类型转换,而是直接进行比较。
  • 对于array, object这些高级类型,=====是没有区别的,因为它们比较的是 “指针地址” 。
  • 对于基础类型和高级类型,=====是有区别的;==操作符会先把高级类型转换为基础类型之后,进行值的比较;===操作符则不会进行转换,类型不同,直接返回false

也就是说,`==`操作符只要求比较两个变量的值是否相等,`===`操作符则是要求两个变量的值和类型都要相同;类似地,`!=`操作符会去做类型强制转换,`!==`操作符则不会转换类型。

我们写个基础类型变量的代码示例一下:

66 ==  '66'; // 返回true

66 === '66' // 返回false

==操作符会把第一行里的字符串转换成数字,与66再进行比较,值相等,于是返回true;===操作符则不会做类型转换,因为左边数字,右边字符串,两者类型不同,就会返回false。

注意
对于特殊值NaN(Not a Number),表示非数字,NaN和任何数(包括它自己)做相等比较,都会返回false,所以判断NaN最好用isNaN()函数;
而对于undefined和null,两者的值相比较,会返回true。
代码示例如下:

NaN == 6; // 返回false
NaN === NaN; // 返回false
null == undefined; // 返回true
null === undefined; // 返回false

最后, 由于==!=操作符带来的类型隐式转换规则非常繁琐,还有为了避免数据类型混淆导致出现bug,还是推荐使用===操作符和!==操作符

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。