深入解析JavaScript中==与+运算符的底层转换机制

JavaScript ==与+运算符原理：ToPrimitive转换详解

前言

许多JavaScript初学者在面对==相等运算符和+加法运算符时，常因结果与预期不符而感到困惑。由于缺乏通用的理解方法，往往只能依靠死记硬背来应对各种特殊情况，这给学习带来了不小的困扰。本文旨在揭示这两种运算符背后的运行机制，彻底解决这一难题。

在深入原理之前，我们先通过几个典型例子进行初步测试：

null == undefined;
 [] == [];
 '23'= 23;
 45 == [45];
 false == undefined;
 "" == [null];
 {} + {};
 false + 1

ToPrimitive内部函数处理流程

ToPrimitive函数机制

ToPrimitive是JavaScript引擎中的一个内部函数，其核心职责是执行类型转换。从名称即可看出，它的作用是将任意类型的变量转换为基本数据类型（Primitive Type）。

ToPrimitive(input, PreferredType)

该函数的第一个参数input代表需要进行转换的值。

第二个参数PreferredType用于指定期望转换后的目标类型，其取值可以是Number或String。

<p style="color:red">需要注意的是，当input为Date对象类型时，PreferredType默认为String；而在其他所有情况下，PreferredType均视为Number。</p>

根据PreferredType传入值的不同，ToPrimitive的处理步骤会有所区别，具体流程如下：

1. 当PreferredType为Number时

(1). 若input本身已是基本类型，则直接返回该值；

(2). 若input为引用类型，则尝试调用其valueOf()方法。若valueOf()返回基本类型值，则直接返回该结果；

(3). 若valueOf()未返回基本类型，则调用toString()方法。若toString()返回基本类型值，则直接返回该结果；

(4). 若上述两步均未能返回基本类型值，JavaScript引擎将抛出一个类型错误（TypeError）。

2. 当PreferredType为String时

(1). 若input本身已是基本类型，则直接返回该值；

(2). 若input为引用类型，则尝试调用其toString()方法。若toString()返回基本类型值，则直接返回该结果；

(3). 若toString()未返回基本类型，则调用valueOf()方法。若valueOf()返回基本类型值，则直接返回该结果；

(4). 若上述两步均未能返回基本类型值，JavaScript引擎将抛出一个类型错误（TypeError）。

==

==相等运算符的类型转换规则

理解了ToPrimitive函数的运作机制，我们便能清晰地推导==运算符的比较逻辑。

下面先给出==运算符的判断逻辑框架，随后通过具体案例进行详细分析：

1. 当比较双方类型一致时：

<p style="color:red">特殊情况：</p>

null == undefined //true 可以理解为两值都为无效的值，所以内部认为并无不同，所以相等
 NaN == NaN //false
 //如果两个symbol变量不指向同一内存空间那么永为false，否则为true

2. 当比较双方类型不一致时：

(1). 首先对双方分别调用ToPrimitive()，将其转换为基本类型；

(2). 若转换后的类型仍不一致，则调用ToNumber()内部函数将双方转换为数字类型（ToNumber同样为内部函数，用于将值转化为Number型）；

以下通过两个具体示例加以说明：

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 ==和+的资料请关注本站其它相关文章！