JavaScript相等判断的避坑实战指南
JS中的相等性
1、严格相等(===)
严格相等本质上是判断一个值是否与自身相等,在比较前不进行隐式类型转换。当被比较的两个值类型相同,值也相同,且不是Number类型时,这两个值是全等的。当两个值类型是Number时,我们需要注意NaN,NaN和NaN不相等,+0和-0全等,其余情况,只要值相等,就是全等的。
NaN === NaN //false +0 === -0 // true undefined === undefined //true null === null //true undefined === null //false ({}) === {} //false 3 === '3' //false 3 === 3 //true true === true //true false === 0 //false
2、非严格相等(抽象相等)(==)
判断比较的两个值是否相等,在比较前会转化为相同的类型,转换类型后,和严格相等(===)比较规则一致。
比较规则(A/B) | undefined | null | Number | String | Boolean | Object |
---|---|---|---|---|---|---|
undefined | true | true | false | false | false | false |
null | true | true | false | false | false | false |
Number | false | false | A === B | toNumber(B)===A | toNumber(B)===A | toPrimetive(B) == A |
String | false | false | toNumber(A)===B | A===B | toNumber(A)===toNumber(B) | toPrimetive(B) == A |
Boolean | false | false | toNumber(A)===B | toNumber(A)===toNumber(B) | A===B | toPrimetive(B) == toNumber(A) |
Object | false | false | toPrimitive(A) == B | toPrimitive(A) == B | toPrimetive(A) == toNumber(B) | A===B |
null == undefined // true null == 0 // false null == '' // false null == 'null' //false null == false // false null == [] //false null == {} //false null == NaN //false undefined == 0 //false undefined == '' //false undefined == 'undefined' //false undefined == false //false undefined == [] //false undefined == {} //false undefined == NaN //false '' == 0 //true '' == false //true '' == [] //true '' == {} // false 0 == false // true 0 == [] // true 0 == {} // false true == '1' //true true == 'true' //false true == 1 // true true == [] //false false == [] //true true == {} //false ([]) == [] //false ({}) == {} //false 3 == '3' //true NaN == NaN // false +0 == -0 // true
总结规律可得: undefined和null认为值相等,但是当undefined和null与其他类型进行相等比较时,不进行隐式类型转换,与其他的任何类型值都不相等,所有对象与undefined和null不相等,但是有个特例,如:document.all == undefined
和document.all == null
均为true
严格相等和非严格相等比较可得:严格相等的结果更具预测性,且无需进行类型转换,效率也更高
3、同值相等
同值相等是用来判断两个值是否是同一个值,通过Object.is()
来判断,是es6新方法。有点类似于严格相等,不会对传入的两个参数值进行隐式类型转换,但是与严格相等又不完全相同,在对待+0、-0以及NaN上不一致
- 都是undefined
- 都是null
- 相同的两个字符串
- 都是true或者都是false
- 引用值相同的两个对象
- 都是NaN
- 都是不为NaN且不为0的值相同的数字
- 都是+0或者都是-0
Object.is(NaN, NaN) //true Object.is(NaN, 0 / 0) // true Object.is(+0, -0) // false Object.is(+0, +0) //true Object.is(undefined, undefined) //true Object.is(null, null) //true Object.is(undefined, null) //false Object.is({}, {}) //false Object.is(3, '3') //false Object.is(3, 3) //true Object.is(true, true) //false Object.is(false, 0) //false
4、零值相等
**与同值相等类似,认为+0和-0相等**
Object.is()实现方案
// 实现方案: Object.defineProperty(Object, "is", { value: function (x, y) { if (x === y) { // 需要区分一下+0和-0 return x !== 0 || 1 / x === 1 / y } else { // 需要区分一下NaN return x !== x && y !== y } } })
总结
到此这篇关于JavaScript相等判断避坑的文章就介绍到这了,更多相关JavaScript相等判断避坑内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://juejin.cn/post/7135007326607507464
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 使用 conditional comment 来判断 IE 的版本。嗯,是早早有人提出,但没有认真看代码。昨天刚好在看 CSS3 PIE 的时候看到,觉得是不是不靠谱。今天看到 Paul Irish 也提起,那么,推荐一下吧。这是作者博客上写的:复制代码 代码...2014-05-31
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 下面小编就为大家分享一篇c# 判断是否为空然后赋值的4种实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-25
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 具体详情请看下文小编给大家带来的知识点。同编写程序类似,存储过程中也有对应的条件判断,功能类似于if、switch。在MySql里面对应的是IF和CASE1、IF判断IF判断的格式是这样的:IF expression THEN commands [ELSEIF ex...2015-10-21
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
废话不多说了,直接给大家贴代码了。<?php class test{} $a1 = null; $a2 = ""; //$a3 = $a4 = 0; $a5 = '0'; $a6 = false; $a7 = array(); //var $a8; $a9 = new test(); for ($i=1; $i <=9 ; $i++) {...2015-11-24- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20
- 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29
- 这篇文章主要介绍了java正则表达式判断前端参数修改表中另一个字段的值,需要的朋友可以参考下...2021-05-07
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09