javascript 前端面试之隐式转换 js隐式转换

注

复杂数据类型（[]，{}）在隐式转换时会先转成String，然后再转成Number运算

基本类型隐式转换无特殊
0、-0、NaN、’’、null、undefined、document.all在Boolean转换为false值,其余任何值都会被转换为true

1、转String类型

+（字符串连接符）一方为string类型则直接进行字符串拼接，优先级高于number

//+（字符串连接符）
console.log(1+'abc') // '1abc'
console.log(true + 'abc') // 'trueabc'
console.log(undefined + 'abc') // 'undefinedabc'

2、转Number类型

++/–(自增自减运算符) + - * / %(算术运算符) >、 < 、>= 、<= 、== 、!= （关系运算符不包含 === 、！===）
1.在 + 算术运算符 两边不存在string时才会进行Number的隐式转换，否则进行String的隐式转换
其他算术运算符直转Number

console.log(1+true) // 2 Number(true) => 1  Number(false) => 0
console.log(1+ undefined) // NaN Number(undefined) => NaN
console.log(1+ null) // 1 Number(null) => 0
console.log(1+[]) // 0 Number([]) => [].valueOf().toString() => '' -> Number('') => 0
console.log(1 + {}) // NaN Number({}) => {}.valueOf().toString() => '[object Object]' -> Number('[object Object]') => NaN

2. 关系运算符 会把其他数据类型转换成number之后再比较关系

console.log(1 == true) // true Number(true) => 1  Number(false) => 0
/*
****	关系运算符一边为String 一边为Number时 String直转Number
*/
console.log(10 > '5') // true 
/*
****（特殊）	关系运算符两边均为String时，在转为Number类型时，是转为字符串拆分开，从左往右对应的字符unicode编码
*/
console.log('2' > '10') // true 
'2'.charCodeAt() // 50
'1'.charCodeAt() // 49
console.log('abc' > 'aaa') // true
// 拆分第一个字符 都是a，比较下一个字符 b与a
'a'.charCodeAt() // 97
'b'.charCodeAt() // 98
'b' > 'a'

特殊情况 NaN 与任何数据比较包括本身都是 false

console.log(undefined == undefined) // true
console.log(null== null) // true
console.log(null == undefined) // true
console.log(NaN== NaN) // false 

复杂类型在关系运算中

/*
复杂数据类型（[]，{}）在隐式转换时会valueOf()先转成String()，然后再转成Number运算
*/
console.log([] == 0) // true 
console.log(![] == 0) // true
console.log([] == ![]) // true
// [].valueOf().toString() == ''  Number('') == 0
// 逻辑非优先级高于关系运算符  Boolean([]) == true => ![] == false => Number(false) == 0
console.log([] == []) // false
console.log({} == {}) //false
// 复杂数据类型是存放在堆中，栈中存放的是指向该数据的地址，所以[]与[]、{}与{}比较为false
console.log({} == 0) // false
console.log(!{} == 0) // true
console.log({} == !{}) // false
//  !{}     Boolean({}) == true => !{} == false => Number(false) == 0
//  {}    {}.valueOf().toString() => '[object Object]' => Number('[object Object]') == NaN

转载常见面试题型以及复杂数据类型的讲解