谈谈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 相关文章推荐
JavaScript判断文件上传类型的方法
Sep 02 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
react中props 的使用及进行限制的方法
Apr 28 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-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
常用的javascript function代码
2008/05/23 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
使用Python进行目录的对比方法
2018/11/01 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
Pycharm中如何关掉python console
2020/10/27 Python
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
武汉东之林科技有限公司机试
2013/09/17 面试题
电子商务专员岗位职责
2013/12/11 职场文书
高三毕业寄语
2014/04/10 职场文书
安全生产管理责任书
2014/04/16 职场文书
拉拉队口号
2014/06/16 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python
Pytorch可视化的几种实现方法
2021/06/10 Python