前言
隐式转换在我们开发过程中无处不在,但是这个知识体系经常被我们所忽视,可能有些开发者对这个概念会有些许的模糊,这篇文章主要是将js存在的隐式转换的所有常见情况进行一个汇总。
隐式转换
1.转换成布尔类型数据
- undefined -> false
- null -> false
- 数值型0或0.0或NaN -> false
- 字符串长度为0 -> false
- 其它对象 -> true
1.1 undefined转布尔类型
var value = undefined
if(value) {
console.log('true')
} else {
console.log('false')
}
// output: false
1.2 null转布尔类型
var value = null
if(value) {
console.log('true')
} else {
console.log('false')
}
// output: false
1.3 数值型转布尔类型
var value = 0
if(value) {
console.log('true')
} else {
console.log('false')
}
// output: false
var value = 0.0
if(value) {
console.log('true')
} else {
console.log('false')
}
// output: false
var value = NaN
if(value) {
console.log('true')
} else {
console.log('false')
}
// output: false
1.4 字符串转布尔类型
var value = ''
if(value) {
console.log('true')
} else {
console.log('false')
}
// output: false
var value = ' '
if(value) {
console.log('true')
} else {
console.log('false')
}
// output: true
var value = '0'
if(value) {
console.log('true')
} else {
console.log('false')
}
// output: true
1.5 其他对象转布尔类型
var value = []
if(value) {
console.log('true')
} else {
console.log('false')
}
// output: true
var value = {}
if(value) {
console.log('true')
} else {
console.log('false')
}
// output: true
var value = function(){}
if(value) {
console.log('true')
} else {
console.log('false')
}
// output: true
2.转换成数值类型数据
- undefined -> NaN
- null -> 0
- true -> 0, false -> 0
- 空字符串 -> 0,符串为纯数值时转为数值,字符串存在非数字时为NaN。
(字符串与数值相加的情况纳入转换成字符串类型范畴)5 其他对象 -> 如果存在这个对象转换为toString()方法的值,否则转换为undefined
2.1 undefined转数值类型
var value = undefined
var res = 1 + value
console.log(res)
// output: NaN
2.2 null转数值类型
var value = null
var res = 1 + value
console.log(res)
// output: 1
2.3 布尔类型转数值类型
var value = true
var res = 1 + value
console.log(res)
// output: 2
var value = false
var res = 1 + value
console.log(res)
// output: 1
2.4 字符串转数值类型
var value = '12'
var res = 1 * value
console.log(res)
// output: 12
var value = '12a'
var res = 1 * value
console.log(res)
// output: NaN
2.5 数组转数值类型
2.6 其它对象转数值类型
var value = []
var res = 1 + value // 1 + [].toString() => 1 + '' = '1'
console.log(res)
// output: 1
var value = []
var res = 1 * value // 1 + [].toString() => 1 * '' => 1 * 0 = 0
console.log(res)
// output: 0
var value = {}
var res = 1 * value // 1 + {}.toString() => 1 * '[object Object]' = NaN
console.log(res)
// output: NaN
var value = function(){}
var res = 1 * value // 1 + {}.toString() => 1 * 'function(){}' = NaN
console.log(res)
// output: NaN
3.转换为字符串类型数据
- undefined -> "undefined"
- null -> "null"
- true -> "true", false -> "false"
- NaN -> NaN,数值 ->"数值"
- 其它对象 -> 如果存在这个对象则转换为toString()方法的值,否则转换为undefined
转换的实际效果会通过下面的+运算符进行详解
4 + 运算符
当字符串类型存在+运算符的时候,会发生字符串合并的效果
var value = undefined
var res = '1' + value
console.log(res)
// output: '1undefined'
var value = null
var res = '1' + value
console.log(res)
// output: '1null'
var value = true
var res = '1' + value
console.log(res)
// output: '1true'
var value = false
var res = '1' + value
console.log(res)
// output: '1false'
var value = NaN
var res = '1' + value
console.log(res)
// output: '1NaN'
var value = 112
var res = '1' + value
console.log(res)
// output: '1112'
var value = []
var res = '1' + value // '1' + [].toString() => '1' + '' = '1'
console.log(res)
// output: '1'
var value = {}
var res = '1' + value // '1' + {}.toString() => '1' + '[object Object]' = '1[object Object]'
console.log(res)
// output: '1[object Object]'
var value = function(){} // '1' + {}.toString() => '1' + 'function(){}' = '1function(){}'
var res = '1' + value
console.log(res)
// output: '1function(){}'