js如何进行类型区分判断

js的数据类型及判断

---

本文介绍js的基础类型及类型判断的几种方式

---

前言

js的数据类型有哪些？symbol是什么？bigInt了解嘛？本章总结js的数据类型及新增的类型及他们的区别和区分判断的几种方式。

---

一、js有几种基础数据类型？几种新增？

js 8种基础数据类型：undefined、null、Boolean、number、string、object 及两种新增：symbol、bigInt

symbol：独一无二且不可变的；解决全局变量冲突、内部变量覆盖的问题
bigInt：任意精度正数。安全地存储和操作大量数据，即便超出了number的安全整数范围。

二、基础数据类型如何进行分类？

1. 可以分为 原始数据类型 和 引用数据类型
   原始数据类型：undefined、null、Boolean、number、string
   引用数据类型：对象、数组、函数
2. 使用效果不同
   原始数据类型直接赋值后，不存在引用关系，不会对之前的数据产生影响
   引用数据类型存在属性引用关系，赋值后可能对之前的数据产生影响
3. 存储位置不同
   栈存储：原始数据类型，空间小、大小固定、操作频繁
   堆存储：引用数据类型，数据量大、大小不固定赋值给的是地址

栈存储：先进后出栈维护结构，栈区由编译器自动分配释放，以临时变量的方式界定。
堆存储：由开发者进行分配，直到应用结束

三、如何进行类型区分判断？

1. typeof

typeof 2 // number
typeof true  // Boolean
问题
typeof {}  // object
typeof []  //  object

• 需要注意的特例

typeof null // object
typeof NaN  // number   

2. instanceof

2 instanceof Number  // true
[] instanceof Array // true
问题：需要一个一个试

• instanceof 原理实现？
• 通过翻户口本，查家庭信息

function myInstance(left, right){
	// 获取对象的原型
	let _proto = Object.getPrototypeOf(left);
	//  构造函数的prototype
	let _prototype = right.prototype;
	while(true) {
		if (!_proto) {
			return false;
		}
		if(_proto === _prototype){
			return true;
		}
		_proto = Object.getPrototypeOf(_proto);
	}
}

3. constructor

(2).constructor === Number  // true
([]).constructor === Array  // true

• 有什么隐患
  consstructor 代表的是构造函数指向的类型，构造函数是可以被修改的。

function Fn() { }
Fn,prototype = new Array();

var f = new Fn();  // 此时constructor是被修改后的。

4. Object.prototype.toString.call()

let a = Object.prototype.toString;
a.call(2)
a.call([])

• 为什么要用call？
  保证tostring是object上的原型方法
• 为什么同样是检测obj调用toString，obj.toString()结果和Object.prototype.toString.call(obj) 结果不一样？
  这是因为 toString 是 Object 的原型方法，而 Array、function 等类 型作为 Object 的实例，都重写了 toString 方法。不同的对象类型调 用 toString 方法时，根据原型链的知识，调用的是对应的重写之后的 toString 方法(function 类型返回内容为函数体的字符串，Array 类型返回元素组成的字符串…)，而不会去调用 Object 上原型 toString 方法(返回对象的具体类型)，所以采用 obj.toString() 不能得到其对象类型，只能将 obj 转换为字符串类型;因此，在想要 得到对象的具体类型时，应该调用 Object 原型上的 toString 方法。

四、 类型转换

1. isNaN 和 Number.isNaN 的区别？

isNaN包含了一个隐式转化

isNaN => 接收参数 => 尝试参数转成数值型，不能被转数值的参数 ，返回true => 非数字值传入返回true

Number.isNaN => 接收参数 => 判断参数是否为数字 => 判断是否为NaN => 不会进行数据类型转换

2. 其他的类型转换场景

转换成字符串：

	null 和 undefined => 'null'  'undefined'
	Boolean  => 'true' 'false'
	Number => '数字'  大数据会转成带有指数形式
	Symbol => '内容'
	普通对象 => '[object object]'

转成数字：

	undefined => NaN
	null => 0
	boolean => true | 1 ; false | 0
	String => 包含非数字的值 NaN  ; 纯数字 数字； 空 0；
	Symbol => 报错
	对象 => 隐式转化成相应的基本值类型， => 相应的转换（字符串）

转成boolean：

	undefined、null、false、+0 -0 、NaN、""   => false