谈谈JavaScript令人迷惑的==与+

所属分类: 网络编程 / JavaScript 阅读数: 452
收藏 0 赞 0 分享

前言

相信很多学习过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 ==和+的资料请关注脚本之家其它相关文章!

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多