手写封装JavaScript工具函数-JcTools

JcTools 使用文档

JcTools 介绍

  1. JcTools 中封装了一些 JavaScript 中常用的工具函数,可以帮助你快速完成一些功能,例如:防抖、节流、深拷贝、获取时间、随机颜色、数组合并等等
  2. 目前 JcTools 分为三个版本:
    1. jcTools.js :体积较大,具备方法参数提示
    2. jcTools.min.js :体积较小,为压缩文件,不具备方法参数提示
    3. jcTools.module.js:模块化导入版本
  3. 获取文件:https://gitee.com/qwer-li/jc-tools

JcTools 引入教程

  1. 引入 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>
    
  2. 引入 jcTools.min.js 方式与 jcTools.js 一致

  3. 引入 jcTools.module.js

    // 引入的名称可自定义
    import jct from './js/jcTools.module.js'
    
  4. 在原生 js 中需要使用 jcTools.module.js 示例如下:

    1. 创建一个 js 文件,本示例 js 文件为 demo.js,在该文件下引入 jcTools.module.js

      // 此处后缀 .js 不要省略
      import jct from './jcTools.module.js'
      
    2. 随后将 demo.js 文件在 html 文件中引入:

      <!-- 引入 demo.js,type 需设置为 module -->
      <script src="./js/demo.js" type="module"></script>
      
    3. demo.js 文件中使用 API 即可:

      import jct from './jcTools.module.js'
      console.log(jct.currentDate()) // 2023-01-05 11:43:59
      
    4. 目录结构如下:

      D:
      │ index.html

      └─js
      demo.js
      jcTools.js
      jcTools.min.js
      jcTools.module.js

JcTools-API

currentDate [获取当前时间]

  1. 参数一:{string} datePart 指定年月日分隔符,默认为 “-”

  2. 参数二:{string} timePart 指定时分秒分隔符,默认为 “:”

  3. 返回值:{string} 返回字符串

  4. 示例:

    // 获取当前时间
    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 [数值补零]

  1. 参数:{string/number} value 传入需要补零的值

  2. 返回值:{string} 返回字符串

  3. 示例:

    // 小于 10 则进行补零
    console.log(jct.fillZero(1)) // 01
    console.log(jct.fillZero(11)) // 11
    

getWeek [日期转周]

  1. 参数:{string} dateString 传入日期,如:“2023-01-02”,默认值为当前日期

  2. 返回值:{string} 返回字符串

  3. 示例:

    // 默认将当前日期转周
    console.log(jct.getWeek()) // 周四
    // 输入指定日期转周
    console.log(jct.getWeek('2023-11-06')) // 周一
    

diffDate [计算两个日期之前相差的秒数]

  1. 参数一:{string} startDate传入需要计算的第一个日期,如:“2023-12-02 12:20:33”

  2. 参数二:{string} endDate 传入需要计算的第二个日期,第二个不传入默认为当前时间

  3. 返回值:{string} 返回数值型的秒数

  4. 示例:

    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 [随机数]

  1. 参数一:{number} min 传入最小值

  2. 参数二:{number} max传入最大值

  3. 返回值:{number} 返回随机数,包含最大值最小值

  4. 示例:

    console.log(jct.randomMath(10, 20)) // 18
    

randomColor [获取随机颜色]

  1. 参数:{string} type 默认类型为 rgb,需要 16 进制颜色值请输入参数 ‘hex’

  2. 返回值:返回随机颜色值

  3. 示例:

    // rgb
    console.log(jct.randomColor()) // rgb(151,195,184)
    // 16进制
    console.log(jct.randomColor('hex')) // #486D13
    

isPhone [校验手机号]

  1. 参数:{string} phone 传入需要校验的手机号

  2. 返回值:{boolean} 布尔值

  3. 示例:

    console.log(jct.isPhone('11100000000')) // false
    

isEmail [校验邮箱]

  1. 参数:email 传入需要校验的邮箱

  2. 返回值:{boolean} 布尔值

  3. 示例:

    console.log(jct.isEmail('1111@xxx')) // false
    

