JavaScript 类型转换

321 阅读2分钟

一、三种类型转换

js类型转换只有三种情况:转Boolean、转Number、转String

二、转Boolean

在条件判断时,除了 undefined, null, 'false', NaN, '', 0, -0,其他所有值都转为 true,包括所有对象。

三、对象转基本数据类型(拆箱)

对象在转换基本数据类型的时候,会调用内置的 ToPrimitive 函数!!!

ToPrimitive 函数逻辑如下:

  • 判断对象是否具有 x.valueOf() 方法,如果有并且返回基本数据类型的值,则调用该方法进行类型转换,并返回

  • 判断对象是否具有 x.toString() 方法,如果有并且返回基本数据类型的值,则调用该方法进行类型转换,并返回

  • 如果都没有返回基本数据类型,就会报错

也可以重写 Symbol.toPrimitive,重写后的方法在对象转基本数据类型时,调用的优先级最高

// 重写 Symbol.toPrimitive 方法
let a = {
  valueOf() {
    return 0
  },
  toString() {
    return '1'
  },
  [Symbol.toPrimitive]() {
    return 2
  }
}
1 + a // => 3

// + 运算符两边只要有一个操作数是引用数据类型就会执行字符串的拼接操作
// 数组通过 ToPrimitive 转换为字符串
[1,2] + [3,4]  // "1,23,4"

// - , * , / 都会将引用数据类型通过 ToPrimitive 转为数字
[2] - [1] // 1

四、基本数据类型之间转换

4-1 四则运算符

// + 运算符两边只要有一个操作数是字符串就会执行字符串的拼接操作
'1' + 0  // "10" 

// - , * , /都可以用来将字符串转化为数字
'2' - 1 // 1

// 布尔值到数字的隐式类型转化
1 + false  // 1
1 + true   // 2

4-2 等于运算符

// 如果任一操作数是布尔值,则将其转换为数值再比较是否相等
true == 1 // true
true == 4 // false

// 如果一个操作数是字符串,另一个操作数是数值,则尝试将字符串转换为数值,再比较是否相等
"55" == 55 // true

// 如果一个操作数是对象,另一个操作数不是,则调用对象的 valueOf() 方法取得其原始值,再根据前面的规则进行比较

let obj = {valueOf:function(){return 1}}
obj == 1 // true

// null 和 undefined 相等
null == undefined // true

// 如果有任一操作数是 NaN ,则相等操作符返回 false
NaN == NaN // false

五、避免隐式类型转换

  1. 采用 "===" 和 "!==" 运算符可以避免隐式类型转换