js的8种数据类型

JavaScript 的数据类型公有8种，分别为7种基础类型和1种引用类型。

数据类型

而引用数据类型（Object）又分为图上这几种常见的类型：

Array - 数组对象
RegExp - 正则对象
Date - 日期对象
Math - 数学函数
Function - 函数对象

JavaScript 的数据类型最后都会在初始化之后放在不同的内存中，因此上面的数据类型大致可以分成两类来进行存储：

基础类型存储在栈内存，被引用或拷贝时，会创建一个完全相等的变量。
引用类型存储在堆内存，存储的是地址，多个引用指向同一个内存地址。

let a = {
  name: 'jom',
  age: 20
}
let b = a
console.log(a.name)  // jom
b.name = 'led';
console.log(a.name)  // led

第一个 console 打出来 name 值为 ‘jom’，但在执行了 b.name=‘led’ 之后，结果发现 a 和 b 的属性 name 值都为 ‘led’，这里就体现了引用同一个内存地址的特性，即这两个值都存在同一块内存中共享，一个发生了改变，另外一个也随之跟着变化。

let a = {
  name: 'jom',
  age: 20
}

function change(val) {
  val.age = 24
  val = {
    name: 'led',
    age: 30
  }
  return val
}

let b = change(a)
console.log(b.age)    // 24
console.log(a.age)    // 30

第一个 console 的结果是 30，b 最后打印结果是 {name: “led”, age: 30}；第二个 console 的返回结果是 24，而 a 最后的打印结果是 {name: “jom”, age: 24}。原因在于：函数传参进来的 val，传递的是对象在堆中的内存地址值，通过调用 val.age = 24 确实改变了 a 对象的 age 属性；而change函数把参数 val 的地址重新返回了，将 {name: “led”, age: 30} 存入其中，最后返回 b 的值就变成了 {name: “led”, age: 30}。而如果把change函数中的return去掉，那么 b 就会返回 undefined。

数据类型检测

第一种判断方法：typeof

typeof 1              // 'number'
typeof '1'            // 'string'
typeof undefined      // 'undefined'
typeof true           // 'boolean'
typeof Symbol()       // 'symbol'
typeof null           // 'object'
typeof []             // 'object'
typeof {}             // 'object'
typeof console        // 'object'
typeof console.log    // 'function'

可以看到 null 的 typeof 是 ‘object’，虽然 typeof null 会输出 object，但不代表 null 就是引用数据类型，这是 JS 存在的一个悠久 Bug，并且 null 本身也不是对象。所以null 通过 typeof 返回的结果不能作为判断 null 的方法。如果你需要在 if 语句中判断是否为 null，直接通过 ‘===null’来判断就好。
此外还需注意，引用数据类型 Object，用 typeof 来判断的话，除了 function 会判断为 function 以外，其余都是 ‘object’，是无法判断出来的。

第二种判断方法：instanceof

[value] instanceof [constructor]

instanceof 运算符用来检测 [value] 在其原型链中是否存在一个 [constructor] 的 prototype 属性。
先 new 一个对象，那么这个新对象就是它原型链继承上面的对象了，通过 instanceof 我们能判断这个对象是否是之前那个构造函数生成的对象，这样就基本可以判断出这个新对象的数据类型。

let Car = function() {}
let benz = new Car()
benz instanceof Car                     // true
let car = new String('Mercedes Benz')
car instanceof String                   // true
let str = 'Covid-19'
str instanceof String                   // false

那么自己写一个 instanceof 的实现方法

function myInstanceof(left, right) {
  // 这里先用typeof来判断基础数据类型，如果是，直接返回false
  if(typeof left !== 'object' || left === null) return false

  // getProtypeOf是Object对象自带的API，能够拿到参数的原型对象
  let proto = Object.getPrototypeOf(left)
  while(true) {                                         // 循环往下寻找，直到找到相同的原型对象
    if(proto === null) return false
    if(proto === right.prototype) return true           // 找到相同原型对象，返回true
    proto = Object.getPrototypeof(proto)
  }
}

// 验证一下
console.log(myInstanceof(new Number(123), Number))      // true
console.log(myInstanceof(123, Number))                  // false

总结：

instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型
而 typeof 也存在弊端，它虽然可以判断基础数据类型（null 除外），但是引用数据类型中，除了 function 类型以外，其他的也无法判断

