攻克js类型转换

关于js中类型转换一直都没有梳理清楚，这次认真梳理发现只有三种情况，分别为：

• 转换为布尔值
• 转换为字符串
• 转换为数字

原始值	转换目标	结果
number	布尔值	0、-0、NaN为false，其它均为true
string	布尔值	空字符串(' ')为false，其它均为true
undefined、null	布尔值	false
引用类型	布尔值	true

原始值	转换目标	结果
number	字符串	123=>'123'
Boolean、函数、Symbol	字符串	function(){} => 'function(){}'
数组	字符串	[1,2,3]=>'1,2,3'
对象	字符串	'[object Object]'

原始值	转换目标	结果
string	数字	'123'=>123
数组	数字	空数组[]=>0,只有一个数字元素['1']=>1,其它情况NaN
null	数字	0
除了数组的引用类型	数字	NaN
Symbol	数字	抛错：Uncaught TypeError: Cannot convert a Symbol value to a number

转Boolean

在条件判断时，除了 0、-0、NaN、''、undefined、null、false其它所有值都转为 true，包括所有对象。

对象转原始类型

对象类型转换时会调用内置的[[ToPrimitive]] 函数，该函数算法逻辑如下：

• 如果已经是原始类型，不需要转换
• 调用x.valueOf()，如果转换为基础类型，就返回转换的值
• 调用x.toString()，如果转换为基础类型，就返回转换的值
• 如果都没有返回原始类型，报错

可以重写Symbol.toPrimitive，该方法在转换原始类型是调用优先级最高

let a = {
    valueOf () {
        return 0
    },
    toString () {
        //return '1'
    },
    [Symbol.toPrimitive] () {
       return 2
    }
}

1 + a // 3

四则运算符

加法运算符不同于其他几个运算符，有几个特点：

• 运算中有一方为字符串，那么另一方也转换成字符串
• 如果一方不是字符串或者数字，那么会将它转化为数字或者字符串

1 + '1' // '11'
true + true // 2
1+[1,2,3] // "11,2,3"

⚠️注意这种表达式 'a' + + 'b'

'a' + + 'b' // "aNaN"

技巧：可以通过+ '1'的形式快速获取number值，+操作符可以直接把后面的值转成数字

对于除了加法的运算符（-、*、/），非数字的转成数字进行运算

4 / '2'  // 2
3 * '3'  // 9
3 - {} // NaN

比较运算符

• 对象，通过toPrimitive方法转换成基本类型
• 字符串，通过unicode 字符索引来比较
• 布尔值，转换成数字，true=>1, false=>0

let a = {
    valueOf() {
        return 0
    },
    toString() {
        return '2'
    }
}

a > -1 // true, a 是对象，通过 valueOf 转换为原始类型再比较值。

对比== 和 ===

对于==来说，如果对比双方的类型不同，会进行类型转换，x == y判断流程：

• 首先判断x、y类型是否相同，相同则直接比较大小(x === y)，不同则类型转换继续判断 -->
• 若x、y为null和undefined，返回true，否则继续判断 -->
• 若x、y为字符串和数字进行比较，将字符串转换为number，再继续判断
• 若x、y有一方为布尔值，是的话将布尔值转为number，再继续判断
• 判断是否有一方为Object，且另一方为string/number/symbol，是的话将object转换为原始类型再继续判断

详情参考：标准文档

[] == ![] // true，过程：[] == false -> [] == 0 -> 0 == 0 ->true