再也不怕面试官问数据类型转换了

如果面试官给你出了一道这样的题：

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

面对这样的问题，我们不仅需要准确的输出答案，还要知道它底层触发的是什么原理

其实，这个面试题触发的就是数据类型转换。

先不着急得到答案，我们先看看数据类型的转换机制

数据类型转换，无非只有三种：

第一：其他类型转换成Number类型

• 显示转换：特定需要转换为Number的

• Number([val])
  

• parseInt/parseFloat([val])
  

• 隐式转换(浏览器内部默认需要转换为Number在进行计算的)

• isNaN([val])
  

• 数学运算 +,-,*,/,% (特殊情况，"+" 在出现字符串的情况下，不是数学运算，是字符串拼接)
• 在==比较的时候，有些值需要转换为数字在进行比较

第二：其他类型转换成字符串

1. 能使用的办法

• toString()
• String()

2. 隐式转换（一般都是调用toString）

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

第三：其他类型转换成布尔

1. 基于以下方式可以把其他数据类型转换成布尔

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

2. 隐式转换

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

只有0，NaN, null, undefined 空字符串 5个值变成布尔类型为false，其他变成布尔类型都为true

现在我们来看一下这个题：

console.log([] == false)

分析：

1. 对象和布尔比较； 都需要转换成数字
2. 对象转换成数字，先toString转换为字符串，在转换为数字

转换：

1. [] -> “” -> 0
2. false -> 0

综上所述：

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

第二题：

console.log(![] == false)

分析：

1. 数组转换布尔类型
2. 然后与 布尔比较

转换：

1. [] 转换成布尔类型 为true
2. ![] 则为false
3. false == false ?

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

其实我们常常遇到的还是把其他类型转换为number类型

把其他类型转换为数字 Number 机制：

1. 只要出现非有效数字字符，结果就是NaN

console.log(Number("10px") // NaN
console.log(Number(null) // 0
console.log(Number(undefined) // NaN
console.log(Number(Symbol(10))) //  报错

2. parseInt 与parseFloat 机制

从字符串左侧第一个字符开始，查找有效数字字符； 把转换的值先转换成字符串（遇到非有效数字字符，停止查找，）；把找到的有效数字字符转化为数字，如果没找到有效数字，则为NaN；

parseInt("") // NaN
Number("") // 0
isNaN("") // false
parseInt(null) //NaN
Number(null) // 0
isNaN(null) // false
parseInt("12px");//12
Number("12px") //NaN
isNaN("12px")// true
parseFloat("1.6px") + parseInt("1.2px")+typeof parseInt(null) // "2.6number"
isNaN(Number(!!Number(parseInt("0.8")))) //false
typeof !parseInt(null) + !isNaN(null) // "boolentrue"

3. 面试题

let result = 10+false + undefined + [] + "Tencent" + null + true + {}

console.log(result)

大家可以把答案写在评论区