有段代码如下:
![] == [],true or false?
我们都知道,ECMAScript中有两种类型的相等操作符:
- 全等与不全等——直接比较而不转换类型
- 相等与不相等——先转换类型再比较
全等与不全等的逻辑比较简单,而今天我们要关注的是我们平时用得比较多的第二种操作符:相等与不相等。当我们对两个操作数用 == 进行比较的时候,我们分两种情况:== 两边操作数的类型相同与不相同。我们都知道类型不相同时需要先转换类型,但是其中的转换规则是什么样的呢?也许许多人都不曾仔细研究过,今天我们就通过分析![] == []来深入研究一下 == 的比较机制。
两边类型相同
当两边的类型相同时,比较的逻辑就跟 === 一样:
- 如果类型都是基本类型,则直接比较其值
- 如果都是引用类型,则比较其引用地址(是否指向同一个对象)
如以下代码:
2 |
console.log( 'abc' == 'abc' ); |
也许有人会说,既然[] == []为false,那么前面那个![] == []的结果就是true咯?!没错,但是其中的判断逻辑不是这么简单的,因为![]等于false,所以这个比较就相当于false == [],这时两边的类型不一样的,一个是Boolean,一个是Array,所以我们不能简单通过[] == []为false来判断![] == []为true,当我们将[]换成{},这时结果就不一样了。
2 |
console.log(![] == []); |
4 |
console.log(!{} == {}); |
也许你会感到糊涂,[]与{}同样是引用类型,为什么![] == []与!{} == {}的结果不一样呢?那是因为Array有其特殊的地方,这时后话,我们先来看下当 == 两边类型不相等时的转换规则。
两边类型不相同
当 == 两边操作数的类型不相同时,会将操作数的类型进行转换相同的类型,通常也叫强制转型,然后再比较其相等性,比如:
2 |
console.log( false == 0); |
在转换不同的数据类型时,相等和不相等操作符遵循下列基本规则:
- 如果有一个操作数是布尔值,则在比较相等性之前现将其转换成数值——false转换成0,而true转换成1
- 如果一个操作数是字符串,另外一个操作数是数值,在比较相等性之前现将其转换成数值(用Number()方法)
- 如果一个操作数是对象(引用类型),另外一个操作数不是,则调用对象的valueOf()方法,用得到的原始值按照前面的规则进行比较(如果得到的原始值还是对象,则调用原始值的toString()方法再进行比较)
另外有几个需要注意的地方:
- null和undefined是相等的(undefined派生于null)
- 要比较相等性之前,不能将null和undefined转换成其他值(即除null和undefined之外的值都不和null与undefined相等)
- 一般来说,如果a == b为true的话,那么a != b即为false,反之也可行,但是有一个例外,那就是NaN,NaN不等于任何操作数,包括它自己,即NaN == NaN和NaN != NaN都为false
根据以上规则,我们可以自己写一个比较相等的函数:
01 |
function Equal(a, b) { |
02 |
var typeA = typeof a, typeB = typeof b; |
06 |
if ((isNaN(a) && typeA === 'number' ) || (isNaN(b) && typeB === 'number' )) { return false ; } |
09 |
if (typeA === typeB) { |
13 |
if (typeA === 'undefined' ) { a = null ; } |
14 |
if (typeB === 'undefined' ) { b = null ; } |
16 |
if (a === null || b === null ) { |
18 |
} else if (typeA === 'object' || typeB === 'object' ) { |
21 |
var o = (typeA === 'object' ? a : b).valueOf(), other = o === a ? b : a; |
22 |
if ( typeof o === 'object' ) { |
25 |
return Equal(o, other); |
28 |
if (typeA === 'boolean' ) { a = a ? 1 : 0; } |
29 |
if (typeB === 'boolean' ) { b = b ? 1 : 0; } |
31 |
if (typeA === 'string' && typeB === 'number' ) { a = Number(a); } |
32 |
if (typeB === 'string' && typeA === 'number' ) { b = Number(b); } |
37 |
console.log(Equal([], [])); |
38 |
console.log(Equal(![], [])); |
39 |
console.log(Equal({}, {})); |
40 |
console.log(Equal(!{}, {})); |
41 |
console.log(Equal(NaN, NaN)); |
42 |
console.log(Equal(undefined, null )); |
43 |
console.log(Equal( false , null )); |
44 |
console.log(Equal( false , 0)); |
45 |
console.log(Equal( true , 2)); |
Array.toString()
那么为什么![] == []为true呢?其比较步骤如下:
- ![]为false,式子相当于false == [],两边类型不同且有一个对象[]
- 右边的[]调用valueOf()方法,得到的还是对象[],因此再调用toString()的方法,Array的toString()方法相当于Array.join(','),例如[1, 2, 3].toString()等于'1,2,3',而[].toString()等于一个空字符串''({}.toString()等于'[object Object]'),则此时式子相当于false == ''
- 因为存在布尔值为false,将其转成数值0,此时式子变成0 == ''
- 最后将右边的空字符串''用Number()方法转成0,0 == 0为true,所以![] == []
因此:
1 |
console.log(![] == []); |
3 |
console.log(0 == [ '' ]); |
4 |
console.log( '0' == []); |
5 |
console.log( '0' == [0]); |
6 |
console.log( true == [1]); |
总结:由于相等和不相等操作符存在类型转换问题,而为了保持代码中数据类型的完整性,推荐使用全等和不全等操作符(已经强调很久了)。