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

来源:脚本之家  责任编辑:小易  
目录
JS中的相等性1、严格相等(===)2、非严格相等(抽象相等)(==)3、同值相等4、零值相等Object.is()实现方案总结

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相等判断避坑内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

您可能感兴趣的文章:JavaScript中判断两个字符串是否相等的方法JS判断两个对象内容是否相等的方法示例判断JavaScript中的两个变量是否相等的操作符Java与JavaScript中判断两字符串是否相等的区别基于JavaScript判断两个对象内容是否相等Javascript判断对象是否相等实现代码实例分析JS中的相等性判断===、 ==和Object.is()

  • 本文相关:
  • es6使用 array.includes 处理多重条件用法实例分析
  • 微信小程序wx.navigateto方法里的events参数使用详情及场景
  • javascript截取、切割字符串的技巧
  • js连接sql数据库与access数据库的方法实例
  • js简单实现自动生成表格功能示例
  • javascript表格隔行变色和tab标签页特效示例【附jquery版】
  • js如何获取地址栏的参数实例讲解
  • javascript实现横向滑出的多级菜单效果
  • js判断输入字符串是否为空、空格、null的方法总结
  • ie与firefox下dhtml的一些区别小结
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧javascript中判断两个字符串是否相等的方法js判断两个对象内容是否相等的方法示例判断javascript中的两个变量是否相等的操作符java与javascript中判断两字符串是否相等的区别基于javascript判断两个对象内容是否相等javascript判断对象是否相等实现代码实例分析js中的相等性判断===、 ==和object.is()es6使用 array.includes 处理多重条件用法实例分析微信小程序wx.navigateto方法里的events参数使用详情及场景javascript截取、切割字符串的技巧js连接sql数据库与access数据库的方法实例js简单实现自动生成表格功能示例javascript表格隔行变色和tab标签页特效示例【附jquery版】js如何获取地址栏的参数实例讲解javascript实现横向滑出的多级菜单效果js判断输入字符串是否为空、空格、null的方法总结ie与firefox下dhtml的一些区别小结js删除数组里的某个元素方法js刷新页面方法大全js中settimeout()的用法详解js页面跳转常用的几种方式js截取字符串常用方法详细整理js数组与字符串的相互转换方法js保留两位小数方法总结js设置cookie、读取cookie、删除cookiejs打开新窗口的2种方式js 将json字符串转换为json对象的方法解析基于js+canvas的lucky-canvas?抽奖功能文字溢出实现溢出的部分再放入一个新生成的div中具体代码javascript自定义事件详解浅谈webpack构建工具配置和常用插件总结javascript实现点击单选按钮改变输入框中文本域内容的方法js实现前端页面的搜索功能五个基于js实现的炫酷登录页面js数组进阶示例【数组的几种函数用法】浅谈javascript中的call、apply、bindjs改变文章字体大小的实例代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved