个人主页 👦

# 🛠️ zmy-js-toolkit简介

zmy-js-toolkit是javascript常用工具库，含数组,日期,事件,函数,DOM处理,数字,正则,字符串等模块

功能导图 enter description here

# 安装

$ npm install zmy-js-toolkit -D
1

# 引入

解构写法引入：


import { max } from 'zmy-js-toolkit';

let list = [1,2,3,82,44];

max(list)   //82
1
2
3
4
5
6
7

全量写法引入：

//main.js
import toolkit from 'zmy-js-toolkit';

Vue.prototype.toolkit = toolkit

let list = [1,2,3,82,44];

this.toolkit.max(list)   //82
1
2
3
4
5
6
7
8
9

注意

以下各用例均为全量引入

# Number(数值)

# 取最大值


let list = [1,2,3,82,44];

this.toolkit.max(...list)   //82
1
2
3
4
5

# 取最小值


let list = [1,2,3,82,44];

this.toolkit.min(...list)   //1
1
2
3
4
5

# 取平均值


let list = [1,2,3,82,44];

this.toolkit.average(...list)   //26.4
1
2
3
4
5

# 取和


let list = [1,2,3,82,44];

this.toolkit.sum(...list)   //132
1
2
3
4
5

# 升序


let list = [1,2,3,82,44];

this.toolkit.sortAsc(...list)   //[1, 2, 3, 44, 82]
1
2
3
4
5

# 降序


let list = [1,2,3,82,44];

this.toolkit.sortDesc(...list)   //[82, 44, 3, 2, 1]
1
2
3
4
5

# 截取小数点后几位


let num = 5.55555555;

this.toolkit.toFixed(num,3)   //5.555
1
2
3
4
5

# 转化为货币形式


let num = 10000000;

this.toolkit.toCurrency(num)   //"10,000,000"
1
2
3
4
5

# Array(数组)

# 数组去重


let list  = [1,1,3,3,44];

this.toolkit.unique(list)   //[1, 3, 44]
1
2
3
4
5

# 取两个数组的交集


let list  = [1,3,4,5];
let list2 = [1,4]
this.toolkit.intersection(list,list2)   //[1, 4]
1
2
3
4
5

# 取两个以上的数组交集


let list  = [1,3,4,5];
let list2 = [1,4]
let list3 = [4,5,6]
this.toolkit.intersectionAll(list,list2,list3)   //[4]
1
2
3
4
5
6

# 取多个数组的并集


let list  = [1,3,4,5];
let list2 = [1,4]
this.toolkit.union(list,list2)   //[1, 3, 4, 5]
1
2
3
4
5

# 取两个数组的差集


let list  = [1,3,4,5];
let list2  = [1,4];
this.toolkit.difference(list,list2)   //[3, 5]
1
2
3
4
5

# 取两个以上的数组差集


let list  = [1,3,4,5];
let list2  = [1,4];
let list3 = [4,5,6]
this.toolkit.differenceAll(list,list2,list3)   //[4, 6, 3]
1
2
3
4
5
6

# 是否为类数组

let obj = {
    "0":"a",
    "1":"b",
    "2":"c",
    "length":3,
}
let obj2 = {
    "0":"a",
    "1":"b",
    "2":"c",
}
let arr = [1,2,3]
this.toolkit.isArrayLike(obj)   //true
this.toolkit.isArrayLike(obj2)   //false
this.toolkit.isArrayLike(arr)   //true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 拉平数组

let arr = [1,2,3,[4,5]];
let arr2 = [1,2,3,[4,5,[6]]]
this.toolkit.flatten(arr);  //[1,2,3,4,5]
this.toolkit.flatten(arr2);  //[1,2,3,4,5,[6]]
this.toolkit.flatten(arr2,2);  //[1,2,3,4,5,6]
1
2
3
4
5

# 深度拉平

let arr = [1,2,3,[4,5,[6]]]
this.toolkit.deepFlatten(arr);  //[1,2,3,4,5,6]
1
2
3

# 随机排序

let arr = [1,2,3,4]
this.toolkit.shuffe(arr);  //[3, 4, 1, 2]
1
2
3

# 随机取数组中的数据

