JcTools 使用文档
JcTools 介绍
- JcTools 中封装了一些 JavaScript 中常用的工具函数,可以帮助你快速完成一些功能,例如:防抖、节流、深拷贝、获取时间、随机颜色、数组合并等等
- 目前 JcTools 分为三个版本:
jcTools.js
:体积较大,具备方法参数提示jcTools.min.js
:体积较小,为压缩文件,不具备方法参数提示jcTools.module.js
:模块化导入版本
- 获取文件:https://gitee.com/qwer-li/jc-tools
JcTools 引入教程
-
引入
jcTools.js
示例如下:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 引入JcTools --> <script src="./js/jcTools.js"></script> <script> // 引入后即可使用,例如:随机获取颜色值 const result = jct.randomColor() console.log(result) // rgb(38,149,248) </script> </body> </html>
-
引入
jcTools.min.js
方式与jcTools.js
一致 -
引入
jcTools.module.js
:// 引入的名称可自定义 import jct from './js/jcTools.module.js'
-
在原生 js 中需要使用
jcTools.module.js
示例如下:-
创建一个 js 文件,本示例 js 文件为
demo.js
,在该文件下引入jcTools.module.js
// 此处后缀 .js 不要省略 import jct from './jcTools.module.js'
-
随后将
demo.js
文件在 html 文件中引入:<!-- 引入 demo.js,type 需设置为 module --> <script src="./js/demo.js" type="module"></script>
-
在
demo.js
文件中使用 API 即可:import jct from './jcTools.module.js' console.log(jct.currentDate()) // 2023-01-05 11:43:59
-
目录结构如下:
D:
│ index.html
│
└─js
demo.js
jcTools.js
jcTools.min.js
jcTools.module.js
-
JcTools-API
currentDate [获取当前时间]
-
参数一:{string}
datePart
指定年月日分隔符,默认为 “-” -
参数二:{string}
timePart
指定时分秒分隔符,默认为 “:” -
返回值:{string} 返回字符串
-
示例:
// 获取当前时间 console.log(jct.currentDate()) // 2023-01-05 11:57:23 // 参数一:设置年月日分割符 console.log(jct.currentDate('^')) // 2023^01^05 11:58:24 // 参数二:设置时间分割符 console.log(jct.currentDate('^', '/')) // 2023^01^05 11/59/00
fillZero [数值补零]
-
参数:{string/number}
value
传入需要补零的值 -
返回值:{string} 返回字符串
-
示例:
// 小于 10 则进行补零 console.log(jct.fillZero(1)) // 01 console.log(jct.fillZero(11)) // 11
getWeek [日期转周]
-
参数:{string}
dateString
传入日期,如:“2023-01-02”,默认值为当前日期 -
返回值:{string} 返回字符串
-
示例:
// 默认将当前日期转周 console.log(jct.getWeek()) // 周四 // 输入指定日期转周 console.log(jct.getWeek('2023-11-06')) // 周一
diffDate [计算两个日期之前相差的秒数]
-
参数一:{string}
startDate
传入需要计算的第一个日期,如:“2023-12-02 12:20:33” -
参数二:{string}
endDate
传入需要计算的第二个日期,第二个不传入默认为当前时间 -
返回值:{string} 返回数值型的秒数
-
示例:
console.log(jct.diffDate('2022-12-30:12:21:55')) // 517971.0450000763 console.log(jct.diffDate('2022-11-06 12:30:33', '2023-05-01 14:11:33')) // 15212460
randomMath [随机数]
-
参数一:{number}
min
传入最小值 -
参数二:{number}
max
传入最大值 -
返回值:{number} 返回随机数,包含最大值最小值
-
示例:
console.log(jct.randomMath(10, 20)) // 18
randomColor [获取随机颜色]
-
参数:{string}
type
默认类型为 rgb,需要 16 进制颜色值请输入参数 ‘hex’ -
返回值:返回随机颜色值
-
示例:
// rgb console.log(jct.randomColor()) // rgb(151,195,184) // 16进制 console.log(jct.randomColor('hex')) // #486D13
isPhone [校验手机号]
-
参数:{string}
phone
传入需要校验的手机号 -
返回值:{boolean} 布尔值
-
示例:
console.log(jct.isPhone('11100000000')) // false
isEmail [校验邮箱]
-
参数:
email
传入需要校验的邮箱 -
返回值:{boolean} 布尔值
-
示例:
console.log(jct.isEmail('1111@xxx')) // false
arrRemove [数组去重]
-
参数:{array}
arr
传入需要去重的数组 -
返回值:{array} 返回去重后的数组
-
示例:
console.log(jct.arrRemove([1, 2, 1, 5, 7, 1])) // [1, 2, 5, 7] console.log(jct.arrRemove(['aaa', 'bbb', 'aaa', 'cccc'])) // ['aaa', 'bbb', 'cccc']
arrObjRemove [数组对象去重]
-
参数一:{array}
arr
传入需要去重的数组 -
参数二:{string}
key
传入字段名称,默认为 id -
返回值:{array} 返回去重后的数组
-
示例:
const arr = [ { id: 1, name: 'zs', age: 18, sex: '男' }, { id: 11, name: 'ls', age: 18, sex: '男' }, { id: 21, name: 'zs', age: 19, sex: '女' }, { id: 14, name: 'ww', age: 18, sex: '男' }, { id: 1, name: 'zl', age: 20, sex: '女' } ] // console.log(jct.arrObjRemove(arr, 'id')) /* [ { id: 1, name: 'zs', age: 18, sex: '男' }, { id: 11, name: 'ls', age: 18, sex: '男' }, { id: 21, name: 'zs', age: 19, sex: '女' }, { id: 14, name: 'ww', age: 18, sex: '男' }, ] */ console.log(jct.arrObjRemove(arr, 'name')) /* [ { id: 1, name: 'zs', age: 18, sex: '男' }, { id: 11, name: 'ls', age: 18, sex: '男' }, { id: 14, name: 'ww', age: 18, sex: '男' }, { id: 1, name: 'zl', age: 20, sex: '女' } ] */
myTypeof [检测数据类型]
-
参数:
type
传入需要校验的数据类型 -
返回值:{string} 返回一个表示数据类型的字符串
-
示例:
console.log( jct.myTypeof([]), jct.myTypeof({}), jct.myTypeof(1), jct.myTypeof('1'), jct.myTypeof(false), jct.myTypeof(function () {}) ) // Array Object Number String Boolean Function
sizeTransition [大小写转换]
-
参数一:{string}
str
传入需要转换的字符串 -
参数二:{string}
type
1 表示全部转为大写 || 2 表示转为小写 || 0 表示仅首字母为大写,默认值为 0 -
参数三:{string}
part
传入字符串单词分割符,默认为空格 -
返回值:{string} 返回字符串
-
示例:
console.log(jct.sizeTransition('hello world!')) // Hello World! console.log(jct.sizeTransition('hello-world!', 1, '-')) // HELLO WORLD! console.log(jct.sizeTransition('hello*world!', 2, '*')) // hello world! console.log(jct.sizeTransition('hello*world!', 2)) // hello*world!
arrSort [数组排序]
-
参数一:{array}
arr
传入数组 -
参数二:{string}
type
asc 表示升序 || desc 表示降序,默认值:“desc” -
返回值:{array} 返回排序后的数组
-
示例:
console.log(jct.arrSort([1, 23, 4, 12, 7])) // [23, 12, 7, 4, 1] console.log(jct.arrSort([1, 23, 4, 12, 7], 'asc')) // [1, 4, 7, 12, 23]
arrObjSort [日期转时间戳]
-
参数:{string}
dateString
传入日期,如:“2022-08-22 15:30:22” -
返回值:{number} 返回时间戳
-
示例:
console.log(jct.getTimestamp('2023-1-02 12:20:33')) // 1672633233000 console.log(jct.getTimestamp('2022/1/02 12:20:33')) // 1641097233000
arrObjSort [数组对象排序]
-
参数一:{array}
arr
传入数组 -
参数二:{string}
key
传入字段名 -
参数三:{string}
type
asc 表示升序 || desc 表示降序,默认值:“desc” -
参数四:{boolean}
dateFlag
传入布尔值,为 true 开启对时间排序 -
返回值:{array} 返回排序完成后的数组
-
示例:
const arr = [ { id: 1, name: 'zs', age: 18, sex: '男', date: '2023-12-16' }, { id: 11, name: 'ls', age: 18, sex: '男', date: '2021-12-22' }, { id: 21, name: 'zs', age: 19, sex: '女', date: '2023-01-12' }, { id: 14, name: 'ww', age: 18, sex: '男', date: '2022-08-02' }, { id: 26, name: 'zl', age: 15, sex: '女', date: '2023-02-11' } ] console.log(jct.arrObjSort(arr, 'id', 'asc')) /* [ {id: 1, name: 'zs', age: 18, sex: '男', date: '2023-12-16'} {id: 11, name: 'ls', age: 18, sex: '男', date: '2021-12-22'} {id: 14, name: 'ww', age: 18, sex: '男', date: '2022-08-02'} {id: 21, name: 'zs', age: 19, sex: '女', date: '2023-01-12'} {id: 26, name: 'zl', age: 15, sex: '女', date: '2023-02-11'} ] */ console.log(jct.arrObjSort(arr, 'date', 'desc', true)) /* [ {id: 1, name: 'zs', age: 18, sex: '男', date: '2023-12-16'} {id: 26, name: 'zl', age: 15, sex: '女', date: '2023-02-11'} {id: 21, name: 'zs', age: 19, sex: '女', date: '2023-01-12'} {id: 14, name: 'ww', age: 18, sex: '男', date: '2022-08-02'} {id: 11, name: 'ls', age: 18, sex: '男', date: '2021-12-22'} ] */
debounce [防抖]
-
参数一:{function}
fn
传入一个需要实现防抖的函数 -
参数二:{number}
delay
延迟执行时间 -
参数三:{boolean}
immediate
布尔值,是否需要立即执行一次,默认为 false 不执行 -
参数四:{function}
resultCallBack
传入一个回调函数,接收需要返回执行防抖函数的返回值 -
返回值:{function} 返回一个函数
-
内置方法:
cancel()
取消防抖执行 -
PS:防抖函数效果无法通过直接输出展示效果,大家可自行复制示例运行进行查看
-
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>防抖案例</title> </head> <body> <input type="text"> <button>取消</button> <!-- 引入 JcTools --> <script src="./jcTools.js"></script> <script> // 获取 dom 元素 const inp = document.querySelector('input') const btn = document.querySelector('button') // 定义统计变量 let count = 0 function inputChange(event) { console.log(`发送了第${++count}次网络请求`, this, event) // 返回值 return 'aaaa' } // 获取防抖函数返回值 const debounce = jct.debounce(inputChange, 2000, false, res => { console.log(res) }) // 为input输入框绑定防抖 inp.addEventListener('input', debounce) // 点击取消防抖 btn.addEventListener('click', function () { debounce.cancel() }) </script> </body> </html>
throttle [节流]
-
参数一:{function}
fn
传入需要进行节流的函数 -
参数二:{number}
interval
传入需要时间间隔的毫秒数 -
参数三:
options
传入一个配置对象,leading 为 true 立即执行第一次,为 false 则不执行第一次,默认值为 true || trailing 为 false 则不执行最后一次,为 true 执行最后一次,默认值为 false || resultCallBack 传入一个回调函数,接收需要返回执行节流函数的返回值 -
返回值:{function} 返回一个函数
-
内置方法:
cancel()
取消防抖执行 -
PS:节流函数效果无法通过直接输出展示效果,大家可自行复制示例运行进行查看
-
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>节流案例</title> </head> <body> <input type="text"> <button>取消</button> <!-- 引入JcTools --> <script src="./jcTools.js"></script> <script> // 获取 dom 元素 const inp = document.querySelector('input') const btn = document.querySelector('button') // 定义统计变量 let count = 0 function inputChange(event) { console.log(`发送了第${++count}次网络请求`, this, event) // 返回值 return 'aaaa' } // 获取防抖函数返回值 const throttle = jct.throttle(inputChange, 3000, { leading: true, trailing: false, resultCallBack: res => console.log(res) }) // 为input输入框绑定节流 inp.addEventListener('input', throttle) // 点击取消节流 btn.addEventListener('click', function () { throttle.cancel() }) </script> </body> </html>
isObject [判断是否是对象]
-
参数:
value
输入需要判定的值 -
返回值:{boolean} 返回布尔值
-
PS:需精准校验类型请使用方法:
myTypeof
-
示例:
console.log(jct.isObject({})) // true
deepClone [深拷贝]
-
参数:old 传入需要深拷贝的数据
-
返回值:返回拷贝后的结果
-
示例:
const s1 = Symbol('aaa') const s2 = Symbol('bbb') const obj = { name: 'zs', age: 18, friend: { name: '张三', address: { city: '长沙', test1: [1, 2, 3] } }, test: [1, 2, 3], foo: function () { console.log('foo~') }, [s1]: [1], s2: s2, set: new Set(['aaa', 'bbb', 'ccc']), map: new Map([ ['aaa', 'abc'], ['bbb', 'cba'] ]) } // 循环引用 obj.info = obj const newObj = deepClone(obj) obj.name = 'ls' obj.friend.name = '李四' obj.friend.address.city = 'xxx' // 输出克隆的对象 console.log(newObj) /* { name: 'zs', age: 18, friend: { name: '张三', address: { city: '长沙', test1: [Array] } }, test: [ 1, 2, 3 ], foo: [Function: foo], s2: Symbol(bbb), set: Set(3) { 'aaa', 'bbb', 'ccc' }, map: Map(2) { 'aaa' => 'abc', 'bbb' => 'cba' }, info: [Circular *1], [Symbol(aaa)]: [ 1 ] } */ // 测试循环引用 console.log(newObj.info.info) /* { name: 'zs', age: 18, friend: { name: '张三', address: { city: '长沙', test1: [Array] } }, test: [ 1, 2, 3 ], foo: [Function: foo], s2: Symbol(bbb), set: Set(3) { 'aaa', 'bbb', 'ccc' }, map: Map(2) { 'aaa' => 'abc', 'bbb' => 'cba' }, info: [Circular *1], [Symbol(aaa)]: [ 1 ] } */
mergeArray [合并数组]
-
参数一:{array} 传入需要合并的数组使用逗号分隔,如:jcToolsObj.mergeArray(arr1, arr2, arr3)
-
参数二:{boolean} 若需要开启多数组合并,在最后输入 true 即可,如:jcToolsObj.mergeArray(arr1 ,arr2, arr3, true),默认不开启
-
示例:
const arr1 = ['demo', ['foo', ['xxxx']], 1, 2, 1] const arr2 = ['aaa', { name: '---' }, [111, 111, 111, ['测试']]] const arr3 = [11, 'xxx', '哈哈'] console.log(jct.mergeArray(arr1, arr2, arr3)) // ['demo', Array(2), 1, 2, 1, 'aaa', {…}, Array(4)] console.log(jct.mergeArray(arr1, arr2, arr3, true)) // ['demo', 'foo', 'xxxx', 1, 2, 1, 'aaa', {…}, 111, 111, 111, '测试', 11, 'xxx', '哈哈']
randomArray [随机获取数组元素]
-
参数:{array}
arr
传入数组 -
返回值:返回该数组的随机一个元素
-
示例:
const arr = [11, 'xxx', '哈哈'] console.log(jct.randomArray(arr)) // xxx