JavaScript 中的隐形类型转换

我不是女神ヾ 2022-05-27 03:56 141阅读 0赞

> 文章是本人大三期间的学习笔记，一些论断取自书籍和网上博客，碍于当时的技术水平有一些写得不够好的地方，可以在评论处理智讨论~

为了扎实自己的基础，最近在看前端面试题，我会将一些有意思的面试题拿出来，附上我的理解做个分享~

ps:当然欢迎交流，如果说的不对的希望能够指出，大家一起进步！

#### 问题 ####

--------------------

程序1：

if([]) {
    	console.log("true");//true
    }

程序2：

console.log([] == false);//true

在程序1中`if([])`判定为真，打印出了`true`。在程序2中`[] == false`判定为真。

这里两个程序似乎发生了矛盾。那么`[]`究竟是`true`还是`false`我们接着来分析一下。

#### 相等运算符和全等运算符 ####

--------------------

首先，我们来看下知识牵扯相对较小的程序2，来看看其中的`[]`为何会和`false`相等。

确定两个变量是否相等是编程中的一个非常重要的操作。在比较字符串、数值和布尔值的相等性时，问题还是比较简单的。在涉及到对象的比较时，ECMAScript 提供了两组运算符：相等（`==`）和不相等（`!=`）——**先转换再比较**，全等（`===`）和不全等（`!==`）——**仅比较而不转换**。

##### 相等和不相等 #####

在使用相等运算符和不相等运算符时，会先转换操作数（**强制转换**），然后再比较它们的相等性。

**转换规则：**

1.  如果有一个操作数是布尔值，则在比较相等性之前先将其转换为数值—— false 转换为 0，而 true 转换为 1;
2.  如果一个操作数是字符串，另一个操作数是数值，在比较相等性之前会先将字符串转换为数值；2. 如果一个操作数是字符串，另一个操作数是数值，在比较相等性之前会先将字符串转换为数值；
3.  如果一个操作数是对象，另一个不是，则调用对象的 `valueOf() 方法`（该方法后面会提到），用得到的基本类型值按照前面的规则进行比较。

**比较规则：**

1.  `null` 和 `undefined` 是相等的；（因为 **undefined 值是派生自 null 值的**，因此 ECMA-262 规定它们的相等性测试要返回 `true`）
2.  要比较相等性之前，不能将 `null` 和 `undefined` 转换成其他任何值；
3.  如果有一个操作数是 `NAN`，则`==`返回 `false`，`!=`返回`true`；（`NAN == NAN` 也会返回 `false`，因为 **NAN与任何值不相等，包括它自身**）
4.  如果两个操作数都是对象，则比较它们是不是同一个对象。如果两个操作数都指向同一个对象，则`==`返回 `true`，`!=`返回`false`。

> ps：上面两条规则截自红宝书。

##### 全等和不全等 #####

虽然题目当中没有涉及到这点，不过作为知识体系中的一员，还是需要了解并掌握的。

**比较规则：**

*  如果两个值的类型不同，它们就不全等。
 *  如果两个值的类型是数字，而且值相等，那么除非其中一个或两个都是 `NAN`，否则它们就是全等的。
 *  如果两个值的类型是字符串，而且在串中同一位置的字符完全相同，那么它们就全等。如果字符串的长度或内容不同，就是不全等的。
 *  如果两个值都是 `true` 或都是 `false`，那么它们全等。
 *  如果两个值都是 `null` 或都是 `undefined`，那么它们全等
 *  如果两个值引用的是同一个对象、数组或函数，那么它们全等。如果它们引用的是不同的对象，它们就不全等，即使这两个对象具有完全相同的属性或两个数组具有完全相同的元素。

> ps：上面的规则截自犀牛书。

##### 程序2分析 #####

1.  在`[] == false`中，首先符合`相等和不相等`章节中转换规则1，转换为 `[] == 0`；
2.  符合转换规则3，隐性调用 `[].valueOf()`；
3.  由于数组的 valueOf 方法返回自身，结果不是原始类型，继续调用 `[].toString()`；
4.  结果是返回一个字符串，进一步转换为`'' == 0`，符合转换规则2，空字符串会变成 0，所以表达式最后会被转换为 `0 == 0`，所以最后打印出来是 `true`。

#### 类型转换 ####

--------------------

在看了第二个程序后，我们在来看看第一个程序。

