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

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

2021-09-03 16:50leomo JavaScript

这篇文章主要介绍了JavaScript中==与+的使用方法，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下

前言

相信很多学习过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。

				?

									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

二元操作运算符+

+作为二元操作运算符逻辑如下：

两个值分别调用ToPrimitive；
如果两个的返回值中有一个为字符串类型，则返回两个值toString的拼接结果；
否则返回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"