网站首页 > 技术文章 正文
前置知识:
判断两个变量的值是否相等,是编程中非常重要的一个操作。这里我们心里面先有两组对照,思考下:
- 相等 和 不相等
- 全等 和 不全等
1.介绍
在我们比较字符串、数值和布尔值的相等性,是比较简单的,但是到了比较对象的时候,问题就比较复杂。
早期的时候ECMAScript规范中,在判断相等和不相等时,会先将对象转换成相似的类型,再执行比较。后面有人质疑其合理性,最后ECMAScript提出解决方法:提供两组操作符:
- 相等和不相等(宽松相等):先转换再比较,使用==
- 全等和不全等(严格相等):仅比较不转换,使用===
另外还有一类ES6新增的方法:
- Object.is (ES6新增)
2.相等和不相等
JavaScript中用相等操作符使用==进行比较,若两个操作数相等,则返回true,否则返回false。反之,不相等操作符使用!=。
这两个操作符都会先转换操作数类型,再进行比较。
通常在转换不同数据类型时,相等和不相等会遵循以下规则:
- 若有一个操作数是布尔值,则比较前会将布尔值转换为数值:false转为0,true转为1。
- 若一个操作数是字符串,另一个是数值,则比较前会将字符串转换为数值。
- 若一个操作数是对象,另一个不是,则比较前会调用valueOf()方法,用返回的基本类型值来判断。
两个操作符进行比较时会遵循下面规则:
- null和undefined相等。
- 比较前不能讲null和undefined转换成其他值。
- 若一个操作数是NaN,则不相同(==时返回false,!=时返回true)。
- 若两个操作数是NaN,则不相同(==时返回false,!=时返回true)。
- 若两个操作数都是对象,则比较它们是不是同一个对象。
- 若两个操作数都指向同一个对象,则相等操作符返回true,否则返回false。
下面列出一些特殊情况的比较 :
3.全等和不全等
除了比较前不转换操作数歪,全等和不全等与相等和不相等并无区别,但使用的是===,只有当不转换的情况下两个操作数相同,才会返回true。
不全等操作符就相对应的使用!==:
特殊的:
由于相等和不相等操作符存在类型转换问题,因此为了保持代码中数据类型的完整性,我们推荐使用去哪等和不全等操作符。
4.同值相等(Object.is)
Object.is(value1, value2);,传入两个需要对比的值。
Object.is() 判断两个值是否相同,并且不会对参数进行类型转换。如果下列任何一项成立,则两个值相同:
- 两个值都是 undefined
- 两个值都是 null
- 两个值都是 true 或者都是 false
- 两个值是由相同个数的字符按照相同的顺序组成的字符串
- 两个值指向同一个对象
- 两个值都是数字并且
- 都是正零+0
- 都是负零 -0
- 都是 NaN
- 都是除零和 NaN 外的其它同一个数字
另外还有特殊的:
- 零值相等:
- 与同值相等类似,不过会认为 +0 与 -0 相等。
5.对比图
相等操作符对于不同类型的值,进行的比较如下图所示(来源 MDN):
注意:
- ToNumber(A) 表示比较前将参数 A 转换为数字
- ToPrimitive(A)通过尝试调用 A 的A.toString() 和 A.valueOf() 方法,将参数 A 转换为原始值(Primitive)。
公众号:前端自习课
往期回顾
「JavaScript 从入门到精通」2.流程控制和错误处理
「JavaScript 从入门到精通」11.Map和Set对象
- 上一篇: Proxy 来代理 JavaScript 里的类
- 下一篇: 8个常用的JavaScript数组方法
猜你喜欢
- 2024-11-23 被忽略的Set
- 2024-11-23 8个常用的JavaScript数组方法
- 2024-11-23 Proxy 来代理 JavaScript 里的类
- 2024-11-23 前端笔记-js浅拷贝和深拷贝
- 2024-11-23 DOM 高级工程师不完全指南
- 2024-11-23 软件定义存储之ScaleIO、命令行操作和常用API使用指南
- 2024-11-23 Javascript的JSON.stringify()知多少?
- 2024-11-23 推荐10个“不能错过”的前端攻城师必背面试题源码及详解
- 2024-11-23 Web 前端怎样入门?
- 2024-11-23 JavaScript优化技巧
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-