[JS]06.数据类型转换

• 所有的数据类型转换都分为手动转换和隐式转换

1. 把其它数据类型转换为Number类型

1.1 手动，特定需要转换为Number类型

• Number([val]) -> 只要出现非有效数字，就是NaN
• parseInt / parseFloat([val]) -> 从开始找有效数字

1.2 隐式转换（浏览器内部默认要先转换为Number再进行计算）

• isNaN([val]) -> Number先转换
• 数学运算（特殊情况，+ 两边出现字符串，不是数学运算，是字符串拼接）
• 在 == 比较的时候，有些值需要转换为数字再进行比较

// 1. Number转换机制
console.log(Number('')); // 0
console.log(Number('10')); // 10
console.log(Number('10px')); // NaN 只要出现非有效数字，就是NaN
console.log(Number(true));  // 1
console.log(Number(false));  // 0
console.log(Number(null));  // 0
console.log(Number(undefined));  //NaN
console.log(Number(Symbol(10)));  //报错
console.log(Number(BigInt(10))); // 10

// 2. 对象变为数字
// 先valueOf()取原始值, 如果没有原始值，再toString变成字符串，最后把字符串变成数字


// 3. parseInt、parseFloat机制

// 把转换的值先转换为字符串，从字符串第一个字符开始，查找有效数字，遇到非有效数字字符，就停止查找，把找到的数字字符转换为数字，如果一个有效数字都没有，则为NaN
// parseFloat比parseInt多识别一个小数点

parseInt('')  //没找到有效数字 NaN
Number('') // 0
isNaN('')  // 隐式转换先变成数字 ''-> 0，0是有效数字，false
parseInt(null)  // null先变成字符串 -> 'null' -> NaN
Number(null) // 0
isNaN(null)  // 隐式转换先变成数字 -> 0 -> false
parseInt('12px')  // 12
Number('12px')  // NaN 
isNaN('12px')  // Number先转换，NaN -> true

parseFloat('1.6px') + parseInt('1.2px') + typeof parseInt(null)
// 1.6 + 1 + 'number'(typeof NaN). => 2.6 + 'number' => '2.6number'
// 在js中，加号左右两边出现字符串，则变为字符串拼接（有特殊性），如果出现对象，也会变为字符串拼接，对象转数字需要先转成字符串

isNaN(Number(!!Number(parseInt('0.8'))))
// parseInt('0.8') => 0
// !!Number(0) => false
// Number(false) => 0
// isNaN(0) => false

typeof !parseInt(null) + !isNaN(null)
// parseInt(null) => NaN  
// !NaN => !false => true
// typeof true => 'boolean'

// isNaN(null) => false 
// !false => true

// 结果 "booleantrue"
复制代码

2. 把其它数据类型转换为字符串

2.1 手动转换

• toString()
• String()

2.2 隐式转换（一般都是调用其toString）

• 加号运算的时候，如果一边出现字符串，则是字符串拼接
• 把对象转换为数字，需要先toString()转换为字符串，再去转换为数字
• 基于alert、confirm、prompt、document.write…这些方式输出，都是把内容转换为字符串输出

2.3 备注

• 把其它类型转换为字符串，一般都是直接""包起来，只有{}普通对象调用原型上Object.prptotype.toString，不是转化为字符串，而是检测数据类型，返回结果是”[object, Object]”

3. 把其它数据类型转换为布尔值

3.1 手动转换

• !转换为布尔值后取反
• !!转换为布尔类型
• Boolean([val])

3.2 隐式转化

• 在循环或者条件判断中，条件处理的结果就是布尔值类型

3.3 规则

• 只有 0 NaN null undefined 空字符串，五个值会变为布尔的false，其余全是true

4. 在 == 比较的过程中，数据转换的规则：

4.1 类型一样的几个特殊点

• {} == {} => false 对象比较的是堆内存的地址
• [] == [] => false

4.2 类型不一样的转换规则

• null == undefined => true，但是换成 === 的结果是false（因为类型不一致）剩下null/undefined和其它任何数据类型值都不相等

• 字符串 == 对象，要把对象转换为字符串

• 剩下如果 == 两边数据类型不一致，都是需要转换为数字再进行比较

console.log( [] == false )  // true

/*
解析：
1. == 两边类型不一样，对象 == 布尔，需要都转化为数字再比较（隐式转换）
2. 对象转化为数字，先toString转化为字符串（应该是先基于valueOf获得原始值，没有原始值再toString），再转换成数字
3. [].valueOf() => [] 不是原始值，则走toString，[].toString() => ''， Number('') => 0
4. 左边转换流程：[] => '' => 0
5. 右边转换流程：flase -> 0. true -> 1
*/

console.log( ![] == false ) // true

/*
解析：
== 的优先级比 !优先级低
![] 把数组转换为布尔类型，然后取反，[]为true，取反为false
左边false，后边false，两边类型一样，不继续转换，true
*/
复制代码

let result = 10 + false + undefined + [] + 'Tencent' + null + true + {}
console.log(result)

// 10 + false => 没有遇到字符串和对象，false转成数字 => 10
// 10 + undefined => 没有遇到字符串和对象，undefined转成数字 => NaN => 10 + NaN => NaN
// NaN + [] => []变成数字得先变成字符串，[] => "" , NaN + "" => "NaN"
// "Nan" + 'Tencent' => 后面都是字符串拼接
// "NaNTencentnulltrue[object, Object]"
复制代码

5. 特殊性

• +即使一边出现字符串或者对象，也不一定是字符串拼接, ++/+这种情况是数学运算

let n = "10"
console.log( ++n )  //11

console.log(+n)  // 10


{} + 0
// 左边的{}被认为是一个代码块，不参与运算，运算只处理 +0 => 0
// function(){}+0 代码压缩

({}+0)
// 一个整体，参与运算中，左边变成字符串拼接 "[object Object]0"

0+{}
// 这种情况是数学运算，"0[object Object]"

复制代码