在实际开发中,经常需要判断数据类型,由于数据类型多种多样,使用的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"
// 各种业务代码
// ......