你还在直接使用Object.prototype.toString.call()吗?该提升一下逼格了

4,167 阅读2分钟

缘起

事情,是这样的。昨天,在开发一个需求的时候。我遇见一个场景需要我判断五种类型的值。然后就有了以下场面↓

image.png

是不是贼难看。给人感觉很长不美观。在我优雅的代码里面绝不允许出现这么违和的代码。 而且。我居然要写Object.prototype.toString.call(loca) === [Object String]那么长一串。对于我这样的手残党来说,写代码当然是越短越好咯。

我想起了以前给某大厂做外包的时候。他们的项目架构里面有这么一个文件:is.ts。这个文件封装好了所有类型判断。可以为开发工作增加很多便利。所以我就自己写了一个。给大家分享一下。

is判断文件

/**
 * 判断文件
 * 
 * 如果你需要类型判断,请不要再使用 Object.prototype.toString.call()方法
 * 直接调用我们下方封装好的is函数即可
 * 我想,以下函数,已经可以满足所有情况下的类型判断
 */

export const toString = Object.prototype.toString;

export const is = (val, type) => toString.call(val) === `[object ${type}]`;

//判断非undefined
export const isDef = (val) => typeof val !== 'undefined';

//判断是undefined
export const isUnDef = (val) => !isDef(val);

//判断是否是对象
export const isObject = (val) => val !== null && toString.call(val) === `[object Object]`;

export const isEmpty = (val) => {
    if (isArray(val) || isString(val)) return val.length === 0;
    if (val instanceof Map || val instanceof Set) return val.size === 0;
    if (isObject(val)) return Object.keys(val).length === 0;
    return;
}

//判断是否是时间类型
export const isDate = (val) => is(val, "Date");

//判断是否是null类型
export const isNull = (val) => val === null;

//判断不可访问类型
export const isNullAndUnDef = (val) => isUnDef(val) && isNull(val);

//判断undefined和null其中一个
export const isNullOrUnDef = (val) => isUnDef(val) || isNull(val);

//判断是否是数字类型
export const isNumber = (val) => is(val, "Number");

//判断是否是Promise类型
export const isPromise = (val) => {
    return (
        is(val, "Promise")
    )
}

//判断是否是字符类型
export const isString = (val) => is(val, "String");

//判断是否为函数
export const isFunction = (val) => typeof val === "function";

//判断是否为booean类型
export const isBoolean = (val) => is(val, "Boolean");

//判断是否是正则表达式
export const isRegExp = (val) => is(val, "RegExp");

//判断是否是数组
export const isArray = (val) => val && Array.isArray(val);

//判断是否是window对象
export const isWindow = (val) => typeof window !== "undefined" && is(val, "Window");

在utils文件夹下面建立一个is.js/is.ts,然后把以上内容直接复制进去即可。

同样的判断使用封装函数后是这样的👇

image.png

将类型判断封装后会比封装前的类型判断更简短更可读