ZI-utils

介绍

收集整理的一些个人常用的工具类。 新手有很多不足，还望多多包涵、指点。

安装

npm i zi-utils

导入与使用

全部导入

import ZiUtils from 'zi-utils';
// 使用
ZiUtils.isEmptyObj({});
ZiUtils.zDate().dateGet('year');

按需导入

import zDate from 'zi-utils/utils/date';
zDate().isBefore('2021-12-05')

import {
    isEmptyObj
} from 'zi-utils/utils/common';
isEmptyObj({});

文档

常用方法

isEmptyObj 判断obj是否是个空对象

参数：obj(object)
返回值：(boolean)  
示例：
    isEmptyObj({}); // => true
    isEmptyObj(10); // => false  

replaceStr 将str中的target替换成res

参数:    
    str(string) - 原字符串
    [target = -](string) - 被替换的字符
    [res = .](string) - 替换的字符
返回值：(string)  
示例：
    replaceStr('aabbcc', 'aa', 'dd'); // => ddbbcc

isNum 判断num是否是正整数或者正小数

参数:
    num(number|string) - 要判断的目标数字
    [type = positive](string) - 根据什么类型去判断 positive - 正整数; decimal - 正整数、小数; whole - 正、负整数、小数
返回值：(boolean)  
示例：
    replaceStr(10); // => true
    replaceStr(-10.2, 'decimal'); // => false

getDecimal 把num四舍五入为指定小数位数的数字

参数:
    num(number|string) - 要处理的目标值
    [digit = 2](number) - 小数位数
返回值：(number)  
示例：
    getDecimal(10.999); // => 11.00
    getDecimal(10.99, 0); // => 11

compare 常用于Array.sort，对指定数组对象中的prop键的值按数字大小进行排序

参数:
    prop(string) - 指定的键值
返回值：(Function)  
示例：
    [{ a: 3 }. { a: 2 }, { a: 4 }].sort(compare('a')); // => [ { a: 2}, { a: 3 }, { a: 4 } ]

getQueryString 获取href中名为name的参数 默认当前页面的href

参数:
    name(string) - 要获取的值
    [href](string) - 原链接
返回值：(any)  
示例：
    getQueryString('a', 'https://ziu?a=10'); // => 10
    getQueryString('a', '?a=A'); // => A

isParent 判断obj元素是否属于parentObj的子元素

参数:
    obj(any) - 子元素
    parentObj(any) - 父元素
返回值：(boolean)  
示例：
    body - body元素
    html - html - 元素
    isParent(body, html); // => true

isJSON 判断是否是JSON字符串

参数:
    str(string) - json字符串
返回值：(boolean)  
示例：
    isJSON('{"a":"10"}'); // => true
    isJSON('"a"="10"'); // => false

JSONParse JSON转化 不能转化时原样输出

参数:
    JSONStr(string) - json字符串
返回值：(Object|String)  
示例：
    JSONParse('{"a":"10"}'); // => { a: 10 }
    isJSON('"a"="10"'); // => "a"="10"

getRandom 获取digits位的随机数 默认获取个位

参数:
    digits(number) - 随机数的位数
返回值：(number)  
示例：
    getRandom(1); // => 6
    getRandom(2); // => 20
    getRandom(3); // => 188

getMinAndMaxRandom 获取从 min 到 max之间的随机数

参数:
    min(number)
    max(number)
返回值：(number)  
示例：
    getMinAndMaxRandom(1, 10); // => 6
    getMinAndMaxRandom(10, 15); // => 12

isHasOwnPro 判断对象是否存在某个键

参数:
    obj(object) - 对象
    key(string) - 要判断是否存在的键
返回值：(boolean)  
示例：
    isHasOwnPro({ a: 'A' }, 'a'); // => true
    isHasOwnPro({ a: 'A' }, 'c'); // => false

queryParams 对象转url参数

参数:
    obj(object) - 对象
    [isPrefix = true](boolean) - 是否自动加上"?"
返回值：(string)  
示例：
    queryParams({a: 'A'}); // => ?a=A
    queryParams({a: 'C'}, false); // => a=C

query2Obj url参数转对象

参数:
    url(string) - 默认当前窗口地址
返回值：(object)  
示例：
    query2Obj('?a=A&b=B'); // => {a: 'A', b: 'B'}
    query2Obj('?a=A&b=10'); // => {a: 'A', b: '10'}

randomSort （洗牌算法）将数组中的值随机排列

参数:
    arr(Array) - 数组
返回值：(Array)  
示例：
    randomSort([1, 2, 8, 10]);

日期方法（模仿dayjs，使用链式调用）

ZDate()等同于ZDate(new Date())
ZDate(time)其中time是可被new Date()格式化的时间格式

format 将时间按 format 的格式格式化

参数:
    [format = Y-M-D](any) - 符合Y-M-D h:m:s的任何格式 除Y、M、D、h、m、s外的任何字符都可自定义
返回值：(string)  
示例：
    zDate('2021-12-05').format('M-D Y'); // => 12-05 2021
    ZDate(1641883433070).format('Y:M:D h:m:s'); // => 2022-01-11 14:43:53
    ZDate(1641883504).format('h:m:s'); // => 14:45:04

isValid 是否是有效日期

参数:
    date(any) - 对象
返回值：(boolean)  
示例：
    ZDate().isValid('2021--10-10'); // => false
    ZDate().isValid('2021-10-10'); // => true

dateGet 获取当前时间的对应单位的值

参数:
    units(string) - 时间单位 year - 年；month - 月；day - 日；hour - 时 minute - 分；second - 秒；millisecond - 毫秒