let arr = [1,2,3,4]
this.toolkit.sample(arr);  //[3]
this.toolkit.sample(arr,2);  //[4, 2]
1
2
3
4

# 获取指定元素的下标值

let arr = [1,2,3,4]
this.toolkit.indexOfAll(arr,3);  //[2]
1
2
3

# 获取元素的出现次数

let arr = [1,2,33,4,33]
this.toolkit.countByItem(arr,33);  //[2]
1
2
3

# String(字符串)

# 将中划线(-)或下划线( _ )字符串转换为驼峰字符串

this.toolkit.camelize("mralen_zhong")   //mralenZhong
this.toolkit.camelize("mralen-zhong")   //mralenZhong
1
2

# 将驼峰字符串转换为中划线(-)字符串

this.toolkit.dasherize("mralenZhong")   //mralen-zhong
1

# Object(对象)

# 深拷贝

let objA = {a:{b:2}};
let objB = this.toolkit.deepClone(objA);
objB["a"]["b"] = 4;
console.log("objA  ",JSON.stringify(objA));     //{"a":{"b":2}}
console.log("objB  ",JSON.stringify(objB));     //{"a":{"b":4}}
1
2
3
4
5

# 浅拷贝

let objA = {a:{b:2}};
let objB = this.toolkit.deepClone(objA);
objB["a"]["b"] = 4;
console.log("objA  ",JSON.stringify(objA));     //{"a":{"b":4}}
console.log("objB  ",JSON.stringify(objB));     //{"a":{"b":4}}
1
2
3
4
5

# 对象深合并

const obj = {
  test: {
    a: 'a',
    [Symbol('b')]: 'b',
    c: 'c'
  }
};
merge(
  obj,
  {
    test: {
      a: 'changeA',
      [Symbol('b')]: 'symbolB',
      addC: 'addC'
    }
  },
  { multil: 'multil' }
);
// output => {
//     multil: 'multil',
//     test: {
//         a: 'changeA',
//         addC: 'addC',
//         [Symbol(b)]: 'b',
//         [Symbol(b)]: 'symbolB'
//         c: 'c'
//     }
// };

Object.assign(
  obj,
  {
    test: {
      a: 'changeA',
      [Symbol('b')]: 'symbolB',
      addC: 'addC'
    }
  },
  { multil: 'multil' }
);
// output => {
//     multil: 'multil',
//     test: {
//         a: 'changeA',
//         [Symbol('b')]: 'symbolB',
//         addC: 'addC'
//     }
// };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

提示

赋值可使用 Object.assign()

# 替换对象字段名称

let obj = {
    "a":11,
    "b":22,
    "c":33,
}
this.toolkit.replaceKeys(obj,{"c":"cc"});       //{a: 11, b: 22, cc: 33}
1
2
3
4
5
6

# 保留给定字段

let obj = {
    "a":11,
    "b":22,
    "c":33,
}
this.toolkit.keepKeys(obj,["c"]);  //{c: 33}
1
2
3
4
5
6

# 删除给定字段

let obj = {
    "a":11,
    "b":22,
    "c":33,
}
this.toolkit.removeKeys(obj,["c"]);  //{a: 11, b: 22}
1
2
3
4
5
6

# Event(事件)

# 防抖

# debounce

函数防抖

概念：在指定时间段内连续函数调用，只让其执行一次，超过指定时间段重新开始

应用场景：

  • 文本连续输入，ajax 验证/关键字搜索
// import { debounce } from '@hui-pro/utils';
debounce(func, wait, immediate);
1
2

# API

参数 说明 类型 默认值 可选值
func 防抖函数回调 Function - -
wait 防抖时间间隔 Number(ms) 16(ms) -
immediate 设置为 ture 时，调用触发于开始边界而不是结束边界 Boolean false -

# 节流

# 获取浏览器信息

# 设置Cookie

# 获取Cookie

# 设置LocalStorage

# 获取LocalStorage

# 设置SessionStorage

# 获取SessionStorage

# 将base64 url 转化为 blob url

# HTML

# 从文本中获取指定条件的标签

# 获取html文本中某类元素指定属性的属性值

# 获取html文本中转化为html后的纯文本信息

# 转义html

# Reg-exp(正则)

一些常用的正则

# Date(日期)

Dayjs