js隐式类型转换规则通俗版

193 阅读2分钟

js类型转换一直都是难以掌握和被批评最多的部分,不管你喜不喜欢,你都得面对它,隐式转换可以分为显式和隐式,令大家抓狂的部分应该主要集中在隐式转换,今天就收集一下相关方面的注意事项,列出一系列通俗的规则,大家多看看,总会有感觉的。

一. a+b

1. a和b两个都是number,执行数值相加;

1 + 2; // 3

2. 其中一个是boolean,一个是number,则boolean转换成number(true->1,false->0)再相加;

true + 1; // 2
false + 1; // 1

3. 其中一个是number,一个是null,null转换成0(Number(null)),再执行数值相加;

null + 1; // 1

4. 其中一个是number,一个是undefined,undefined转换成NaN(Number(undefined));

undefined + 1; // NaN

5. Symbol类型不能参与+

var s = Symbol('a');
s + 1; // Cannot convert a Symbol value to a number
s + '1'; // Cannot convert a Symbol value to a string
String(s); // 'Symbol(a)' 可以通过String函数字符串化

6. 其他情况,对象转换成基本类型(如果有valueOf,调用它,如果valueOf没有返回基本类型,继续调用toString,如果没有返回基本类型,则报TypeError异常),然后运用上述规则计算;

{} + 1; // 注意这里{}是代码块,最终效果是+1,当然就返回1
1 + {}; // '1[object Object]'
[] + 1; // '1'
[1] + 1; // '11'
var obj = {
    valueOf() {
        return 1;
    },
    toString() {
        return 2;
    }
};
obj + 1; // 2

二. a == b

1. null == undefined

null == undefined; // true
null == null; // true
undefined == undefined; // true

2. NaN

NaN不和自己相等

NaN != NaN; // true

3. -0 == 0

-0 == 0; // true

4. a是number,b是string,string转换成number(Number(b))再比较

1 == '1'; // true

5. boolean类型统一转换成number(true->1,false->0)

true == 1; // true
true == '1'; // true
true == [1]; // true 转换过程:[1] => '1' => 1
false == 0; // true
false == []; // true 转换过程:[] => '' => 0

6. a和b都是对象,比较引用是否指向同一堆内存地址

var obj1 = {};
var obj2 = {};
var obj3 = obj1;
obj1 == obj2; // false
obj1 == obj3; // true

7. a是基本类型,b是对象,则对象转换成基本类型(如果有valueOf,调用它,如果valueOf没有返回基本类型,继续调用toString,如果没有返回基本类型,则报TypeError异常)

0 == []; // true 转换过程:[] => '' => 0
0 == {}; // false
0 == { valueOf() { return 0; }, toString() { return 1; } }; // true

三. a < b

1. a和b都是number,直接进行数值大小比较;

1 < 2; // true

2. a和b都是string,进行字符顺序比较;

'a' < 'b'; // true
'0' < '1'; // true

3. a是number,b是string,b转换成number再比较;

'2' < 1; // false
'0' < 1; // true

4. boolean转换成number(true->1,false->0)再比较;

0 < true; // true
-1 < false; // true

5. undefined和null通过Number()函数转换再比较(null->0,undefined->NaN);

null < undefined; // false
null < 1; // true

6. a是number,b是object,b转换成number(Number(b)),然后进行比较;

null < 1; // true 转换过程: null => 0 
0 < [1]; // true 转换过程:[1] => '1' => 1
0 < { valueOf(){ return 1; } } // true

7. a是string,b是object,b转换成基本类型,然后进行比较;

'a' < ['b'] // true
'a' < { toString() { return 'b' } }