返回值：(number)  
示例：
    ZDate('2021-10-10').dateGet('year'); // => 2021
    ZDate('2021-12-12 10:20:59').dateGet('day'); // => 12
    ZDate('2021-12-12 10:20:59').dateGet('second'); // => 59

isBefore zDate的时间是否在 date 之前

参数:
    date(any)
返回值：(boolean)  
示例：
    zDate().isBefore('2021-12-05'); // => false
    ZDate('2021-12-01').isBefore('2021-12-05'); // => true

isAfter zDate的时间是否在 date 之后

参数:
    date(any)
返回值：(boolean)  
示例：
    zDate().isBefore('2021-12-05'); // => true
    ZDate('2021-12-01').isBefore('2021-12-05'); // => false

setLaterDate 设置 number(3) units(天)后的日期

参数:
    number(number) - 要增加或者减少的日期值
    units(string) - 单位 year - 年；month - 月；day - 日
返回值：(string)  
示例：
    zDate('2021-12-05').setLaterDate(2, 'day').format(); // => 2021-12-07
    zDate('2021-12-05').setLaterDate(1, 'year').format(); // => 2022-12-05
    zDate('2021-12-05').setLaterDate(1, 'month').format(); // => 2022-1-05

getFirstDay 获取当前时间月的第一天

返回值：(string)  
示例：
    zDate('2022-01-11').getFirstDay().format(); // => 2022-01-01

getLastDay 获取当前时间月的最后一天

返回值：(string)  
示例：
    zDate('2022-01-11').getLastDay().format(); // => 2022-01-31

debounce 防抖 一段时间内 最后一次操作 在 wait 毫秒后执行回调函数

参数:
    cb(Function) - 回调函数
    [wait = 500](number) - 延迟时间
返回值：(string)  
示例：
    const test_func = debounce((str) => {
        console.log(str);
    }, 3000);
    test_func('justice');

debounce 节流 wait毫秒内只执行首次cb

参数:
    cb(Function) - 回调函数
    [delay = 500](number) - 延迟时间
返回值：(string)  
示例：
    const test_func = throttle((str) => {
        console.log(test_str + str);
    });
    test_func('money', 1000);

常用校验

isNum 判断是否是数字（正负数、小数）

参数:
    num(number|string)
返回值：(boolean)  
示例：
    isNum(-1.2); // => true
    isNum(aa); // => false

isCode 校验验证码

参数:
    val(number|string)
    [len = 6](number) - 验证码长度
返回值：(boolean)  
示例：
    isCode(20125); // => false
    isNum(20125, 5); // => true

isMobile 判断是否是手机号（只校验长度）

参数:
    tel(number|string)
返回值：(boolean)  
示例：
    isMobile(13333330022); // => true

isEmpty 判断是否为空（undefined null NaN ''）

参数:
    val(any)
返回值：(boolean)  
示例：
    isEmpty(); // => true
    isEmpty(0); // => false

isNumOrLetter 判断是否是数字或者字母

参数:
    val(number|string)
返回值：(boolean)  
示例：
    isNumOrLetter('12as'); // => true
    isNumOrLetter('12as--das'); // => false

isChinese 判断是否是中文

参数:
    val(string)
返回值：(boolean)  
示例：
    isChinese('牛'); // => true
    isChinese('12as'); // => false

isEmail 判断是否是邮箱

参数:
    val(string)
返回值：(boolean)  
示例：
    isEmail('[e-mail]'); // => true
    isEmail('12as'); // => false

dom操作相关

hasClass 判断 elements 是否有 cName 的class元素

参数:
    elements(Element) - 要判断的元素
    cName(string) - class名
返回值：(boolean)  
示例：
    hasClass(Elm, 'btn--hover'); // => true / false

addClass 向 elements 添加 cName 的class元素

参数:
    elements(Element) - 元素
    cName(string) - class名 
示例：
    addClass(Elm, 'btn--hover');

removeClass 将名为 cName 的 class 元素从 elements 中移除

参数:
    elements(Element) - 元素
    cName(string) - class名 
示例：
    removeClass(Elm, 'btn--hover');

存贮

localStorage

setLStorage localStorage 存贮

参数:
    key(string) - 属性
    value(any) - 值 
示例：
    setLStorage('user_info', { name: 'user' });

getLStorage localStorage 获取 当内容可JSON化时自动JSON化

参数:
    key(string) - 属性
返回值：(any)  
示例：
    getLStorage('user_info');

removeLStorage localStorage 移除

参数:
    key(string) - 属性
示例：
    removeLStorage('user_info');

sessionStorage

setSStorage sessionStorage 存贮

参数:
    key(string) - 属性
    value(any) - 值 
示例：
    setSStorage('user_info', { name: 'user' });

getSStorage sessionStorage 获取 当内容可JSON化时自动JSON化

参数:
    key(string) - 属性
返回值：(any)  
示例：
    getSStorage('user_info');

removeSStorage sessionStorage 移除

参数:
    key(string) - 属性
示例：
    removeSStorage('user_info');

cookie

setCookie cookie 存贮

参数:
    key(string) - 属性
    value(any) - 值 
    [expire = 3](number) - 过期时间,单位天
示例：
    setCookie('user_info', { name: 'user' }, 10);

getCookie cookie 获取

参数:
    key(string) - 属性
返回值：(any)  
示例：
    getCookie('user_info');

removeCookie cookie 删除

参数:
    key(string) - 属性
示例：
    removeCookie('user_info');