谈谈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连接access数据库的方法
Nov 17 Javascript
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
window.open不被拦截的实现代码
Aug 22 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 Javascript
elementui的默认样式修改方法
Feb 23 Javascript
vue watch关于对象内的属性监听
Apr 22 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 模板高级篇总结
2006/12/21 PHP
FCKeditor的安装(PHP)
2007/01/13 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
python打开文件并获取文件相关属性的方法
2015/04/23 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
python实现画一颗树和一片森林
2018/06/25 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
计算机专业毕业生的自我评价
2013/11/18 职场文书
结婚邀请函范文
2014/01/14 职场文书
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
运动员入场前导词
2015/07/20 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书