前端
面试题
前端
面试题

一 谈谈JavaScript中的类型转换机制

1.1 概述

前⾯我们讲到， JS 中有六种简单数据类型： undefined、null、boolean、string、number、symbol，以及引⽤类型：object

但是我们在声明的时候只有⼀种数据类型，只有到运⾏期间才会确定当前类型

let x = y ? 1 : a;

上⾯代码中， x 的值在编译阶段是⽆法获取的，只有等到程序运⾏时才能知道

虽然变量的数据类型是不确定的，但是各种运算符对数据类型是有要求的，如果运算⼦的类型与预期不符合，就会触发类型转换机制

常⻅的类型转换有：

  • 强制转换（显⽰转换）
  • ⾃动转换（隐式转换）

1.2 显⽰转换

显⽰转换，即我们很清楚可以看到这⾥发⽣了类型的转变，常⻅的⽅法有：

  • Number()
  • parseInt()
  • String()
  • Boolean()

1.2.1 Number()

将任意类型的值转化为数值

先给出类型转换规则：

实践⼀下：

Number(324) // 324
 // 字符串：如果可以被解析为数值，则转换为相应的数值
 Number('324') // 324
 // 字符串：如果不可以被解析为数值，返回 NaN
 Number('324abc') // NaN
 // 空字符串转为0
 Number('') // 0
 // 布尔值：true 转成 1，false 转成 0
 Number(true) // 1
 Number(false) // 0
 // undefined：转成 NaN
 Number(undefined) // NaN
 // null：转成0
 Number(null) // 0
 // 对象：通常转换成NaN(除了只包含单个数值的数组)
 Number({a: 1}) // NaN
 Number([1, 2, 3]) // NaN
 Number([5]) // 5

从上⾯可以看到， Number 转换的时候是很严格的，只要有⼀个字符⽆法转成数值，整个字符串就会被转为 NaN

1.2.2 parseInt()

parseInt 相⽐ Number ，就没那么严格了， parseInt 函数逐个解析字符，遇到不能转换的字符就停下来

1 parseInt('32a3') //32

1.2.3 String()

可以将任意类型的值转化成字符串

给出转换规则图：

实践⼀下：

// 数值：转为相应的字符串
 String(1) // "1"
 //字符串：转换后还是原来的值
 String("a") // "a"
 //布尔值：true转为字符串"true"，false转为字符串"false"
 String(true) // "true"
 //undefined：转为字符串"undefined"
 String(undefined) // "undefined"
 //null：转为字符串"null"
 String(null) // "null"
 //对象
 String({a: 1}) // "[object Object]"
 String([1, 2, 3]) // "1,2,3"

1.2.4 Boolean()

可以将任意类型的值转为布尔值，转换规则如下：

实践⼀下：

Boolean(undefined) // false
 Boolean(null) // false
 Boolean(0) // false
 Boolean(NaN) // false
 Boolean('') // false
 Boolean({}) // true
 Boolean([]) // true
 Boolean(new Boolean(false)) // true

1.3 隐式转换

在隐式转换中，我们可能最⼤的疑惑是 ：何时发⽣隐式转换？

我们这⾥可以归纳为两种情况发⽣隐式转换的场景：

  • ⽐较运算（ == 、 != 、、 < ）、 if 、 while 需要布尔值地⽅
  • 算术运算（ + 、 - 、 * 、 / 、 % ）

除了上⾯的场景，还要求运算符两边的操作数不是同⼀类型

1.3.1 ⾃动转换为布尔值

在需要布尔值的地⽅，就会将⾮布尔值的参数⾃动转为布尔值，系统内部会调⽤ Boolean 函数

可以得出个⼩结：

  • undefined
  • null
  • false
  • +0
  • -0
  • NaN
  • ""

除了上⾯⼏种会被转化成 false ，其他都换被转化成 true

1.3.2 ⾃动转换成字符串

遇到预期为字符串的地⽅，就会将⾮字符串的值⾃动转为字符串

具体规则是：先将复合类型的值转为原始类型的值，再将原始类型的值转为字符串

常发⽣在 + 运算中，⼀旦存在字符串，则会进⾏字符串拼接操作

'5' + 1 // '51'
 '5' + true // "5true"
 '5' + false // "5false"
 '5' + {} // "5[object Object]"
 '5' + [] // "5"
 '5' + function (){} // "5function (){}"
 '5' + undefined // "5undefined"
 '5' + null // "5null"

1.3.3 ⾃动转换成数值

除了 + 有可能把运算⼦转为字符串，其他运算符都会把运算⼦⾃动转成数值

'5' - '2' // 3
 '5' * '2' // 10
 true - 1 // 0
 false - 1 // -1
 '1' - 1 // 0
 '5' * [] // 0
 false / '5' // 0
 'abc' - 1 // NaN
 null + 1 // 1
 undefined + 1 // NaN

null 转为数值时，值为 0 。 undefined 转为数值时，值为 NaN