Javascript隐式转换

248 阅读3分钟

前言

隐式转换在我们开发过程中无处不在,但是这个知识体系经常被我们所忽视,可能有些开发者对这个概念会有些许的模糊,这篇文章主要是将js存在的隐式转换的所有常见情况进行一个汇总。

隐式转换

1.转换成布尔类型数据

  1. undefined -> false
  2. null -> false
  3. 数值型0或0.0或NaN -> false
  4. 字符串长度为0 -> false
  5. 其它对象 -> 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.转换成数值类型数据

  1. undefined -> NaN
  2. null -> 0
  3. true -> 0, false -> 0
  4. 空字符串 -> 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.转换为字符串类型数据

  1. undefined -> "undefined"
  2. null -> "null"
  3. true -> "true", false -> "false"
  4. NaN -> NaN,数值 ->"数值"
  5. 其它对象 -> 如果存在这个对象则转换为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(){}'