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

所属分类: 网络编程 / JavaScript 阅读数: 374
收藏 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 ==和+的资料请关注脚本之家其它相关文章!

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

Node.js事件的正确使用方法

这篇文章主要给大家介绍了关于Node.js事件的正确使用方法,文中通过示例代码介绍的非常详细,对大家学习或者使用Node.js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

微信小程序自定义导航栏实例代码

这篇文章主要给大家介绍了关于微信小程序自定义导航栏的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

js字符串处理之绝妙的代码

这篇文章主要介绍了js字符串处理之绝妙的代码,包括字符串去重、将字符放在对象中遍历拼接出字符串、把字符串的奇数位和偶数位分别提取到两个数组中、将两个数组按奇数位和偶数位插入拼接为字符串,有时候需要对字符进行处理的时候可以用得到
收藏 0 赞 0 分享

vue设计一个倒计时秒杀的组件详解

这篇文章主要介绍了vue设计一个倒计时秒杀的组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

详解服务端预渲染之Nuxt(介绍篇)

这篇文章主要介绍了详解服务端预渲染之Nuxt(介绍篇),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

javascrit中undefined和null的区别详解

这篇文章主要介绍了javascrit中undefined和null的区别详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈javascript中的prototype和__proto__的理解

这篇文章主要介绍了浅谈javascript中的prototype和__proto__的理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

详解vue中this.$emit()的返回值是什么

这篇文章主要介绍了详解vue中this.$emit()的返回值是什么,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

浅谈express.js框架中间件(middleware)

这篇文章主要介绍了浅谈express.js框架中间件(middleware),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue自定义指令directive的使用方法

这篇文章主要介绍了vue自定义指令directive的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享
查看更多