第三种判断方法：Object.prototype.toString

toString() 是 Object 的原型方法，调用该方法，可以统一返回格式为 “[object Xxx]” 的字符串，其中 Xxx 就是对象的类型。对于 Object 对象，直接调用 toString() 就能返回 [object Object]；而对于其他对象，则需要通过 call 来调用，才能返回正确的类型信息。

Object.prototype.toString({})                 // "[object Object]"
Object.prototype.toString.call({})            // 同上结果，加上call也ok
Object.prototype.toString.call(1)             // "[object Number]"
Object.prototype.toString.call('1')           // "[object String]"
Object.prototype.toString.call(true)          // "[object Boolean]"
Object.prototype.toString.call(function(){})  // "[object Function]"
Object.prototype.toString.call(null)          // "[object Null]"
Object.prototype.toString.call(undefined)     // "[object Undefined]"
Object.prototype.toString.call(/123/g)        // "[object RegExp]"
Object.prototype.toString.call(new Date())    // "[object Date]"
Object.prototype.toString.call([])            // "[object Array]"
Object.prototype.toString.call(document)      // "[object HTMLDocument]"
Object.prototype.toString.call(window)        // "[object Window]"

现在可以实现一个全局通用的数据类型判断方法

function getType(obj){
  let type  = typeof obj
  // 先进行typeof判断，如果是基础数据类型，直接返回
  if (type !== "object") {
    return type
  }
  // 对于typeof返回结果是object的，再进行如下的判断，正则返回结果
  return Object.prototype.toString.call(obj).replace(/^[object (\S+)]$/, '$1')
}

数据类型转换

在 JavaScript 数据类型转换问题中，分为两种：手动转换和隐式转换。

强制类型转换

强制类型转换方式包括 Number()、parseInt()、parseFloat()、toString()、String()、Boolean()，这几种方法都比较类似，通过字面意思可以很容易理解，都是通过自身的方法来进行数据类型的强制转换。
上述几个强制类型转换的原理大致相同。

1. Number() 方法的强制转换规则

布尔值，true 和 false 分别被转换为 1 和 0
数字，返回自身
null，返回 0
undefined，返回 NaN
字符串，遵循以下规则：如果字符串中只包含数字（或者是 0X / 0x 开头的十六进制数字字符串，允许包含正负号），则将其转换为十进制；如果字符串中包含有效的浮点格式，将其转换为浮点数值；如果是空字符串，将其转换为 0；如果不是以上格式的字符串，均返回 NaN
Symbol，抛出错误
对象，并且部署了 [Symbol.toPrimitive] ，那么调用此方法，否则调用对象的 valueOf() 方法，然后依据前面的规则转换返回的值；如果转换的结果是 NaN ，则调用对象的 toString() 方法，再次依照前面的顺序转换返回对应的值（Object 转换规则会在下面细讲）

Number(true);        // 1
Number(false);       // 0
Number('0111');      // 111
Number(null);        // 0
Number('');          // 0
Number('1a');        // NaN
Number(-0X11);       // -17
Number('0X11')       // 17

上面代码分别列举了比较常见的 Number 转换的例子，它们都会把对应的非数字类型转换成数字类型，而有一些实在无法转换成数字的，最后只能输出 NaN 的结果。

2. Boolean() 方法的强制转换规则
方法的规则是：除了 undefined、 null、 false、 ‘’、 0（包括 +0，-0）、 NaN 转换出来是 false，其他都是 true。

Boolean(0)          //false
Boolean(null)       //false
Boolean(undefined)  //false
Boolean(NaN)        //false
Boolean(1)          //true
Boolean(13)         //true
Boolean('12')       //true

隐式类型转换

凡是通过逻辑运算符 (&&、 ||、 !)、运算符 (+、-、*、/)、关系操作符 (>、 <、 <= 、>=)、相等运算符 (==) 或者 if/while 条件的操作，如果遇到两个数据类型不一样的情况，都会出现隐式类型转换。

1. ‘==’ 的隐式类型转换规则

类型相同，无须进行类型转换
其中一个操作值是 null 或者 undefined，那么另一个操作符必须为 null 或者 undefined，才会返回 true，否则都返回 false
其中一个是 Symbol 类型，那么返回 false
两个操作值如果为 string 和 number 类型，那么就会将字符串转换为 number
一个操作值是 boolean，那么转换成 number
一个操作值为 object 且另一方为 string、number 或者 symbol，就会把 object 转为原始类型再进行判断（调用 object 的 valueOf/toString 方法进行转换）

