很久之前，看到过这样一种判断

[] == ![];    // true

当时觉得很神奇，翻了些博客，但也似懂非懂。今天翻看博客的时候，偶然又看见了它，感觉跟以前比更清晰了些，所以在此结合 js 类型转换，记录下自己的理解。
[TOC]

一、分解

乍一看，确实比较容易让人迷惑，但是复杂的东西只要能够被分解，我们就能容易地分析、理解它了。

由 JS 运算符优先级可知，“!” 的优先级高于 “==”，也就是说，一定程度上，我们可以将上面的语句改写为：

[] == (![]);    // true

或者，更进一步：

var a = [], b = ![];
a == b;    // true

二、求值
其实到上一步的时候，你可能已经发现了一个问题，没错，那就是：

var b = ![];   // false

其实这里就涉及到对象类型的真假值的问题。JavaScript 规定，所有的 JavaScript 的引用类型数据都是真值，这里说“引用类型数据”而非对象类型，是因为

typeof null === 'object';  // true
!null === true;    // true

笔者并不想纠结于 null 是不是对象类型这样的问题进行讨论。
正如上文所述，任何引用类型的数据都是真值，包括对象、函数等等：

!{} === true;   // false
![] === false;  // true
!function () {} === false;   // true
!window === true;    // false
!window.open === false;   // true

注意这里说的是任何引用类型，类似 Boolean 此类的包装函数所构造出来的对象当然也在此列：

!new Boolean(0) === false;   // true
!new Boolean(true) === true;   // false

有时我们想要将某种数据快速转换为一个布尔值，而不想因为使用 Boolean 而导致数据变成对象的时候，可以使用如下形式：

!!0    // false
!!undefined   // false
!!1   // true
!!{}   // true
!![]    // true
!!false  // false
!!null    // false
!!function () {}   // true

顺带一提的是，出了 ! 会导致真假值的判断，直接将一个值作为 if 语句的判断条件也会如此。

if (condition) {
  // do something
}

这里只要 condition 是一个真值，if 分支下的 “do something” 处的语句就会被执行。最典型的坑就出在 condition 是一个

• 空数组（[]）
• 空的 NodeList 实例（ 如 document.querySelectorAll('not-exist') )
• 空的 HTMLCollection 实例（ 如 document.getElementsByTagName('not-exist') ）
• 空的 jQuery 实例（ 如 $('not-exist') ）...

因为 document.getElementById 没有命中的时候返回 null，也即是一个假值，很多人认为 document.getElementsByTagName、jQuery 等也是如此，或者认为它们返回了一个空的数组，并认为这个空数组“应该”是一个假值。但实际上，无论是空数组、还是空的 NodeList / HTMLCollection / jQuery 的实例，它们本质上都还是引用类型数据，所以它们都是真值。一个比较简单的验证 NodeList / HTMLCollection / jQuery 的实例是否命中的方法是读取它们的 length 属性，如果不为 0 ，则可以认为它们命中了元素。

三、toString / valueOf
经过前两步的分析，我们可以将前面的判断改写为：

[] == false;      // true

按照常规思路，引用类型的变量之间的比较，是基于引用的比较，二者如果是相同的引用，则相等，否则不等。如果按照这样的逻辑，引用类型的数据根本不可能和基础类型的数据相等才对，但是这里就真的相等了。
说到这里，就必须提到原生 JS 中 toString / valueOf 这两个处处遍布的方法。

(一) 分类

对于不同类型的对象，js定义了多个版本的 toString 和 valueOf 方法

(1) toString:

• 普通对象，返回 "[object Object]";
• 数组，返回数组元素之间添加逗号合并成的字符串;
• 函数，返回函数的定义式的字符串;
• 日期对象，返回一个可读的日期和时间字符串;
• 正则，返回其字面量表达式构成的字符串;

(2) valueOf:

• 日期对象，返回自1970年1月1日到现在的毫秒数;
• 其它均返回对象本身;

toString / valueOf 两个方法，主要可用于引用类型数据的类型转换，通过调用它们，可以将引用类型数据使用在原本应该使用基本数据类型的地方。

（二）适用场景

原生的 toString / valueOf 分别位于对象的构造函数的 prototype 属性上，如果需要修改，大可直接在实例对象上直接添加 toString / valueOf 方法，这样也不会影响到原型链上的方法。

（1）类型转换

1）对象=>字符串
a. 执行toString，如果返回了一个原始值，则将其转化为字符串
b. 否则执行valueOf方法，如果返回了一个原始值，则将其转化为字符串
c. 否则抛出类型错误
如：

var o = {};
o.toString = function () {
  return 'my string';
};
String(o);      // my string

2） 对象=>数字
a. 执行valueOf，如果返回了一个原始值，如果需要，则将其转化为数字
b. 否则执行toString，如果返回了一个原始值，则将其转化为数字并返回
c. 否则抛出类型错误

var o = {};
o.valueOf = function () {
return 233;
};
Number(o);    // 233

（2）比较和运算
在执行 “>”、“<”、“+”、“-” 等操作的时候，如果涉及到引用类型数据，大部分引用类型数据在运算之前，会先尝试执行其 valueOf 方法，如果该方法返回了一个基本数据类型，则拿该返回值替代对象本身参与运算否则则尝试执行 toString 方法，如果该方法返回了一个基本类型数据，则使用该数据参与操作；如果该方法返回的不是基本类型数据，则尝试执行 valueOf 方法，如果该方法返回了一个基本类型数据，则使用该数据参与操作；否则将提示 TypeError。

var o = {};
o.toString = function () {
    return 2;
}

// 此时还没有为 o 添加 valueOf 方法
// 它将先调用继承自 Object.prototype.valueOf 方法
// 返回值是它自身
// 于是则调用这里我们为实例添加的 toString 方法
o == 2;        // true

// 这里为实例添加了 valueOf 方法
// 一开始，它就将调用我们为实例添加的 valueOf 方法
// 返回值 1 是基本类型数据
// 则再调用 toString 方法
o.valueOf = function () {
    return 1;
}
o == 1;    // true
o + 1;      // 2
o * 5;       // 5

注意前面说的是“大部分引用类型数据”，唯一不遵循此规则的是 Date 类型对象。与其它引用类型数据不同的是，在比较或者计算的时候，它会先尝试调用其 toString 方法，如果没有返回基本数据类型才尝试调用其 valueOf 方法。

var t = new Date();

// t 继承自 Date.prototype 上的 toString / valueOf 都能返回基本类型数据 
t.valueOf();      // 返回时间戳，如 1505438878370
t.toString();      // 时间信息字符串，如 "Fri Sep 15 2017 09:27:58 GMT+0800 (CST)"

t + 2344444;   // 并不会得到一个时间戳，而是 "Fri Sep 15 2017 09:27:58 GMT+0800 (CST)2344444"

所以当你不清楚它会得到什么值的时候，请自己调用 toString / valueOf 方法，后来 Date.prototype 对象上增加了一个 getTime 方法替代 valueOf 获取时间戳，但是这个方法在 IE 存在兼容性问题，仅 IE9+ 有效。

四、再转换

到这里，其实就很清晰了。

[] == false;      // true

其实就是：

([]).toString() == false;    // true

也就是：

'' == false;    // true

这里就涉及了基本类型数据的隐式转换问题了。基本依照以下规则：

• 两个都是数值，则比较数值
• 两个都是字符串，则比较字符编码值
• 其中一个是数值，则要把另个转化成数值进行比较
• 如果其中一个是对象，则调用 valueOf / toString 方法
• 如果有一个是布尔值，则将其转化成数值

显然这里满足最后一条规则，比较的时候，其实将会尝试将二者转化为数字类型。相当于：

Number('') == Number(false);      // true

即：

0 == 0;    // true

五、总结

JavaScript 是一门弱类型语言，但是弱类型并不代表没有类型，相反的是，JavaScript 是一门类型丰富的语言，除了常见语言的数字、字符串、布尔、对象、函数、null 等，更是有一个神奇的 undefined 类型。一边是弱类型，一边又是多种类型，这看似矛盾，但由于隐式类型转换的存在，这种矛盾看起来又如此的合理。
P.S. 虽然上面的代码中，我使用了大量的 “==”，而非 “===”，但这仅是学习用的。实际开发的时候，我也推荐使用 “===”。
一方面，如果由于自己的疏忽，没能正确处理好隐式类型转换，往往会造成意料之外的问题，为项目带来潜在的风险，比如我想验证某个变量是否是 undefined，如果采用：

value == undefined; 

但实际上，null 也会被匹配进来，可能造成潜在的风险，如果使用 “===” 就不会有这个问题；

另一方面，如果多人协作开发，隐式类型转换往往会为其他人带来困扰，尤其是在成员间开发能力参差不齐的情况下。
例如，我想验证一个值是否是布尔值 true，但是我写了这样的代码：

value == true;

你知道哪些数据会匹配成功么？