面试篇(004)js中  []==![] 的比较结果是什么?为什么?

215 阅读2分钟

前言

前端面试中经常会遇到的问题,就是关于相等操作符的比较操作。ECMAScript中相等操作符由两个等于号(==)表示,如果两个操作数相等,则返回true,这种操作符都会先转换操作数(通常称为强制转型),然后再比较它们的相等性。

数据类型转换规则

在转换不同的数据类型时,对于相等和不相等操作符:在JS高程中一书中给出如下的基本转换规则

1、如果有一个操作数是布尔值,则在比较相等性之前先将其转换为数值——false转换为0,而true转换为1;

2、如果一个操作数是字符串,另一个操作数是数值,在比较相等性之前先将字符串转换为数值

3、如果一个操作数是对象,另一个操作数不是,则调用对象的valueOf()方法,用得到的基本类型值按照前面的规则进行比较

这两个操作符在进行比较时则要遵循下列规则。

1、null 和undefined 是相等的;
2、要比较相等性之前,不能将null 和 undefined 转换成其他任何值;
3、如果有一个操作数是NaN,则相等操作符返回 false ,而不相等操作符返回 true。重要提示:即使两个操作数都是NaN,相等操作符也返回 false了;因为按照规则, NaN 不等于 NaN;
4、如果两个操作数都是对象,则比较它们是不是同一个对象,如果两个操作数都指向同一个对象,则相等操作符返回 true;否则, 返回false。

解惑 []==![] 为什么是 true

此根据以上规则可以得知整个运算过程如下所示

1、[] ==![] 首先根据运算符的运算顺序,! 运算符优先级高于 == ,所以先执行 ! 操作得到 [] == !true;
2、 [] == false 根据等于操作符比较 规则1,可以得到;
3. [] == 0 根据等于操作符比较规则3,[] 的 valueOf 方法得到是 [], 所以调用toString方法得到;
4. '' == 0 根据等于操作符比较规则2,可以得到;
5. 0 == 0 所以最终结果为true

总结一下这个运算过程就是下图这样

[] == ! [] -> [] == false -> [] == 0 -> '' == 0 -> 0 == 0 -> true