JavaScript相等判断的避坑实战指南

 更新时间:2022年8月25日 22:14  点击:299 作者:梦想敲木鱼

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)undefinednullNumberStringBooleanObject
undefinedtruetruefalsefalsefalsefalse
nulltruetruefalsefalsefalsefalse
NumberfalsefalseA === BtoNumber(B)===AtoNumber(B)===AtoPrimetive(B) == A
StringfalsefalsetoNumber(A)===BA===BtoNumber(A)===toNumber(B)toPrimetive(B) == A
BooleanfalsefalsetoNumber(A)===BtoNumber(A)===toNumber(B)A===BtoPrimetive(B) == toNumber(A)
ObjectfalsefalsetoPrimitive(A) == BtoPrimitive(A) == BtoPrimetive(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 == undefineddocument.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

[!--infotagslink--]

相关文章

  • JavaScript判断浏览器及其版本信息

    本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
  • js实现浏览器打印功能的示例代码

    这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
  • Nest.js参数校验和自定义返回数据格式详解

    这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
  • 一个奇葩的最短的 IE 版本判断JS脚本

    使用 conditional comment 来判断 IE 的版本。嗯,是早早有人提出,但没有认真看代码。昨天刚好在看 CSS3 PIE 的时候看到,觉得是不是不靠谱。今天看到 Paul Irish 也提起,那么,推荐一下吧。这是作者博客上写的:复制代码 代码...2014-05-31
  • 利用JS实现点击按钮后图片自动切换的简单方法

    下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
  • c# 判断是否为空然后赋值的4种实现方法

    下面小编就为大家分享一篇c# 判断是否为空然后赋值的4种实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-25
  • 详解前端安全之JavaScript防http劫持与XSS

    作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
  • js实现调用网络摄像头及常见错误处理

    这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
  • JS实现随机生成验证码

    这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
  • js组件SlotMachine实现图片切换效果制作抽奖系统

    这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
  • vue.js 表格分页ajax 异步加载数据

    Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
  • 基于JavaScript实现文字超出部分隐藏

    这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
  • js实现列表按字母排序

    这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
  • MySql存储过程之逻辑判断和条件控制

    具体详情请看下文小编给大家带来的知识点。同编写程序类似,存储过程中也有对应的条件判断,功能类似于if、switch。在MySql里面对应的是IF和CASE1、IF判断IF判断的格式是这样的:IF expression THEN commands [ELSEIF ex...2015-10-21
  • JS实现响应鼠标点击动画渐变弹出层效果代码

    这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
  • PHP中empty和isset对于参数结构的判断及empty()和isset()的区别

    废话不多说了,直接给大家贴代码了。<&#63;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实现阿里大鱼短信通知发送

    本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20
  • 浅析AngularJS Filter用法

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29
  • java正则表达式判断前端参数修改表中另一个字段的值

    这篇文章主要介绍了java正则表达式判断前端参数修改表中另一个字段的值,需要的朋友可以参考下...2021-05-07
  • js实现上传图片及时预览

    这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09