谈谈JavaScript令人迷惑的==与+


Posted in Javascript onAugust 31, 2020

前言

相信很多学习过JavaScript的小伙伴都对JavaScript的==与+有一些疑惑,经常会出现结果与自己想象不一样的情况,而且也没找到一个通用的方法,只能死记硬背,非常难受。(咦,这不就是说的我嘛,嘻嘻嘻)今天就一起来揭开它们的神秘面纱,彻底解决掉他们。

正式开始之前,先来小试牛刀一下:

null == undefined;
 [] == [];
 '23'= 23;
 45 == [45];
 false == undefined;
 "" == [null];
 {} + {};
 false + 1

ToPrimitive函数

ToPrimitive是一个内部函数,用于处理类型转换,从字面意思就知道这个函数的就是将变量转化为基本类型的一个函数。

ToPrimitive(input, PreferredType)

第一个参数是 input,表示要转化的值;

第二个参数是PreferredType,表示希望转换成的类型,可为Number/String。

<p style="color:red">当input是日期类型时,PreferredType为String,其余情况下都相当于传入Number。</p>

当PreferredType传入参数时处理步骤会有差异,处理步骤分别如下:

1.PreferredType传入Number

(1). 如果input为基本类型,直接返回;

(2). 否则,调用valueOf方法,如果得到一个基本类值直接返回;

(3). 否则,调用toString方法,如果得到一个基本类值直接返回;

(4). 否则,JavaScript 抛出一个类型异常错误。

2.PreferredType传入String

(1). 如果input为基本类型,直接返回;

(2). 否则,调用toString方法,如果得到一个基本类值直接返回;

(3). 否则,调用valueOf方法,如果得到一个基本类值直接返回;

(4). 否则,JavaScript 抛出一个类型异常错误。

==

上述介绍了ToPrimitive函数,那么对于==的结果就能有一个清晰的认知。

我先给出一个判断逻辑,然后再以例子进行具体分析:

1.两边类型一致时,基本变量就直接进行值比较,相同则为true,不同则为false,引用变量如果两边都指向同一个内存地址那么返回true,否则返回false。

<p style="color:red">特别情况:</p>

null == undefined //true 可以理解为两值都为无效的值,所以内部认为并无不同,所以相等
 NaN == NaN //false
 //如果两个symbol变量不指向同一内存空间那么永为false,否则为true

2.两边类型不一致:

(1). 先调用ToPrimitive()返回基本类型;

(2). 若类型不一致,则调用ToNumber();( 这里的ToNumber也是一个内部函数,可将值转化为数字型 )

举两个例子吧:

false == undefined //true
 //false调用ToPrimitive返回false
 //undefined调用ToPrimitive返回undefined
 //false调用ToNumber返回0
 //undefined调用ToNumber返回0
45 == [45] //true
 //45调用ToPrimitive返回45
 //[45]调用ToPrimitive返回"45"
 //45调用ToNumber返回45
 //"45"调用ToNumber返回45

+

一元操作运算符+

+作为一元操作运算符逻辑比较简单:先调用ToPrimitive,后调用ToNumber

+['1'] //1
 //['1']调用ToPrimitive返回"1"
 //"1"调用ToNumber返回1
+{} //NaN
 //{}调用ToPrimitive返回"[object Object]"
 //"[object Object]"调用ToNumber返回NaN

二元操作运算符+

+作为二元操作运算符逻辑如下:

  1. 两个值分别调用ToPrimitive;
  2. 如果两个的返回值中有一个为字符串类型,则返回两个值toString的拼接结果;
  3. 否则返回toNumber相加的结果
null + 1 //1
 //null调用ToPrimitive返回null
 //1调用ToPrimitive返回1
 //null调用ToNumber返回0
 //1调用ToNumber返回1
 //0 + 1 = 1
[1, 2] + [3, 4] //"1,23,4"
 //[1, 2]调用ToPrimitive返回"1,2"
 //[3, 4]调用ToPrimitive返回"3,4"
 //"1,2"调用toString返回"1,2"
 //"3,4"调用toString返回"3,4"
 //"1,2" + "3,4" = "1,23,4"

以上就是谈谈JavaScript令人迷惑的==与+的详细内容,更多关于JavaScript ==和+的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
Sep 17 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
JS三级联动代码格式实例详解
Dec 30 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 #Javascript
JS性能优化实现方法及优点进行
Aug 30 #Javascript
如何检测JavaScript中的死循环示例详解
Aug 30 #Javascript
JavaScript中CreateTextFile函数
Aug 30 #Javascript
详解vue组件之间的通信
Aug 30 #Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 #Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 #Javascript
You might like
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
JS location几个方法小姐
2008/07/09 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
javascript定义函数的方法
2010/12/06 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
微信小程序日历效果
2018/12/29 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
详解Python的Django框架中的templates设置
2015/05/11 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
如何更优雅地写python代码
2019/07/02 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
葬礼司仪主持词
2014/03/31 职场文书
个人课题方案
2014/05/08 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
安全责任书范文
2014/08/25 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
办公用品管理制度
2015/08/04 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android
Java 在生活中的 10 大应用
2021/11/02 Java/Android
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers