JavaScript之数据类型、类型判断、类型转换

数据类型

基础类型

字符串（String）：字符串是存储字符的变量。 字符串可以是引号中的任意文本。可以使用单引号或双引号。

数字 (Number)：JavaScript只有一种数字类型，数字可以带小数点，也可以不带。

布尔 (Boolean)：布尔（逻辑）只能有两个值：true 或 false。

空（Null）：可以通过将变量的值设置为null来清空变量，只有一个值：null。

未定义（Undefined）：表示变量不含有值，只有一个值：undefined。

原始数据类型（Symbol）,是ES6引入的一种新的原始数据类型，表示独一无二的值。

特殊数字（BigInt）：是一种数字类型的数据，它可以表示任意大小、任意精度格式的整数。
1
2
3
4
5
6
7
8
9
10
11
12
13

引用（对象）数据类型

引用(对象)数据常见类型：

对象 (Object)：对象由花括号分隔，在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔。

数组 (Array)：数组对象是使用单独的变量名来存储一系列的值。

函数 (Function)：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
1
2
3
4
5

特殊的对象：

正则（RegExp）：RegExp是正则表达式的简写，它描述了字符的模式对象。当检索某个文本时，可以使用一种模式来描述要检索的内容，RegExp就是这种模式。

日期（Date）：日期对象用于处理日期和时间。

算数(Math) : 执行常见的算数任务。
1
2
3
4
5

注意

NaN 的数据类型是 number

数组(Array)的数据类型是 object

日期(Date)的数据类型为 object

null 的数据类型是 object

未定义变量的数据类型为 undefined
1
2
3
4
5
6
7
8
9

区别

1.基础类型存储在栈内存，被引用或拷贝时，会创建一个完全相等的变量

2.引用类型存储在堆内存，存储的是地址，多个引用指向同一个地址，会涉及一个“共享”的概念

let a = {name: 'aaa'}
let b = a;
console.log(a.name);  // aaa
b.name = 'bbb';
console.log(a.name);  // bbb
console.log(b.name);  // bbb
1
2
3
4
5
6

数据类型的判断

typeof

typeof可以判断基础数据类型，null除外，但是引用数据类型中，除function类型以外，其余都是 ‘object’，是无法判断出来的。

注意：虽然typeof null输出object，但这是JS存在的一个Bug，不代表null就是引用数据类型，并且null 本身也不是对象。

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'
1
2
3
4
5
6
7
8
9
10

instanceof

当new一个对象时，则新对象就是它原型链继承上面的对象，通过instanceof能判断这个对象是否是之前构造函数生成的对象，这样就基本可以判断出这个新对象的数据类型。

instanceof可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型

let User = function() {}
let u = new User()
u instanceof User // true
let user = new String('user')
user instanceof String // true
let str = 'str'
str instanceof String // false
1
2
3
4
5
6
7

自定义实现instanceof方法

