使用工具函数判断类型,让项目瞬间提升B格

198 阅读2分钟

本人已参与「新人创作礼」活动,一起开启掘金创作之路。

常规的判断方法

在项目的很多地方都需要去判断数据类型。你还在使用像这样的判断吗👇


if (typeof params === 'number'){
    ....
}

这样的写法在功能上是没有问题的。

但是他还有优化的空间。

他的不足有

  • 当我们需要判断某一个类型的时候要现场去想判断方式,比如判断一个变量是否是数组类型的时候,一些不熟悉的小伙伴可能还需要花一点时间去想。
  • 使用 typeof params === "type" 这种写法,不美观。多个类型判断在一起的时候会比较长,不好看。 举个例子
    if(typeof params1 === "undefined" && typeof params2 === "null" && typeof params3 === "number" ){
        .....
    }

和使用工具判断函数

    if(isUndefined(params1) & isNumber(params2) && isNull(params3)){
        .....
    }

工具函数相对的要直观那么一点点。

现在工程化的项目中,注重项目规范的公司在总会utils文件下加一个is.js文件,用于存储判断函数。

以下附上工具函数。大家可以直接复制走,文件最好命名为is.js

/*
    判断文件  is.js
*/

const toString = Object.prototype.toString;

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

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

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

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

export const isEmpty = (val):boolean => {
    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): boolean => is(val, "Date");

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

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

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

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

//判断是否是Promise类型
export const isPromise = (val): boolean => {
    return (
        is(val, "promise") &&
        isObject(val) &&
        isFunction(val.then) &&
        isFunction(val.catch)
    )
}

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

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

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

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

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

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

使用方式

 import {isNumber,isUnDef} from "@/utils/is.js"
 
 const num = 1;
 const str = "昨晚所有的基金都是绿的,只有我的眼睛是红的";
 if(isNumber(num) && isString(str)){
     ...
 }
欢迎技术沟通,摸鱼聊天~

备注来自掘金~

wx:XXF1096032096