null == undefined       // true  规则2
null == 0               // false 规则2
'' == null              // false 规则2
'' == 0                 // true  规则4 字符串转隐式转换成Number之后再对比
'123' == 123            // true  规则4 字符串转隐式转换成Number之后再对比
0 == false              // true  e规则 布尔型隐式转换成Number之后再对比
1 == true               // true  e规则 布尔型隐式转换成Number之后再对比
var a = {
  value: 0,
  valueOf: function() {
    this.value++;
    return this.value;
  }
};
// 注意这里a又可以等于1、2、3
console.log(a == 1 && a == 2 && a ==3);  //true f规则 Object隐式转换
// 注：但是执行过3遍之后，再重新执行a==3或之前的数字就是false，因为value已经加上去了，这里需要注意一下

2. ‘+’ 的隐式类型转换规则

+’ 号操作符，不仅可以用作数字相加，还可以用作字符串拼接。仅当 ‘+’ 号两边都是数字时，进行的是加法运算；如果两边都是字符串，则直接拼接，无须进行隐式类型转换。
除了上述比较常规的情况外，还有一些特殊的规则，如下所示。

如果其中有一个是字符串，另外一个是 undefined、null 或布尔型，则调用 toString() 方法进行字符串拼接；如果是纯对象、数组、正则等，则默认调用对象的转换方法会存在优先级（下一讲会专门介绍），然后再进行拼接。
如果其中有一个是数字，另外一个是 undefined、null、布尔型或数字，则会将其转换成数字进行加法运算，对象的情况还是参考上一条规则。
如果其中一个是字符串、一个是数字，则按照字符串规则进行拼接。

1 + 2             // 3  常规情况
'1' + '2'         // '12' 常规情况

// 下面看一下特殊情况
'1' + undefined   // "1undefined" 规则1，undefined转换字符串
'1' + null        // "1null" 规则1，null转换字符串
'1' + true        // "1true" 规则1，true转换字符串
'1' + 1n          // '11' 比较特殊字符串和BigInt相加，BigInt转换为字符串
1 + undefined     // NaN  规则2，undefined转换数字相加NaN
1 + null          // 1    规则2，null转换为0
1 + true          // 2    规则2，true转换为1，二者相加为2
1 + 1n            // 错误  不能把BigInt和Number类型直接混合相加
'1' + 3           // '13' 规则3，字符串拼接

整体来看，如果数据中有字符串，JavaScript 类型转换还是更倾向于转换成字符串，因为第三条规则中可以看到，在字符串和数字相加的过程中最后返回的还是字符串。

3.Object 的转换规则

对象转换的规则，会先调用内置的 [ToPrimitive] 函数，其规则逻辑如下：

如果部署了 Symbol.toPrimitive 方法，优先调用再返回
调用 valueOf()，如果转换为基础类型，则返回
调用 toString()，如果转换为基础类型，则返回
如果都没有返回基础类型，会报错

var obj = {
  value: 1,
  valueOf() {
    return 2;
  },
  toString() {
    return '3'
  },
  [Symbol.toPrimitive]() {
    return 4
  }
}
console.log(obj + 1); // 输出5
// 因为有Symbol.toPrimitive，就优先执行这个；如果Symbol.toPrimitive这段代码删掉，则执行valueOf打印结果为3；如果valueOf也去掉，则调用toString返回'31'(字符串拼接)
// 再看两个特殊的case：
10 + {}
// "10[object Object]"，注意：{}会默认调用valueOf是{}，不是基础类型继续转换，调用toString，返回结果"[object Object]"，于是和10进行'+'运算，按照字符串拼接规则来，参考'+'的规则C
[1,2,undefined,4,5] + 10
// "1,2,,4,510"，注意[1,2,undefined,4,5]会默认先调用valueOf结果还是这个数组，不是基础数据类型继续转换，也还是调用toString，返回"1,2,,4,5"，然后再和10进行运算，还是按照字符串拼接规则，参考'+'的第3条规则

参考

代码基本功测试（上）：JS 的数据类型你了解多少？

js的8种数据类型

踏青小能手