js数据类型检测的几种方法的原理及其优缺点

js数据类型检测的几种方法的原理及其优缺点

在日常开发中总是会用到类型检测，今天就总结一下常用的类型检测方法

1.typeof （检测基本类型值）

1） 使用时直接 typeof 要检测的类型值，比如

2） typeof 可以检测 number、string、boolean、null、undefined、symbol、Bigint这些基本类型值。

3）对于引用类型只可以检测出object（包括不同对象、数组、正则、日期等等）、function
也就是说不管对象类型具体为什么类型都显示为 object比如：

4）关于typeof的一些细节： 返回的结果都是字符串，还有对于null的检测结果也为object

2.instanceof（可用来检测具体对象类型）

1）使用时 [要检测的数据] instanceof [要验证的对象类型]比如

2）返回一个boolean数据，来判断是否属于数据该类

3）原理就是通过原型链来判断实例的__proto__是否与检测类型的prototype一致，比如

可以看到数组检测object也为true，其实就是根据原型链循环的比对就像如下

4）关于instanceof的细节问题

instanceof无法检测基本类型值，比如一个number、string等，如下所示

除非是number类的实例

3.通过constructor 判断实例个类的关系

1）使用时就[要判断的类型值].constructor === [需要验证的类]，比如

2）原理也是通过原型链，我们知道原型prototype上都有一个constructor属性指向其构造函数。所以实例获取constructor时，自身没有这个属性，向原型上找然后比对

3）问题也一样，无法判断基本类型值

4. 使用Object的toString方法来判断

1）使用时Object.prototype.toString.call(需要判断的值)，比如

2）通过call来改变Object的toString方法的this指向，从而达到判断类型的效果

3）此方法即可以判断值类型，也可以判断引用类型值，比较常用

4）我们日常开发可以用这个方法封装一个工具方法来使用

/**
 * @function isType 判断数据类型
 * @param {*} data 需要检测的数据
 * @param {*} type 期望数据类型
 * @return {Boolean} 是否是期望数据类型
 */
function isType(data, type) {
  const typeObj = {
    '[object String]': 'string',
    '[object Number]': 'number',
    '[object Boolean]': 'boolean',
    '[object Null]': 'null',
    '[object Undefined]': 'undefined',
    '[object Object]': 'object',
    '[object Array]': 'array',
    '[object Function]': 'function',
    '[object Date]': 'date',
    '[object RegExp]': 'regExp',
    '[object Map]': 'map',
    '[object Set]': 'set',
    '[object HTMLDivElement]': 'dom',
    '[object WeakMap]': 'weakMap',
    '[object Window]': 'window',
    '[object Error]': 'error',
    '[object Arguments]': 'arguments'
  };
  const name = Object.prototype.toString.call(data);
  const typeName = typeObj[name] || 'Unknown Type';
  return typeName === type;
}