• 20 个 JS 工具函数助力高效开发

    目录

    20 个 JS 工具函数助力高效开发

    1、校验数据类型

    2、防抖

    3、节流

    4、手机号脱敏

    5、开启全屏

    6、关闭全屏

    7、大小写转换

    8、解析URL参数

    9、判断手机是Andoird还是IOS

    10、数组对象根据字段去重

    11、滚动到页面顶部

    12、滚动到元素位置

    13、uuid

    14、金额格式化

    15、存储操作

    16、下载文件

    17、时间操作

    18、深拷贝

    19、模糊搜索

    20、遍历树节点

    20 个 JS 工具函数助力高效开发

    1、校验数据类型

    1. export const typeOf = function(obj) {
    2.   return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
    3. }

    示例：

    1. typeOf('树哥')  // string
    2. typeOf([])  // array
    3. typeOf(new Date())  // date
    4. typeOf(null) // null
    5. typeOf(true) // boolean
    6. typeOf(() => { }) // function

    2、防抖

    1. export const debounce = (() => {
    2.   let timer = null
    3.   return (callback, wait = 800) => {
    4.     timer&&clearTimeout(timer)
    5.     timer = setTimeout(callback, wait)
    6.   }
    7. })()

    示例：

    如 vue 中使用

    1. methods: {
    2.   loadList() {
    3.     debounce(() => {
    4.       console.log('加载数据')
    5.     }, 500)
    6.   }
    7. }

    3、节流

    1. export const throttle = (() => {
    2.   let last = 0
    3.   return (callback, wait = 800) => {
    4.     let now = +new Date()
    5.     if (now - last > wait) {
    6.       callback()
    7.       last = now
    8.     }
    9.   }
    10. })()

    4、手机号脱敏

    1. export const hideMobile = (mobile) => {
    2.   return mobile.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2")
    3. }

    5、开启全屏

    1. export const launchFullscreen = (element) => {
    2.   if (element.requestFullscreen) {
    3.     element.requestFullscreen()
    4.   } else if (element.mozRequestFullScreen) {
    5.     element.mozRequestFullScreen()
    6.   } else if (element.msRequestFullscreen) {
    7.     element.msRequestFullscreen()
    8.   } else if (element.webkitRequestFullscreen) {
    9.     element.webkitRequestFullScreen()
    10.   }
    11. }

    6、关闭全屏

    1. export const exitFullscreen = () => {
    2.   if (document.exitFullscreen) {
    3.     document.exitFullscreen()
    4.   } else if (document.msExitFullscreen) {
    5.     document.msExitFullscreen()
    6.   } else if (document.mozCancelFullScreen) {
    7.     document.mozCancelFullScreen()
    8.   } else if (document.webkitExitFullscreen) {
    9.     document.webkitExitFullscreen()
    10.   }
    11. }

    7、大小写转换

    参数：

    • str 待转换的字符串

    • type 1-全大写 2-全小写 3-首字母大写

    1. export const turnCase = (str, type) => {
    2.   switch (type) {
    3.     case 1:
    4.       return str.toUpperCase()
    5.     case 2:
    6.       return str.toLowerCase()
    7.     case 3:
    8.       //return str[0].toUpperCase() + str.substr(1).toLowerCase() // substr 已不推荐使用
    9.       return str[0].toUpperCase() + str.substring(1).toLowerCase()
    10.     default:
    11.       return str
    12.   }
    13. }

    示例：

    1. turnCase('vue', 1) // VUE
    2. turnCase('REACT', 2) // react
    3. turnCase('vue', 3) // Vue

    8、解析URL参数

    1. export const getSearchParams = () => {
    2.   const searchPar = new URLSearchParams(window.location.search)
    3.   const paramsObj = {}
    4.   for (const [key, value] of searchPar.entries()) {
    5.     paramsObj[key] = value
    6.   }
    7.   return paramsObj
    8. }

    示例：

    1. // 假设目前位于 https://****com/index?id=154513&age=18;
    2. getSearchParams(); // {id: "154513", age: "18"}

    9、判断手机是Andoird还是IOS

    1. /** 
    2.  * 1: ios
    3.  * 2: android
    4.  * 3: 其它
    5.  */
    6. export const getOSType=() => {
    7.   let u = navigator.userAgent, app = navigator.appVersion;
    8.   let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
    9.   let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    10.   if (isIOS) {
    11.     return 1;
    12.   }
    13.   if (isAndroid) {
    14.     return 2;
    15.   }
    16.   return 3;
    17. }

    10、数组对象根据字段去重

    参数：

    • arr 要去重的数组

    • key 根据去重的字段名

    1. export const uniqueArrayObject = (arr = [], key = 'id') => {
    2.   if (arr.length === 0) return
    3.   let list = []
    4.   const map = {}
    5.   arr.forEach((item) => {
    6.     if (!map[item[key]]) {
    7.       map[item[key]] = item
    8.     }
    9.   })
    10.   list = Object.values(map)
    11.  
    12.   return list
    13. }

    示例：

    1. const responseList = [
    2.     { id: 1, name: '树哥' },
    3.     { id: 2, name: '黄老爷' },
    4.     { id: 3, name: '张麻子' },
    5.     { id: 1, name: '黄老爷' },
    6.     { id: 2, name: '张麻子' },
    7.     { id: 3, name: '树哥' },
    8.     { id: 1, name: '树哥' },
    9.     { id: 2, name: '黄老爷' },
    10.     { id: 3, name: '张麻子' },
    11. ]
    12.  
    13. uniqueArrayObject(responseList, 'id')
    14. // [{ id: 1, name: '树哥' },{ id: 2, name: '黄老爷' },{ id: 3, name: '张麻子' }]

    11、滚动到页面顶部

    1. export const scrollToTop = () => {
    2.   const height = document.documentElement.scrollTop || document.body.scrollTop;
    3.   if (height > 0) {
    4.     window.requestAnimationFrame(scrollToTop);
    5.     window.scrollTo(0, height - height / 8);
    6.   }
    7. }

    12、滚动到元素位置

    1. export const smoothScroll = element =>{
    2.     document.querySelector(element).scrollIntoView({
    3.         behavior: 'smooth'
    4.     });
    5. };

    示例：

    smoothScroll('#target'); // 平滑滚动到 ID 为 target 的元素

    13、uuid

    1. export const uuid = () => {
    2.   const temp_url = URL.createObjectURL(new Blob())
    3.   const uuid = temp_url.toString()
    4.   URL.revokeObjectURL(temp_url) //释放这个url
    5.   return uuid.substring(uuid.lastIndexOf('/') + 1)
    6. }

    示例：

    uuid() // a640be34-689f-4b98-be77-e3972f9bffdd

    不过要吐槽一句的是，uuid一般应由后端来进行生成

    14、金额格式化

    参数：

    • {number} number：要格式化的数字

    • {number} decimals：保留几位小数

    • {string} dec_point：小数点符号

    • {string} thousands_sep：千分位符号

    1. export const moneyFormat = (number, decimals, dec_point, thousands_sep) => {
    2.   number = (number + '').replace(/[^0-9+-Ee.]/g, '')
    3.   const n = !isFinite(+number) ? 0 : +number
    4.   const prec = !isFinite(+decimals) ? 2 : Math.abs(decimals)
    5.   const sep = typeof thousands_sep === 'undefined' ? ',' : thousands_sep
    6.   const dec = typeof dec_point === 'undefined' ? '.' : dec_point
    7.   let s = ''
    8.   const toFixedFix = function(n, prec) {
    9.     const k = Math.pow(10, prec)
    10.     return '' + Math.ceil(n * k) / k
    11.   }
    12.   s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.')
    13.   const re = /(-?\d+)(\d{3})/
    14.   while (re.test(s[0])) {
    15.     s[0] = s[0].replace(re, '$1' + sep + '$2')
    16.   }
    17.  
    18.   if ((s[1] || '').length < prec) {
    19.     s[1] = s[1] || ''
    20.     s[1] += new Array(prec - s[1].length + 1).join('0')
    21.   }
    22.   return s.join(dec)
    23. }

    示例：

    1. moneyFormat(10000000) // 10,000,000.00
    2. moneyFormat(10000000, 3, '.', '-') // 10-000-000.000

    15、存储操作

    1. class MyCache {
    2.   constructor(isLocal = true) {
    3.     this.storage = isLocal ? localStorage : sessionStorage
    4.   }
    5.  
    6.   setItem(key, value) {
    7.     if (typeof (value) === 'object') value = JSON.stringify(value)
    8.     this.storage.setItem(key, value)
    9.   }
    10.  
    11.   getItem(key) {
    12.     try {
    13.       return JSON.parse(this.storage.getItem(key))
    14.     } catch (err) {
    15.       return this.storage.getItem(key)
    16.     }
    17.   }
    18.  
    19.   removeItem(key) {
    20.     this.storage.removeItem(key)
    21.   }
    22.  
    23.   clear() {
    24.     this.storage.clear()
    25.   }
    26.  
    27.   key(index) {
    28.     return this.storage.key(index)
    29.   }
    30.  
    31.   length() {
    32.     return this.storage.length
    33.   }
    34. }
    35.  
    36. const localCache = new MyCache()
    37. const sessionCache = new MyCache(false)
    38.  
    39. export { localCache, sessionCache }

    示例：

    1. localCache.getItem('user')
    2. sessionCache.setItem('name','树哥')
    3. sessionCache.getItem('token')
    4. localCache.clear()

    16、下载文件

    参数：

    • api 接口

    • params 请求参数

    • fileName 文件名

    1. const downloadFile = (api, params, fileName, type = 'get') => {
    2.   axios({
    3.     method: type,
    4.     url: api,
    5.     responseType: 'blob', 
    6.     params: params
    7.   }).then((res) => {
    8.     let str = res.headers['content-disposition']
    9.     if (!res || !str) {
    10.       return
    11.     }
    12.     let suffix = ''
    13.     // 截取文件名和文件类型
    14.     if (str.lastIndexOf('.')) {
    15.       fileName ? '' : fileName = decodeURI(str.substring(str.indexOf('=') + 1, str.lastIndexOf('.')))
    16.       suffix = str.substring(str.lastIndexOf('.'), str.length)
    17.     }
    18.     //  如果支持微软的文件下载方式(ie10+浏览器)
    19.     if (window.navigator.msSaveBlob) {
    20.       try {
    21.         const blobObject = new Blob([res.data]);
    22.         window.navigator.msSaveBlob(blobObject, fileName + suffix);
    23.       } catch (e) {
    24.         console.log(e);
    25.       }
    26.     } else {
    27.       //  其他浏览器
    28.       let url = window.URL.createObjectURL(res.data)
    29.       let link = document.createElement('a')
    30.       link.style.display = 'none'
    31.       link.href = url
    32.       link.setAttribute('download', fileName + suffix)
    33.       document.body.appendChild(link)
    34.       link.click()
    35.       document.body.removeChild(link)
    36.       window.URL.revokeObjectURL(link.href);
    37.     }
    38.   }).catch((err) => {
    39.     console.log(err.message);
    40.   })
    41. }

    使用：

    downloadFile('/api/download', {id}, '文件名')

    17、时间操作

    关于时间操作，没必要自己再写一大串代码了，强烈推荐使用 day.js[2]

    Day.js 是一个仅 2kb 大小的轻量级 JavaScript 时间日期处理库，下载、解析和执行的JavaScript更少，为代码留下更多的时间。

    18、深拷贝

    1. export const clone = parent => {
    2.   // 判断类型
    3.   const isType = (obj, type) => {
    4.     if (typeof obj !== "object") return false;
    5.     const typeString = Object.prototype.toString.call(obj);
    6.     let flag;
    7.     switch (type) {
    8.       case "Array":
    9.         flag = typeString === "[object Array]";
    10.         break;
    11.       case "Date":
    12.         flag = typeString === "[object Date]";
    13.         break;
    14.       case "RegExp":
    15.         flag = typeString === "[object RegExp]";
    16.         break;
    17.       default:
    18.         flag = false;
    19.     }
    20.     return flag;
    21.   };
    22.  
    23.   // 处理正则
    24.   const getRegExp = re => {
    25.     var flags = "";
    26.     if (re.global) flags += "g";
    27.     if (re.ignoreCase) flags += "i";
    28.     if (re.multiline) flags += "m";
    29.     return flags;
    30.   };
    31.   // 维护两个储存循环引用的数组
    32.   const parents = [];
    33.   const children = [];
    34.  
    35.   const _clone = parent => {
    36.     if (parent === null) return null;
    37.     if (typeof parent !== "object") return parent;
    38.  
    39.     let child, proto;
    40.  
    41.     if (isType(parent, "Array")) {
    42.       // 对数组做特殊处理
    43.       child = [];
    44.     } else if (isType(parent, "RegExp")) {
    45.       // 对正则对象做特殊处理
    46.       child = new RegExp(parent.source, getRegExp(parent));
    47.       if (parent.lastIndex) child.lastIndex = parent.lastIndex;
    48.     } else if (isType(parent, "Date")) {
    49.       // 对Date对象做特殊处理
    50.       child = new Date(parent.getTime());
    51.     } else {
    52.       // 处理对象原型
    53.       proto = Object.getPrototypeOf(parent);
    54.       // 利用Object.create切断原型链
    55.       child = Object.create(proto);
    56.     }
    57.  
    58.     // 处理循环引用
    59.     const index = parents.indexOf(parent);
    60.  
    61.     if (index != -1) {
    62.       // 如果父数组存在本对象,说明之前已经被引用过,直接返回此对象
    63.       return children[index];
    64.     }
    65.     parents.push(parent);
    66.     children.push(child);
    67.  
    68.     for (let i in parent) {
    69.       // 递归
    70.       child[i] = _clone(parent[i]);
    71.     }
    72.  
    73.     return child;
    74.   };
    75.   return _clone(parent);
    76. };

    此方法存在一定局限性：一些特殊情况没有处理: 例如Buffer对象、Promise、Set、Map。

    如果确实想要完备的深拷贝，推荐使用 lodash 中的 cloneDeep 方法。

    19、模糊搜索

    参数：

    • list 原数组

    • keyWord 查询的关键词

    • attribute 数组需要检索属性

    1. export const fuzzyQuery = (list, keyWord, attribute = 'name') => {
    2.   const reg = new RegExp(keyWord)
    3.   const arr = []
    4.   for (let i = 0; i < list.length; i++) {
    5.     if (reg.test(list[i][attribute])) {
    6.       arr.push(list[i])
    7.     }
    8.   }
    9.   return arr
    10. }

    示例：

    1. const list = [
    2.   { id: 1, name: '树哥' },
    3.   { id: 2, name: '黄老爷' },
    4.   { id: 3, name: '张麻子' },
    5.   { id: 4, name: '汤师爷' },
    6.   { id: 5, name: '胡万' },
    7.   { id: 6, name: '花姐' },
    8.   { id: 7, name: '小梅' }
    9. ]
    10. fuzzyQuery(list, '树', 'name') // [{id: 1, name: '树哥'}]

    20、遍历树节点

    1. export const foreachTree = (data, callback, childrenName = 'children') => {
    2.   for (let i = 0; i < data.length; i++) {
    3.     callback(data[i])
    4.     if (data[i][childrenName] && data[i][childrenName].length > 0) {
    5.       foreachTree(data[i][childrenName], callback, childrenName)
    6.     }
    7.   }
    8. }

    示例：

    假设我们要从树状结构数据中查找 id 为 9 的节点

    1. const treeData = [{
    2.   id: 1,
    3.   label: '一级 1',
    4.   children: [{
    5.     id: 4,
    6.     label: '二级 1-1',
    7.     children: [{
    8.       id: 9,
    9.       label: '三级 1-1-1'
    10.     }, {
    11.       id: 10,
    12.       label: '三级 1-1-2'
    13.     }]
    14.   }]
    15.  }, {
    16.   id: 2,
    17.   label: '一级 2',
    18.   children: [{
    19.     id: 5,
    20.     label: '二级 2-1'
    21.   }, {
    22.     id: 6,
    23.     label: '二级 2-2'
    24.   }]
    25.   }, {
    26.     id: 3,
    27.     label: '一级 3',
    28.     children: [{
    29.       id: 7,
    30.       label: '二级 3-1'
    31.     }, {
    32.       id: 8,
    33.       label: '二级 3-2'
    34.     }]
    35. }],
    36.  
    37. let result
    38. foreachTree(data, (item) => {
    39.   if (item.id === 9) {
    40.     result = item
    41.   }
    42. })
    43. console.log('result', result)  // {id: 9,label: "三级 1-1-1"}   
  • 相关阅读:
    AUTOCAD——遮罩命令、如何使用CAD对图纸进行局部放大
    在cesuim上展示二维模型
    本地构建spring源码
    NetSuite Budget功能包
    【LeetCode】40. 组合总和 II
    Spring学习+Spring整合durid+Spring整合Mybatis
    Web前端不挂科：深入探索与实战指南
    【软考】14.2 统一建模语言UML/事务关系图
    如何用GPT高效地处理文本、文献查阅、PPT编辑、编程、绘图和论文写作?
    248: vue+openlayers 以静态图片作为底图，并在上面绘制矢量多边形
  • 原文地址：https://blog.csdn.net/happy81997/article/details/126758878