谈谈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 相关文章推荐
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
jquery限定文本框只能输入数字即整数和小数
Nov 29 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
使用JS获取页面上的所有标签
Oct 18 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 Javascript
利用JavaScript写一个简单计算器
Nov 27 Javascript
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
php 执行系统命令的方法
2009/07/07 PHP
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
浅析Python编写函数装饰器
2016/03/18 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
python基于socket函数实现端口扫描
2020/05/28 Python
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
应届生污水处理求职信
2013/11/06 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
收入证明怎么写
2015/06/12 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server