谈谈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 相关文章推荐
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
Javascript 面向对象 继承
May 13 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
koa源码中promise的解读
Nov 13 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 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
咖啡知识大全
2021/03/03 新手入门
如何在PHP中进行身份认证
2006/10/09 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
Prototype Function对象 学习
2009/07/12 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
浅谈python中get pass用法
2019/03/19 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
Flask-WTF表单的使用方法
2019/07/12 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
什么是Assembly(程序集)
2014/09/14 面试题
大学生个人事迹材料
2014/01/21 职场文书
文艺演出策划方案
2014/06/07 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
培训计划通知
2015/07/15 职场文书
母亲节感言
2015/08/03 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书