谈谈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 相关文章推荐
json原理分析及实例介绍
Nov 29 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 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
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
PHP反射API示例分享
2016/10/08 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
javascript运动详解
2015/07/06 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
Python最长公共子串算法实例
2015/03/07 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
python爬虫实现中英翻译词典
2019/06/25 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
优秀团队获奖感言
2014/02/19 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
低碳环保倡议书
2014/04/14 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技