JavaScript 有哪些数据类型 以及获取与判断的方法

引言

  对我来说什么时候写博客呢？无非就几种情况，一种是对某些知识了解不清楚需要巩固。一种是遇到问题上网找了很久没有合适的答案，最终找到了解决方案，为了方便广大同行能快速定位解决问题。最后一种就是有些小心得，分享记录一下自己的感受。

  本篇信息主题其实算是很基础很基础的东西，但是就是这些基础有很多时候却被我忽略以至于弄混淆，现在就需要总结巩固一下了。

数据类型

一共八种，七种原始数据类型和对象

原始数据类型

也称为基本类型，分别是 Boolean、 Null、 Undefined、 Number、 BigInt、 String、 Symbol

1.Boolean 类型

布尔类型，是一种取值仅能为 真 或 假 的数据类型，可以有两个值：true 和 false。
其他数据类型也被区分为 truthy(真值)，falsy (虚值)。在 Boolean 上下文中会被转换为 true 或者 false进行判断。
比如下面：
取反（!）、异或判断（||,&&）、Boolean()、if()

false、undefined、null、正负0、NaN、空字符串'' 以外的都是 truthy(真值)

2.Null 类型

Null 类型只有一个值： null。
就是我们常说的空指针

3.Undefined 类型

一个已声明的变量（未赋值）的初始值是 undefined。未声明的使用直接报错 is not defined。
以下几种情况也返回 undefined
获取对象不存在（原型链上也不存在）的属性、调用没有返回值的函数、typeof判断未声明或者已声明未赋值的变量

undefined不存在属性，因此前端最常见的报错（没有之一）就是 Cannot read property ‘xxx’ of undefined。

4.Number 类型

基于 IEEE 754 标准的双精度 64 位二进制格式的值（-(2⁵³ -1) 到 2⁵³ -1)，在javascript中称为安全整数，超过这个限制的数计算不精确。
最大安全整数 Number.MAX_SAFE_INTEGER === 2⁵³ -1
最小安全整数 Number.MIN_SAFE_INTEGER === -(2⁵³ -1）

除了常见数值外， +Infinity，-Infinity 和 NaN 也是Number类型

5.BigInt 类型

BigInt类型是 JavaScript 中的一个基础的数值类型，可以表示任意大的整数（甚至可以超过安全整数限制）
BigInt 类型可以使用常用运算 +、*、-、**、% ，除 >>> （无符号右移）之外的 位操作 也可以支持
不支持单目 (+) 运算符（如：+2）
不能与Number 类型混合计算
不能使用Math 的方法

6.String 类型

字符串类型，JavaScript 字符串是不可更改的，但是，可以基于对原始字符串的操作来创建新的字符串
可以使用String.concat()、连字符（+） 拼接字符串
可以使用String 方法，如：replace、substr、slice等

7.Symbol 类型

符号类型，符号类型唯一且不可修改，可以作为Object 的 key，作为key 的Symbol 不可枚举。

对象

常见对象分为 "标准的" 对象{}、数组 []、函数 function(){} 等

1.“标准的” 对象

就是 键 和 值 之间的映射集合，键 是一个字符串（或者 Symbol） ，值 可以是任意类型的值。

2.数组

数组默认是有序整数作为 键属性（也可以使用字符串，Symbol）， 值 可以是任意类型的值，类似于列表的高阶对象，表示列表和集合的最适合方式。

3.函数

分为普通函数 function(){} 和 箭头函数（=>）。
Date、Object、RegExp、String 等等都是函数，JavaScript 的内置函数，可以通过 new 关键字创建对象实例。
自己创建的普通函数也可以创建实例，箭头函数不能。

获取与判断类型

原生判断方式有两种，通过typeof返回判断，和通过 instanceof 查找原型链是否存在的方式判断。

1.typeof

typeof true	  		// boolean
typeof undefined   	// undefined
typeof document.all // undefined
typeof 3 			// number
typeof NaN			// number
typeof 3n			// bigint
typeof 'abc'		// string
typeof []			// object
typeof {}			// object
typeof null   		// object
typeof /\s/			// object
typeof new Map()	// object
typeof new Set()	// object
typeof Date			// function

typeof把 数组 与 null 、Map、Set 都判断为 object 了，其他的确实是对象这也能理解。但是 null 判断为对象，就是javascript 设计之初就存在的bug了。

如果想要把类似 数组、Map、Set、null 等明确区分，可以自己写一个判断类型函数。如下：

function getType(obj) {
	return Object.prototype.toString.call(obj).match(/(?<=\s)[a-zA-Z]+/)[0].toLowerCase()
}

// ({}).toString.call(23424).replace(/^.*?\s|]/g, '').toLowerCase()
// 同上

在看一下上面的数据用getType 判断

getType(true)	  	// boolean
getType(undefined)  // undefined
getType(document.all)// htmlallcollection
getType(3) 			// number
getType(NaN)		// number
getType(3n)			// bigint
getType('abc')		// string
getType([])			// array
getType({})			// object
getType(null)   	// null
getType(/\s/)		// regexp
getType(new Map())	// map
getType(new Set())	// set
getType(Date)		// function

2.instanceof

用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

function A(){} 
function B(){} 

var a = new A();

a instanceof A; // true，因为 Object.getPrototypeOf(a) === A.prototype
a instanceof B; // false，因为 B.prototype 不在 a 的原型链上

a instanceof Object; // true，因为 Object.prototype.isPrototypeOf(a) 返回 true

我们常用来判断某个数据是否是某种类型，比如这里判断数组：

var a = [];
var b = '234'

a instanceof Array // true，因为 Object.getPrototypeOf(a) === Array.prototype
b instanceof Array // false，因为 Array.prototype 不在 b 的原型链上

a instanceof Object; // true，因为 Object.prototype.isPrototypeOf(a) 返回 true
b instanceof Object; // false，因为 Object.prototype.isPrototypeOf(b) 返回 false

总结

   关于javascript 数据类型以及获取类型以及判断类型就整理这些了。更多信息可以去MDN JavaScript 上看，上面写的很详细，每个属性之间的关联也整理的很清楚。

以上信息如有疏漏或错误，欢迎指正。