# 🛠️ zmy-js-toolkit简介
zmy-js-toolkit是javascript常用工具库,含数组,日期,事件,函数,DOM处理,数字,正则,字符串等模块
# 安装
$ 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
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
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
2
3
4
5
# 取最小值
let list = [1,2,3,82,44];
this.toolkit.min(...list) //1
1
2
3
4
5
2
3
4
5
# 取平均值
let list = [1,2,3,82,44];
this.toolkit.average(...list) //26.4
1
2
3
4
5
2
3
4
5
# 取和
let list = [1,2,3,82,44];
this.toolkit.sum(...list) //132
1
2
3
4
5
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
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
2
3
4
5
# 截取小数点后几位
let num = 5.55555555;
this.toolkit.toFixed(num,3) //5.555
1
2
3
4
5
2
3
4
5
# 转化为货币形式
let num = 10000000;
this.toolkit.toCurrency(num) //"10,000,000"
1
2
3
4
5
2
3
4
5
# Array(数组)
# 数组去重
let list = [1,1,3,3,44];
this.toolkit.unique(list) //[1, 3, 44]
1
2
3
4
5
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
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
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
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
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
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
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
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
2
3
# 随机排序
let arr = [1,2,3,4]
this.toolkit.shuffe(arr); //[3, 4, 1, 2]
1
2
3
2
3
# 随机取数组中的数据
let arr = [1,2,3,4]
this.toolkit.sample(arr); //[3]
this.toolkit.sample(arr,2); //[4, 2]
1
2
3
4
2
3
4
# 获取指定元素的下标值
let arr = [1,2,3,4]
this.toolkit.indexOfAll(arr,3); //[2]
1
2
3
2
3
# 获取元素的出现次数
let arr = [1,2,33,4,33]
this.toolkit.countByItem(arr,33); //[2]
1
2
3
2
3
# String(字符串)
# 将中划线(-)或下划线( _ )字符串转换为驼峰字符串
this.toolkit.camelize("mralen_zhong") //mralenZhong
this.toolkit.camelize("mralen-zhong") //mralenZhong
1
2
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
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
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
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
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
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
2
3
4
5
6
# Event(事件)
# 防抖
# debounce
函数防抖
概念:在指定时间段内连续函数调用,只让其执行一次,超过指定时间段重新开始
应用场景:
- 文本连续输入,ajax 验证/关键字搜索
// import { debounce } from '@hui-pro/utils';
debounce(func, wait, immediate);
1
2
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