这里截自犀牛书，结合它对类型转换的总结，会让这个程序变得很清晰。基本规则是，**当一个类型的值用于需要某种其他类型的值的环境中，JavaScript 自动尝试把值转换为所需类型**。例如：如果一个数字用于布尔环境中，它转换为一个布尔值。如果一个对象用于字符串环境，它转换为字符串。如果一个字符串用于数字环境，JavaScript 尝试把它转换为数字。

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">字符串</th> 
   <th align="left">数字</th> 
   <th align="left">布尔</th> 
   <th align="left">对象</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">未定义的值</td> 
   <td align="left">“undefined”</td> 
   <td align="left">NAN</td> 
   <td align="left">false</td> 
   <td align="left">Error</td> 
  </tr> 
  <tr> 
   <td align="left">null</td> 
   <td align="left">“null”</td> 
   <td align="left">0</td> 
   <td align="left">false</td> 
   <td align="left">Error</td> 
  </tr> 
  <tr> 
   <td align="left">非空字符串</td> 
   <td align="left">不变</td> 
   <td align="left">字符串的数字值或NAN</td> 
   <td align="left">true</td> 
   <td align="left">String对象</td> 
  </tr> 
  <tr> 
   <td align="left">空字符串</td> 
   <td align="left">不变</td> 
   <td align="left">0</td> 
   <td align="left">false</td> 
   <td align="left">Number对象</td> 
  </tr> 
  <tr> 
   <td align="left">0</td> 
   <td align="left">“0”</td> 
   <td align="left">不变</td> 
   <td align="left">false</td> 
   <td align="left">Number对象</td> 
  </tr> 
  <tr> 
   <td align="left">NAN</td> 
   <td align="left">“NAN”</td> 
   <td align="left">不变</td> 
   <td align="left">false</td> 
   <td align="left">Number对象</td> 
  </tr> 
  <tr> 
   <td align="left">无穷</td> 
   <td align="left">“Infinity”</td> 
   <td align="left">不变</td> 
   <td align="left">true</td> 
   <td align="left">Number对象</td> 
  </tr> 
  <tr> 
   <td align="left">负无穷</td> 
   <td align="left">“-Infinity”</td> 
   <td align="left">不变</td> 
   <td align="left">true</td> 
   <td align="left">Number对象</td> 
  </tr> 
  <tr> 
   <td align="left">任意其他数字</td> 
   <td align="left">数字的字符串值</td> 
   <td align="left">不变</td> 
   <td align="left">true</td> 
   <td align="left">Number对象</td> 
  </tr> 
  <tr> 
   <td align="left">true</td> 
   <td align="left">“true”</td> 
   <td align="left">1</td> 
   <td align="left">true</td> 
   <td align="left">Boolean对象</td> 
  </tr> 
  <tr> 
   <td align="left">false</td> 
   <td align="left">“false”</td> 
   <td align="left">0</td> 
   <td align="left">false</td> 
   <td align="left">Boolean对象</td> 
  </tr> 
  <tr> 
   <td align="left">对象</td> 
   <td align="left">toString()</td> 
   <td align="left">valueOf()，toString()或者NAN</td> 
   <td align="left">true</td> 
   <td align="left">不变</td> 
  </tr> 
 </tbody> 
</table>

##### 程序1分析 #####

在`if([]){...}`中，\[\] 处于一个布尔环境中，我们从上面的表中知道**对象在布尔环境中都会转换为 `true`（包括空对象、空数组、空字符串等）**，因此 `if([]){...}`，判定为真，打印出 ‘true’。

var a1 = new Boolean(false);
    var a2 = new Number(0);
    var a3 = new String("");
    var a4 = new Array();
    if(a1 && a2 && a3 && a4) { 
    	console.log("true");
    } else { 
    	console.log("false");
    }
    //true

#### valueOf() 和 toString() ####

--------------------

从上面知道，在对于对象的数据类型转换时，会调用 object 默认的 `toString()` 方法和 `valueOf()` 方法。接下来，我们来介绍这两个函数。

##### toString() #####

toString() 函数的作用是返回 object 的字符串表示，JavaScript 中 object 默认的 toString() 方法返回字符串“\[object\] \[object\]”。

var s = { 
    	x: 1,
    	y: 2
    };
    console.log(s.toString());	//[object object]

定义类时可以实现新的 toString() 方法，从而返回更加具有可读性的结果：

1.  array 的 toString() 方法将返回以逗号分隔的数组成员。比如，`[1,2,3].toString()` 会返回字符串 `”1,2,3″`。
2.  function 的 toString() 方法将返回函数的文本定义。比如，`(function(x){return x*2;}).toString()`会返回字符串 `”function(x){return x*2;}”`。
3.  RegExp 的 toString() 方法与 function 的 toString() 方法类似，将返回正则表达式的文本定义。比如，`/\d+/g.toString()`会返回字符串 `”/\\d+/g”`。
4.  Date 的 toString() 方法将返回一个具有可读性的日期时间字符串。
5.  如果 Boolean 值是 true，则返回 “true”。否则，返回 “false”。

##### valueOf() #####

`valueOf()` 方法与 `toString()` 方法很像，但是，它是当 JavaScript 需要把一个对象转换为某种基本数据类型，也就是一个数字而不是字符串的时候，才调用的方法。如果一个对象用在需要一个基本数值的环境中，JavaScript 会自动调用这个方法。

大部分情况下 `valueOf()` 方法的返回值可以参照 `toString()` 方法，但还是会有不同的区别：

var arr = [1, 2, 3];
    console.log(Array.isArray(arr.valueOf()));	//true
    console.log(Array.isArray(arr.toString()));	//false

从上面这个例子，`valueOf()` 调用完以后还是返回一个数组，而 `toString()` 调用完返回的是一个字符串。所以不是 `valueOf()` 和 `toString()` 函数相同，而是间接的调用了 `toString()`。（**此处的进一步测试可移步** [深入理解Javascript中的valueOf与toString][Javascript_valueOf_toString]）

> 1.  在进行强转字符串类型时将优先调用toString方法，强转为数字时优先调用valueOf。
> 2.  在有运算操作符的情况下，valueOf的优先级高于toString。

[Javascript_valueOf_toString]: http://www.jb51.net/article/102027.htm