arrRemove [数组去重]

  1. 参数:{array} arr 传入需要去重的数组

  2. 返回值:{array} 返回去重后的数组

  3. 示例:

    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 [数组对象去重]

  1. 参数一:{array} arr 传入需要去重的数组

  2. 参数二:{string} key 传入字段名称,默认为 id

  3. 返回值:{array} 返回去重后的数组

  4. 示例:

    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 [检测数据类型]

  1. 参数:type 传入需要校验的数据类型

  2. 返回值:{string} 返回一个表示数据类型的字符串

  3. 示例:

    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 [大小写转换]

  1. 参数一:{string} str 传入需要转换的字符串

  2. 参数二:{string} type 1 表示全部转为大写 || 2 表示转为小写 || 0 表示仅首字母为大写,默认值为 0

  3. 参数三:{string} part 传入字符串单词分割符,默认为空格

  4. 返回值:{string} 返回字符串

  5. 示例:

    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 [数组排序]

  1. 参数一:{array} arr 传入数组

  2. 参数二:{string} type asc 表示升序 || desc 表示降序,默认值:“desc”

  3. 返回值:{array} 返回排序后的数组

  4. 示例:

    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 [日期转时间戳]

  1. 参数:{string} dateString 传入日期,如:“2022-08-22 15:30:22”

  2. 返回值:{number} 返回时间戳

  3. 示例:

    console.log(jct.getTimestamp('2023-1-02 12:20:33')) // 1672633233000
    console.log(jct.getTimestamp('2022/1/02 12:20:33')) // 1641097233000
    

arrObjSort [数组对象排序]

  1. 参数一:{array} arr 传入数组

  2. 参数二:{string} key 传入字段名

  3. 参数三:{string} type asc 表示升序 || desc 表示降序,默认值:“desc”

  4. 参数四:{boolean} dateFlag 传入布尔值,为 true 开启对时间排序

  5. 返回值:{array} 返回排序完成后的数组

  6. 示例:

    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 [防抖]

  1. 参数一:{function} fn 传入一个需要实现防抖的函数

  2. 参数二:{number} delay 延迟执行时间

  3. 参数三:{boolean} immediate 布尔值,是否需要立即执行一次,默认为 false 不执行

  4. 参数四:{function} resultCallBack 传入一个回调函数,接收需要返回执行防抖函数的返回值

  5. 返回值:{function} 返回一个函数

  6. 内置方法:cancel() 取消防抖执行

  7. PS:防抖函数效果无法通过直接输出展示效果,大家可自行复制示例运行进行查看

  8. 示例:

    <!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 [节流]

  1. 参数一:{function} fn 传入需要进行节流的函数

  2. 参数二:{number} interval 传入需要时间间隔的毫秒数

  3. 参数三:options 传入一个配置对象,leading 为 true 立即执行第一次,为 false 则不执行第一次,默认值为 true || trailing 为 false 则不执行最后一次,为 true 执行最后一次,默认值为 false || resultCallBack 传入一个回调函数,接收需要返回执行节流函数的返回值

  4. 返回值:{function} 返回一个函数

  5. 内置方法:cancel() 取消防抖执行

  6. PS:节流函数效果无法通过直接输出展示效果,大家可自行复制示例运行进行查看

  7. 示例:

    <!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 [判断是否是对象]

  1. 参数:value 输入需要判定的值

  2. 返回值:{boolean} 返回布尔值

  3. PS:需精准校验类型请使用方法:myTypeof

  4. 示例:

    console.log(jct.isObject({})) // true
    

deepClone [深拷贝]

  1. 参数:old 传入需要深拷贝的数据

  2. 返回值:返回拷贝后的结果

  3. 示例:

    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 [合并数组]

  1. 参数一:{array} 传入需要合并的数组使用逗号分隔,如:jcToolsObj.mergeArray(arr1, arr2, arr3)

  2. 参数二:{boolean} 若需要开启多数组合并,在最后输入 true 即可,如:jcToolsObj.mergeArray(arr1 ,arr2, arr3, true),默认不开启

  3. 示例:

    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 [随机获取数组元素]

  1. 参数:{array} arr 传入数组

  2. 返回值:返回该数组的随机一个元素

  3. 示例:

    const arr = [11, 'xxx', '哈哈']
    console.log(jct.randomArray(arr)) // xxx
    
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值