类型转换与类型比较的区别

数据转换

在进行不同数据类型的操作时，js 会自动进行隐式转换

// object与string
const obj = {}
const str = '[object Object]'
console.log(obj == str)       // true

// string与boolean
console.log(!!'abc')          // true
console.log(!!'')             // false

// string与number
console.log( 4 + 'px')        // 4px
console.log( 4 - 'px')        // NaN(运算符号中只有'+'发生字符串拼接)

// boolean与number
console.log(0 == false)       // true
console.log(1 == true)        // true
console.log(2 == true)        // false
console.log(2 == false)       // false(比较时隐式转换booelan转number时只会转为0或1)

转换规则

值	转字符串	转数值	转布尔	转对象
undefined	‘undefined’	NaN	false	TypeError
null	‘null’	0	false	TypeError
’ ’	/	0	false	new String(’ ')
‘1.2’(数字类型)	/	1.2	true	new String(‘1.2’)
‘abc’(非数字类型)	/	NaN	true	new String(‘abc’)
0	‘0’	/	false	new Number(0)
- 0	‘0’	/	false	new Number(-0)
NaN	‘NaN’	/	false	new Number(NaN)
Infinity	‘Infinity’	/	true	new Number(Infinity)
- Infinity	‘- Infinity’	/	true	new Number(-Infinity)
true	‘true’	1	/	new Boolean(true)
false	‘false’	0	/	new Boolean(false)
{}(任意对象)	下面介绍	下面介绍	true	/
[](空数组)	’ ’	0	true	/
[1](仅一个数字元素数组)	‘1’	1	true	/
[1,2](其他数组)	下面介绍	NaN	true	/
function(任意函数)	下面介绍	NaA	true	/

引用类型转换

当一个引用类型要去和一个值类型去做比较时，引用类型会尝试将自己转换为值类型，其中涉及到两个方法：

• Object.valueOf( )
• Object.toString( )

首先会进行调用 value.of 方法，如果返回值仍不为值类型，则会调用 toString 方法

const arr = [1,2,3]
const fun = function() { console.log('this is a function') }
const obj = { value: 1 }

// 引用类型使用valueOf()返回的是本身
console.log(arr.valueOf())		// [1,2,3]
console.log(fun.valueOf())		// ƒ () { console.log('this is a function') }
console.log(obj.valueOf())		// { value: 1 }

// 引用类型执行toString()后结果
console.log(arr.toString())		// '1,2,3'
console.log(fun.toString())		// 'function() { console.log('this is a function') }'
console.log(obj.toString())		// '[object Object]'

// 验证为string类型
console.log(arr.toString() === '1,2,3')             // true
console.log(fun.toString() === 'function() { console.log(\'this is a function\') }')      // true
console.log(obj.toString() === '[object Object]' )  // true		

转换方法

显示转换：

Number()
String()
Boolean()
Object()

对象和字符串相互转换：

const obj = {x: 1}
const result1 = obj.toString()
const result2 = JSON.stringify(obj)
const result3 = JSON.parse(result2)
console.log(result1)    // '[object Object]'  
console.log(result2)    // '{\"x\":1}'
console.log(result3)    // {x: 1}

---

数据比较

数据类型比较时隐式转换规则

数据类型比较出现在 == 与 === 运算符中，其中 == 如果出现在不同数据类型之间会产生隐式转换

值类型比较是值的比较：值相等就相等（==），值和类型都相等就恒等（===）

const str = '1'
const number = 1
console.log(str == number)    // true
console.log(str === number)   // flase

引用类型比较是引用内存地址的比较：即使两个引用类型包含同样的属性及相同的值，它们也是不相等的

const obj1 = {}
const obj2 = {}
const obj3 = obj1

console.log(obj1 == obj2)     // false
console.log(obj1 == obj3)     // true
console.log(obj1 === obj3)    // true

比较规则：如果不是同数据类型，则只能隐式向下转换为相同数据类型为止再进行比较

如 object 要和 boolean 进行比较：

1. object 转换为 string，然后再转换为 number
2. boolean 转换为 number
3. number 与 number 同类型数据，可以直接进行比较

const obj = {}
const arr = []

console.log(Number(obj))    // NaN
console.log(Number(arr))    // 0(这里是因为数组转字符串的结果为数组内的元素，当空数组时则等于空字符，空字符转boolean为0)

console.log(obj == true)    // false
console.log(obj == false)   // false(obj转换number为NaN,boolean转number为0或1，所以都不相等)
console.log(arr == true)    // false
console.log(arr == false)   // true

注意只是类型比较时适用，不适用于类型转换，这是因为类型比较只能由上图中关系向下转换导致的，而类型转换没有上下关系

const num = 2
console.log(Boolean(num))     // true(类型转换，非0数字转boolean为true)
console.log(str == true)      // false(类型比较，boolean只能向下转换为0或1，永远不可能为2) 

// > ![]是类型转换，[]转boolean为true，取反为false，然后boolean与boolean直接比较
console.log([] == false)      // true
console.log(![] == false)     // true

特殊值比较，和 boolean 相比时其实就是看转换为 number 类型后值是否为0或1

console.log(NaN == NaN)           // false
console.log(null == undefined)    // true
console.log([] == false)          // true
console.log({} == true)           // false
console.log({} == false)          // false
console.log(null == true)         // false
console.log(null == false)        // false

数据类型比较只出现在 == 运算符，其他操作皆是数据类型转换

// 这里不是类型比较，而是相当于Boolean(obj)，结果为true，和类型比较有所区别
const obj = {}
if(obj) {
  console.log('程序运行')   // 程序运行
}