实例分析JS中的相等性判断===、 ==和Object.is()


Posted in Javascript onNovember 17, 2019

相信刚接触JS的人都会被他的想等性判断给整糊涂,看看下面代码,你能答对几个?

NaN === NaN // false
NaN == NaN // false
Object.is(NaN, NaN) // true
0 == false // true
1 == true // true
Number(null) === 0 // true
null == 0 // false

Javascript提供了三种不同的值比较操作,分别是严格相等、宽松相等、以及Object.is,希望看完下面的内容,能够彻底弄清楚他的判断逻辑。

1. 严格相等 x === y判断逻辑

1、如果x的数据类型和y的数据类型不相同,返回false;

2、如果x是Number类型

  • x是NaN,返回false
  • y是NaN,返回false
  • x的值和y的值相等,返回true
  • x是+0,y是-0,返回true
  • x是-0,y是+0,返回true
  • 否则返回false

3、其他类型参照SameValueNonNumber(x, y)

  • 断言:x,y不是Number类型;
  • 断言: x,y的数据类型相同;
  • x是undefined, y是undefined return true;
  • x是null, y是null,return true;
  • x是字符串类型,当且仅当x,y字符序列完全相同时(长度相同,每个位置上的字符也相同)返回true, 否则返回false;
  • 如果x是布尔类型,当x,y都为true或者都为false时返回true,否则返回false;
  • 如果x是symbol类型,当x,y是相同的symbol值,返回true,否则返回false;
  • 如果x,y是同一个对象值,返回true,否则返回false;
NaN === NaN // false
undefined === undefined // true
null === null // true
undefined === null // false

2. 宽松相等 x == y

  1. 如果x,y的类型相同,返回x===y的结果;
  2. 如果x是null, y是undefined, 返回true;
  3. 如果x是undefined, y是null, 返回true;
  4. 如果x是数值,y是字符串, 返回x == ToNumber(y);
  5. 如果x是字符串,y是数值, 返回ToNumber(x) == y;
  6. 如果x是布尔类型, 返回ToNumber(x)==y 的结果;
  7. 如果y是布尔类型,返回 x==ToNumber(y) 的结果;
  8. 如果x是String或Number或Symbol中的一种并且Type(y)是Object,返回 x==ToPrimitive(y) 的结果
  9. 如果Type(x)是Object并且Type(y)是String或Number或Symbol中的一种,返回 ToPrimitive(x)==y 的结果
  10. 其他返回false
12 == '0xc' // true, 0xc是16进制
12 == '12' // true
12 == '12c' // false, 说明ToNumber转换是用的Number()方法

注意:

Number(null) === 0
但是
null == 0 // false,

实例分析JS中的相等性判断===、 ==和Object.is()

2.1 ToNumber将一个值转换为数值类型

详情参考数值类型转换

  • 如果是boolean类型, true返回1,false返回0;
  • 如果是数值,只是简单的传入返回;
  • 如果是null,返回0
  • 如果是undefined, 返回NaN;
  • 如果是字符串,字符串如果只包含数字,则将其转换成十进制数;如果是有效的浮点格式,将其转换成对应的浮点数值;如果是二进制或十六进制将其转换成对应的十进制数值;
  • 如果是对象,调用对象的valueOf()方法,然后依照前面规则转换,如果valueOf返回值是NaN,则调用toString()方法,再依照前面的规则转换返回的字符串

2.2 ToPrimitive

toPrimitive(A)通过尝试调用 A 的A.toString() 和 A.valueOf() 方法,将参数 A 转换为原始值(Primitive);
JS中原始类型有:Number、String、Boolean、Null、Undefined;

不同类型对象的valueOf()方法的返回值:

对象 返回值
Array 返回数组对象本身。
Boolean 布尔值
Date 存储的时间是从 1970 年 1 月 1 日午夜开始计的毫秒数 UTC
Function 函数本身
Number 数字值
Object 对象本身。这是默认情况, 可以覆盖自定义对象的valueOf方法
String 字符串值

// Array:返回数组对象本身
var array = ["ABC", true, 12, -5];
console.log(array.valueOf() === array); // true

// Date:当前时间距1970年1月1日午夜的毫秒数
var date = new Date(2013, 7, 18, 23, 11, 59, 230);
console.log(date.valueOf()); // 1376838719230

// Number:返回数字值
var num = 15.26540;
console.log(num.valueOf()); // 15.2654

// 布尔:返回布尔值true或false
var bool = true;
console.log(bool.valueOf() === bool); // true

// new一个Boolean对象
var newBool = new Boolean(true);
// valueOf()返回的是true,两者的值相等
console.log(newBool.valueOf() == newBool); // true
// 但是不全等,两者类型不相等,前者是boolean类型,后者是object类型
console.log(newBool.valueOf() === newBool); // false

// Function:返回函数本身
function foo(){}
console.log( foo.valueOf() === foo ); // true
var foo2 = new Function("x", "y", "return x + y;");
console.log( foo2.valueOf() );
/*
ƒ anonymous(x,y
) {
return x + y;
}
*/

// Object:返回对象本身
var obj = {name: "张三", age: 18};
console.log( obj.valueOf() === obj ); // true

// String:返回字符串值
var str = "http://www.xyz.com";
console.log( str.valueOf() === str ); // true

// new一个字符串对象
var str2 = new String("http://www.xyz.com");
// 两者的值相等,但不全等,因为类型不同,前者为string类型,后者为object类型
console.log( str2.valueOf() === str2 ); // false

3.同值相等

同值相等由 Object.is 方法判断:

  • 两个值都是 undefined
  • 两个值都是 null
  • 两个值都是 true 或者都是 false
  • 两个值是由相同个数的字符按照相同的顺序组成的字符串
  • 两个值指向同一个对象
  • 两个值都是数字并且
    • 都是正零 +0,
    • 或者都是负零 -0,
    • 或者都是 NaN
    • 都是除零和 NaN 外的其它同一个数字
Object.is('foo', 'foo');  // true
Object.is(window, window); // true

Object.is('foo', 'bar');  // false
Object.is([], []);   // false

var foo = { a: 1 };
var bar = { a: 1 };
Object.is(foo, foo);   // true
Object.is(foo, bar);   // false

Object.is(null, null);  // true

Object.is(true, 'true')  // false

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

4.零值相等

与同值相等类似,不过会认为 +0 与 -0 相等。

小结

=== 不做类型转换,当两边的数类型不相同时,直接返回false;当前类型相同且都是数值类型的时候,有一个是NaN,那么结果就是false, 另外 +0 === -0

==运算符,当两边操作数类不相同时会做隐式转换,然后才进行比较,这样的话就会出现 false == 0, ‘' == false 等现象, 但是Object.is不会做这种转换

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
中文字符串截取的js函数代码
Apr 17 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
关于TypeScript模块导入的那些事
Jun 12 Javascript
Promise扫盲贴
Jun 24 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 #Javascript
24行JavaScript代码实现Redux的方法实例
Nov 17 #Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 #Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 #Javascript
vue中注册自定义的全局js方法
Nov 15 #Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 #Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 #Javascript
You might like
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
微信小程序自定义组件
2017/08/16 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
python能做哪方面的工作
2020/06/15 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
python unichr函数知识点总结
2020/12/16 Python
python excel和yaml文件的读取封装
2021/01/12 Python
土木工程专业个人求职信
2013/12/30 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
战略合作协议书范本
2014/04/18 职场文书
人事任命书范文
2014/06/04 职场文书
教师节横幅标语
2014/10/08 职场文书
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android