js实现万能判断数据类型函数

在实际开发中，经常需要判断数据类型，由于数据类型多种多样，使用的api也多种多样，比如

• 判断基础类型可以使用typeof，但是 typeof null 会被判定为 object；
• 判断数组类型可以使用Array.isArray()；
• instanceof一般用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上，而不是用于判断数据类型；

例如

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Person{
  constructor(name) {
    this.name = name;
  }
}

const dog = new Animal("狗");
const cat = new Animal("猫");

console.log(dog instanceof Animal);	 // true
console.log(cat instanceof Person);	 // false
console.log(cat instanceof Object);  // true
console.log([] instanceof Object);	 // true

这里封装一个万能判断数据类型函数，用于判断各种数据类型

const getTypeOf = (arg) => Object.prototype.toString.call(arg).replace(/\[object (\w+)\]/, "$1").toLowerCase();

测试各种数据类型

const testObj = {
  isString: "测试数据类型",
  isNumber: 12,
  isBoolean: false,
  isNull: null,
  isUndefined: undefined,
  isSymbol: Symbol(1),
  isObject: {},
  isFunction: function () {},
  isArray: [],
  isDate: new Date(),
  isSet: new Set(),
  isWeakSet: new WeakSet(),
  isMap: new Map(),
  isWeakMap: new WeakMap(),
  isPromise: new Promise((resolve, reject) => {}),
  isRegExp: new RegExp(),
  isError: new Error(),
  isReflect: Reflect,
  isWindow: window,
  isLocation: window.location,
  isNavigator: window.navigator,
  isScreen: window.screen,
  isHistory: window.history,
  isDocument: window.document,
  isDivDom: document.createElement("div"),
  isSpanDom: document.createElement("span"),
  isADom: document.createElement("a"),
  isPDom: document.createElement("p"),
  isTextDom: document.createTextNode("文本节点"),
  isIDom: document.createElement("i"),
  // 其他dom元素类型一般为 htmlelement
};

for (const key in testObj) {
  console.log(`${key} ----> ${isTypeOf(testObj[key])}`);
}

控制台打印日志如下

在开发过程中，可以创建dataType.js文件，用于判断数据类型

const getTypeOf = (arg) => Object.prototype.toString.call(arg).replace(/\[object (\w+)\]/, "$1").toLowerCase();

export const isString = (value) => getTypeOf(value) === "string";
export const isNumber = (value) => getTypeOf(value) === "number";
export const isBoolean = (value) => getTypeOf(value) === "boolean";
export const isNull = (value) => getTypeOf(value) === "null";
export const isUndefined = (value) => getTypeOf(value) === "undefined";
export const isSymbol = (value) => getTypeOf(value) === "symbol";
export const isObject = (value) => getTypeOf(value) === "object";
export const isFunction = (value) => getTypeOf(value) === "function";
export const isArray = (value) => getTypeOf(value) === "array";
export const isDate = (value) => getTypeOf(value) === "date";
export const isSet = (value) => getTypeOf(value) === "set";
export const isWeakSet = (value) => getTypeOf(value) === "weakset";
export const isMap = (value) => getTypeOf(value) === "map";
export const isWeakMap = (value) => getTypeOf(value) === "weakmap";
export const isPromise = (value) => getTypeOf(value) === "promise";
export const isRegExp = (value) => getTypeOf(value) === "regexp";
export const isError = (value) => getTypeOf(value) === "error";
export const isBigInt = (value) => getTypeOf(value) === "bigint";
export const isReflect = (value) => getTypeOf(value) === "reflect";
// 需要其他类型可以继续往下加

import { isPromise, isMap } from "@/common/dataType.js"
// 各种业务代码
// ......