前端面试必考之数据类型及其检测详解

数据类型及其检测可以说是前端面试必考的了，今天详细总结一下数据类型和检测的五种方法

一、 JavaScript的数据类型

JavaScript有两种数据类型,分别是基本数据类型和引用数据类型。
基本数据类型：Undefined、Null、Number、String、Boolean、Symbol(ES6新增，表示独一无二的值)。
引用数据类型：统称为Object对象，主要包括对象、数组和函数。

基本数据类型

---

• 值是不可变的
• 存放在栈区。
  原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定、属于被频繁使用数据，所以放入占中存储。
• 值的比较。(==和===)

引用数据类型

---

• 值是可变的
• 同时保存在栈内存和堆内存
  引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址
• 比较是引用的比较

二、检测数据类型

typeof

---

typeof返回一个表示数据类型的字符串。
返回的结果有：number、string、boolean、symbol、undefined、function、object等七种数据类型，但不能判断null、array等：

typeof null; //object 无效
typeof [] ; //object 无效
typeof new Date(); //object 无效
typeof new RegExp(); //object 无效

这时需要用instance of来判断

instanceof

---

instanceof用来判断A是否是B的实例，表达式为：A instanceof B,如果是返回true，否则返回false。
instanceof用来检测一个对象在其原型链中是否存在一个构造函数的prototype属性。

[] instanceof Array; //true
{} instanceof Object;//true
new Date() instanceof Date;//true
new RegExp() instanceof RegExp//true

对于数组的类型判断，还可以用ES6新增Array.isArray()
instanceof三大弊端：

• 对于基本数据类型,字面量创建出来的结果和实例创建的有一定区别

  console.log(1 instanceof Number)//false
  console.log(new Number(1) instanceof Number)//true
  

  从严格上讲，只有实例创建出来的结果才是标准的对象数据类型；字面量创建出来的结果是基本的数据类型，不是严谨的实例，但由于JS松散的特点，导致了可以使用Number.prototype上提供的方法。
• 在类的原型继承中，最后检测出来的结果未必准确

  var arr = [1, 2, 3];
  console.log(arr instanceof Array) // true
  console.log(arr instanceof Object);  // true
  function fn(){}
  console.log(fn instanceof Function)// true
  console.log(fn instanceof Object)// true
  

• 不能检测null和undefined。对于特殊数据类型null和undefined，它们所属的类是Null和Undefined，但浏览器把这两个类保护起来了，不允许我们在外部进行访问

严格运算符===

---

可以用来判断null和undefined

constructor

---

constructor作用和instanceof非常相似，但constructor检测Object与constructor不一样，还可以处理基本数据类型和检测。

var aa=[1,2];
console.log(aa.constructor===Array);//true
console.log(aa.constructor===RegExp);//false
console.log((1).constructor===Number);//true
var reg=/^$/;
console.log(reg.constructor===RegExp);//true
console.log(reg.constructor===Object);//false

constructor的两大弊端：

• null和undefined是无效的对象，因此不会有constructor存在，这两种类型的数据需要通过其它方式来判断。
• 函数的constructor是不稳定的，这个主要体现在可以把类的原型进行重写，这样检测出来的结果是不准确的。

function Fn(){}
Fn.prototype = new Array()
var f = new Fn
console.log(f.constructor)//Array

Object.prototype.toString.call()

---

这个是最精确最常用的方式。
首先获取Object原型上的toString方法，让方法执行，让toString方法中的this指向第一个参数的值。
Object上的toString并不是用来转换字符串的，而是返回当前方法的执行主体（方法中的this）所属类的详细信息即"[object Object]"，其中第一个object代表当前实例是对象数据类型的(这个是写死的)，第二个Object代表的是this所属的类是Object

Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window是全局对象global的引用