function myInstanceof(a, b) {
  // 先用typeof来判断基础数据类型，是则直接返回false
  if(typeof a !== 'object' || a === null) return false;
  // getProtypeOf是Object对象自带的API，能够拿到参数的原型对象
  let aa = Object.getPrototypeOf(a);
  while(true) {                  
    // 循环寻找，直到找到相同的原型对象
    if(aa === null) return false;
    //找到相同原型对象，返回true
    if(aa === b.prototype) return true;
    aa = Object.getPrototypeof(aa);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

验证

console.log(myInstanceof(new Number(10), Number));    // true

console.log(myInstanceof(10, Number));                // false
1
2
3

Object.prototype.toString

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

Object.prototype.toString.call() 可以很好地判断引用类型，甚至可以把document和window都区分开来。值得注意的是：这个方法最后返回统一字符串格式为[object Xxx]，字符串里面的 “Xxx” ，第一个首字母要大写，使用typeof返回的是小写。

Object.prototype.toString({})       // "[object Object]"
Object.prototype.toString.call({})  // "[object Object]"
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]"
1
2
3
4
5
6
7
8
9
10
11
12
13

自定义数据类型判断

function myType(obj){
  let type  = typeof obj;
  // 进行typeof判断，是基础数据类型直接返回
  if (type !== "object") {    
    return type;
  }
  // typeof返回结果是object，再进行正则判断返回结果
  return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1'); 
}
1
2
3
4
5
6
7
8
9

验证

myType([])     // "Array" typeof []是object
myType('10')  // "string" typeof直接返回
myType(window) // "Window" toString返回
myType(null)   // "Null" typeof null是object，需toString来判断
myType(undefined)   // "undefined" typeof直接返回
myType()            // "undefined" typeof直接返回
myType(function(){}) // "function" typeof判断为function，直接返回
myType(/123/g)      //"RegExp" toString返回
1
2
3
4
5
6
7
8

数据类型的转换

强制类型转换

强制类型转换方式包括 Number()、parseInt()、parseFloat()、toString()、String()、Boolean()，都是通过自身的方法来进行数据类型的强制转换。

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

如果是布尔值，true 和 false 分别被转换为 1 和 0

如果是数字，返回自身

如果是 null，返回 0

如果是 undefined，返回 NaN

如果字符串中只包含数字（或者是 0X / 0x 开头的十六进制数字字符串，允许包含正负号），则将其转换为十进制
如果字符串中包含有效的浮点格式，将其转换为浮点数值
如果是空字符串，将其转换为 0
如果不是以上格式的字符串，均返回 NaN

如果是 Symbol，抛出错误

如果是对象，并且部署了 [Symbol.toPrimitive] ，那么调用此方法，否则调用对象的 valueOf() 方法，然后依据前面的规则转换返回的值
如果转换的结果是 NaN ，则调用对象的 toString() 方法，再次依照前面的顺序转换返回对应的值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

示例：

Number(true);        // 1
Number(false);       // 0
Number('010');      //10
Number(null);        //0
Number('');          //0
Number('1a');        //NaN
Number(-0X10);       //-16
Number('0X10')       //16
1
2
3
4
5
6
7
8

Boolean() 方法的强制转换规则

除了 undefined、 null、 false、 ''、 0（包括 +0，-0）、 NaN 转换出来是 false，其他都是 true
1

Boolean(0)          //false
Boolean(null)       //false
Boolean(undefined)  //false
Boolean(NaN)        //false
Boolean(1)          //true
Boolean(10)         //true
Boolean('10')       //true
1
2
3
4
5
6
7

隐式类型转换

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

==的隐式类型转换规则

如果类型相同，无须进行类型转换

如果其中一个操作值是 null 或者 undefined，那么另一个操作符必须为 null 或者 undefined，才会返回 true，否则都返回 false

如果其中一个是 Symbol 类型，那么返回 false

两个操作值如果为 string 和 number 类型，那么就会将字符串转换为 number

如果一个操作值是 boolean，那么转换成 number

如果一个操作值为 object 且另一方为 string、number 或者 symbol，就会把 object 转为原始类型再进行判断,调用object的valueOf/toString方法进行转换
1
2
3
4
5
6
7
8
9
10
11

null == undefined       // true
null == 0               // false
'' == null              // false
'' == 0                 // true 字符串转隐式转换成Number
'10' == 10              // true 字符串转隐式转换成Number
0 == false              // true 布尔型隐式转换成Number
1 == true               // true 布尔型隐式转换成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 Object隐式转换,注意：再重新执行a==3或之前的数字就是false，因为value已经加上去了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

+的隐式类型转换规则

‘+’ 号操作符，不仅可以用作数字相加，还可以用作字符串拼接。仅当 ‘+’ 号两边都是数字时，进行的是加法运算。如果两边都是字符串，则直接拼接，无须进行隐式类型转换。

如果其中有一个是字符串，另外一个是undefined、null 或布尔型，则调用toString()方法进行字符串拼接
如果是纯对象、数组、正则等，则默认调用对象的转换方法会存在优先级，然后再进行拼接。

如果其中有一个是数字，另外一个是undefined、null、布尔型或数字，则会将其转换成数字进行加法运算。

如果其中一个是字符串、一个是数字，则按照字符串规则进行拼接
1
2
3
4
5
6

1 + 2        // 3  
'1' + '2'    // '12' 

'1' + undefined   // "1undefined" undefined转换字符串
'1' + null        // "1null" null转换字符串
'1' + true        // "1true" true转换字符串
'1' + 1n          // '11' 特殊字符串和BigInt相加，BigInt转换为字符串
1 + undefined     // NaN  undefined转换数字相加NaN
1 + null          // 1    null转换为0
1 + true          // 2    true转换为1，二者相加为2
1 + 1n            // 错误  不能把BigInt和Number类型直接混合相加
'1' + 2           // '12' 字符串拼接
1
2
3
4
5
6
7
8
9
10
11
12

Object转换规则

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

如果有Symbol.toPrimitive方法，则优先调用再返回

调用valueOf()，如果转换为基础类型，则返回

调用toString()，如果转换为基础类型，则返回

如果都没有返回基础类型，会报错
1
2
3
4
5
6
7

var obj = {
  value: 1,
  valueOf() {
    return 2;
  },
  toString() {
    return '3'
  },
  [Symbol.toPrimitive]() {
    return 4
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

验证

// 有Symbol.toPrimitive则优先执行，没有则执行valueOf打印结果为3
// 没有Symbol.toPrimitive与valueOf，则调用toString返回'31'，进行字符串拼接
console.log(obj + 1); // 输出5

// {}会默认调用valueOf是{}，不是基础类型继续转换，调用toString，返回结果"[object Object]"，于是和10进行'+'运算，按照字符串拼接规则来
10 + {} // "10[object Object]"

// [1,2,undefined,4,5]会默认先调用valueOf结果还是这个数组，不是基础数据类型继续转换，也还是调用toString，返回"1,2,,4,5"，然后再和10进行运算，还是按照字符串拼接规则
[1,2,undefined,4,5] + 10 // "1,2,,4,510"
1
2
3
4
5
6
7
8
9