类型转换【JS深入知识汇点14】

JS 有六种简单数据类型：undefined、null、boolean、string、number、symbol，还有一种复杂类型object。js 是弱类型语言，只有到运行期间才会确定当前类型，由于没有对类型严格限制，导致不同类型之间可以进行运算，这样就需要允许类型之间互相转换。

显式类型转换

ToString

将非字符串转成字符串，常用的方法有 String()、toString()。 基本规则是：

非字符串	字符串
null	'null'
undefined	'undefined'
true	'true'
1	'1'
NaN	'NaN'
Infinity	'Infinity'
{a: 1}	'[object Object]'
{}	'[object Object]'
[]	''
[1, 2, 3]	'1,2,3'
[1, 2, {a: 1}]	'1,2,[Object Object]'
function a() {}	'function a() {}'
[1, undefined,null, function () {}]	'1,,,function () {}'

普通对象在字符串时，实际执行 Object.prototype.toString() 方法，返回该对象的类型 [object type],但是当对象有自己的toString 方法时，字符串就会调用该方法并返回该方法的返回值。

var obj = {
	a: 'test',
    toString: function() {
    	return 1;
    }
}
console.log(obj.toString()) //1
console.log(String(obj))  //1

JSON.stringify

JSON.stringify() 在将 JSON 对象序列化为字符串时，也涉及到了字符串化的相关规则，基本规则是：

非字符串	字符串
null	'null'
undefined	忽略
true	'true'
1	'1'
NaN	'null'
Infinity	'null'
{a: 1}	'{"a": 1}'
{}	'{}'
[]	'[]'
[1, 2, 3]	'[1,2,3]'
[1, 2, {a: 1}]	'1,2,{"a": 1}'
function a() {}	忽略
[1, undefined, function a() {}, null,23]	'[1,null,null,null,23]'

ToNumber

ToNumber 负责将非数字转换成数字，Number()、parseInt()、parseFloat() 都可以

非数字	Number()	parseInt()/parseFloat()
null	0	NaN
undefined	NaN	NaN
true	1	NaN
false	1	NaN
{a: 1}	NaN	NaN
{}	NaN	NaN
[]	0	NaN
[1, 2, 3]	NaN	1
[3, 2, {a: 1}]	NaN	3
function a() {}	NaN	NaN
[1, undefined, function a() {}, null,23]	NaN	1(数组第一个值)

parseInt 转换规则：

• 转换字符串时，会忽略前面的空格，直到找到第一个非空格字符
• 如果第一个字符不是数字字符或者负号，就会返回 NaN
• 如果第一个字符是数字字符，parseInt就会继续解析，直到遇到一个非数字字符或者解析完所有后续字符。
• 如果是数组，则返回数组中第一个成员(必须是可以转换成数字类型才可以) parseInt(['26hh', 34]) // 26

⚠️注意：parseFloat 和 parseInt 转换规则类似，但 parseInt 可以转换所有进制， parseFloat 只可以转换十进制

ToBoolean

通过 Boolean() 和 !! 可以将非布尔值转换成布尔值

非布尔值	布尔值
null	false
undefined	false
1	true
0	false
NaN	false
Infinity	true
{a: 1}	true
{}	true
[]	true

隐式转换

ToString

1. 四则运算符中，+ 是双目运算符，只要其中一个是 String 类型，表达式的结果就是一个 String，会隐式调用.toString() 方法，对于其他运算符，只要有一个是 Number ，表达式的值就是一个 Number

console.log([] + {}); // [object object],转成字符串:'' + '[object Object]' = '[object Object]'
console.log({} + []); // [object object]

2. alert，会调用 toString() 方法

ToNumber

1. 加号+与减号- 可以将非数字类型转成数字类型
2. 比较运算符规则：
   • 都是数字类型的话，直接比大小
   • 一个是数字类型，另一个是字符串类型，先将字符串类型转成数字，再比较
   • 如果都是字符串类型，则不会转成数字进行比较，而是比较字符串中字符的 Unicode 编码

ToBoolean

1. if 判断中， 判断条件是 Boolean 类型，代码在执行到 if 判断时，js 将 xxx 转成 Boolean 类型。
2. while 和 do... while(xxx) 循环中的条件判断表达式
3. ？：中的条件判断表达式
4. 逻辑运算符 || 和 && 左边的操作数

相关知识点

typeof

参数	typeof
null	'object'
undefined	'undefined'
true	'boolean'
1	'number'
NaN	'number'
Infinity	'number'
{a: 1}	'object'
{}	'object'
[]	'object'
function a() {}	'function'

null 是唯一一个用 typeof 检测会返回 'object' 的基本类型值，具体原因是：不同的对象在底层都表现为二进制，在 js 中二进制前三位为 0 的话都会被判断为 object 类型，null 的二进制表示全是 0 ，所以结果是 'object'

valueOf 和 toString

基本上，所有 JS 数据类型都拥有这俩个方法，null除外。

• toString() 返回对象的字符串表示。
• valueOf() 返回对象的字符串、数值或布尔值表示。

一般用操作符单独对对象进行转换的时候，如果对象存在 valueOf 或者 toString 改写的话。先调用改写的方法，valueOf 更高级，如果没有被改写的话，直接调用 valueOf 方法