梳理工具函数,助力高效研发。
目录
-
校验数据类型
-
export const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase(); // 示例: trueTypeOf(‘’); // string trueTypeOf(0); // number trueTypeOf(); // undefined trueTypeOf(null); // null trueTypeOf({}); // object trueTypeOf([]); // array trueTypeOf(0); // number trueTypeOf(() => {}); // function
-
-
大小写转换
-
/** * str 待转换的字符串 * type 1-全大写 2-全小写 3-首字母大写 **/ export const turnCase = (str, type) => { switch (type) { case 1: return str.toUpperCase() case 2: return str.toLowerCase() case 3: //return str[0].toUpperCase() + str.substr(1).toLowerCase() // substr 已不推荐使用 return str[0].toUpperCase() + str.substring(1).toLowerCase() default: return str } } // 示例 turnCase('vue', 1) // VUE turnCase('REACT', 2) // react turnCase('vue', 3) // Vue
-
-
RGB转换为十六进制
-
const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); //示例 rgbToHex(255, 255, 255); // '#ffffff'
-
-
金额格式化
-
/** * {number} number:要格式化的数字 * {number} decimals:保留几位小数 * {string} dec_point:小数点符号 * {string} thousands_sep:千分位符号 **/ export const moneyFormat = (number, decimals, dec_point, thousands_sep) => { number = (number + '').replace(/[^0-9+-Ee.]/g, '') const n = !isFinite(+number) ? 0 : +number const prec = !isFinite(+decimals) ? 2 : Math.abs(decimals) const sep = typeof thousands_sep === 'undefined' ? ',' : thousands_sep const dec = typeof dec_point === 'undefined' ? '.' : dec_point let s = '' const toFixedFix = function(n, prec) { const k = Math.pow(10, prec) return '' + Math.ceil(n * k) / k } s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.') const re = /(-?\d+)(\d{3})/ while (re.test(s[0])) { s[0] = s[0].replace(re, '$1' + sep + '$2') } if ((s[1] || '').length < prec) { s[1] = s[1] || '' s[1] += new Array(prec - s[1].length + 1).join('0') } return s.join(dec) } // 示例: moneyFormat(10000000) // 10,000,000.00 moneyFormat(10000000, 3, '.', '-') // 10-000-000.000
-
-
四舍五入到指定位数
-
const round = (n, d) => Number(Math.round(n + “e” + d) + “e-” + d) //示例 round(1.005, 2) //1.01 round(1.555, 2) //1.56
-
-
数组对象根据字段去重
-
export const uniqueArrayObject = (arr = [], key = 'id') => { if (arr.length === 0) return let list = [] const map = {} arr.forEach((item) => { if (!map[item[key]]) { map[item[key]] = item } }) list = Object.values(map) return list } // 示例 const responseList = [ { id: 1, name: '小哥' }, { id: 2, name: '黄老爷' }, { id: 3, name: '张麻子' }, { id: 1, name: '黄老爷' }, { id: 2, name: '张麻子' }, { id: 3, name: '小哥' }, { id: 1, name: '小哥' }, { id: 2, name: '黄老爷' }, { id: 3, name: '张麻子' }, ] uniqueArrayObject(responseList, 'id') // [{ id: 1, name: '小哥' },{ id: 2, name: '黄老爷' },{ id: 3, name: '张麻子' }]
-
-
从数组中删除重复项
-
//方法1: const removeDuplicates = (arr) => [... .new Set(arr)]; console.log(removeDuplicates([1,2,2,2,5,66,666,55,5])); //[1,2,5,66,666,55]
-
-
手机号脱敏
-
export const hideMobile = (mobile) => { return mobile.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2") }
-
-
时间操作
- 强烈推荐使用 day.js
-
生成随机字符串
-
生成随机字符串
-
const randomString = () => Math.random().toString(36).slice(2); //示例 randomString();
-
-
从2个整数中获取一个随机整数
-
const random = (min, max) => Math.floor(Math.random() * (max — min + 1) + min); // 示例: random(1, 50);
-
-
随机选择一种十六进制的颜色值
-
const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`; // 示例: randomHex();
-
-
-
防抖、节流
-
// 防抖 export const debounce = (() => { let timer = null return (callback, wait = 800) => { timer&&clearTimeout(timer) timer = setTimeout(callback, wait) } })(); // 示例:vue中使用 methods: { loadList() { debounce(() => { console.log('加载数据') }, 500) } } // 节流 export const throttle = (() => { let last = 0 return (callback, wait = 800) => { let now = +new Date() if (now - last > wait) { callback() last = now } } })();
-
-
判难手机是Andoird还是IOS
-
/** * 1: ios * 2: android * 3: 其它 */ export const getOSType=() => { let u = navigator.userAgent, app = navigator.appVersion; let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if (isIOS) { return 1; } if (isAndroid) { return 2; } return 3; }
-
-
判断是否处于暗模式
-
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches console.log(isDarkMode)
-
-
开启全屏、关闭全屏
-
// 开启全屏 export const launchFullscreen = (element) => { if (element.requestFullscreen) { element.requestFullscreen() } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen() } else if (element.msRequestFullscreen) { element.msRequestFullscreen() } else if (element.webkitRequestFullscreen) { element.webkitRequestFullScreen() } } // 关闭全屏 export const exitFullscreen = () => { if (document.exitFullscreen) { document.exitFullscreen() } else if (document.msExitFullscreen) { document.msExitFullscreen() } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen() } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen() } }
-
-
解析URL参数
-
export const getSearchParams = () => { const searchPar = new URLSearchParams(window.location.search) const paramsObj = {} for (const [key, value] of searchPar.entries()) { paramsObj[key] = value } return paramsObj } // 示例 // 假设URL https://****com/index?id=154513&age=18; getSearchParams(); // {id: "154513", age: "18"}
-
-
滚动到页面顶部、滚动到元素位置
-
/** * 滚动到页面顶部 **/ export const scrollToTop = () => { const height = document.documentElement.scrollTop || document.body.scrollTop; if (height > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, height - height / 8); } } /** * 滚动到元素位置 **/ export const smoothScroll = element =>{ document.querySelector(element).scrollIntoView({ behavior: 'smooth' }); }; //示例 smoothScroll('#target'); // 平滑滚动到 ID 为 target 的元素 /** * 判断页面是否在底部 **/ const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;
-
-
uuid
-
export const uuid = () => { const temp_url = URL.createObjectURL(new Blob()) const uuid = temp_url.toString() URL.revokeObjectURL(temp_url) //释放这个url return uuid.substring(uuid.lastIndexOf('/') + 1) } // 示例 uuid() // a640be34-689f-4b98-be77-e3972f9bffdd
-
-
存储操作
-
class MyCache { constructor(isLocal = true) { this.storage = isLocal ? localStorage : sessionStorage } setItem(key, value) { if (typeof (value) === 'object') value = JSON.stringify(value) this.storage.setItem(key, value) } getItem(key) { try { return JSON.parse(this.storage.getItem(key)) } catch (err) { return this.storage.getItem(key) } } removeItem(key) { this.storage.removeItem(key) } clear() { this.storage.clear() } key(index) { return this.storage.key(index) } length() { return this.storage.length } } const localCache = new MyCache() const sessionCache = new MyCache(false) export { localCache, sessionCache } // 示例 localCache.getItem('user') sessionCache.setItem('name','树哥') sessionCache.getItem('token') localCache.clear()
-
-
下载文件
-
/** * api 接口 * params 请求参数 * fileName 文件名 **/ const downloadFile = (api, params, fileName, type = 'get') => { axios({ method: type, url: api, responseType: 'blob', params: params }).then((res) => { let str = res.headers['content-disposition'] if (!res || !str) { return } let suffix = '' // 截取文件名和文件类型 if (str.lastIndexOf('.')) { fileName ? '' : fileName = decodeURI(str.substring(str.indexOf('=') + 1, str.lastIndexOf('.'))) suffix = str.substring(str.lastIndexOf('.'), str.length) } // 如果支持微软的文件下载方式(ie10+浏览器) if (window.navigator.msSaveBlob) { try { const blobObject = new Blob([res.data]); window.navigator.msSaveBlob(blobObject, fileName + suffix); } catch (e) { console.log(e); } } else { // 其他浏览器 let url = window.URL.createObjectURL(res.data) let link = document.createElement('a') link.style.display = 'none' link.href = url link.setAttribute('download', fileName + suffix) document.body.appendChild(link) link.click() document.body.removeChild(link) window.URL.revokeObjectURL(link.href); } }).catch((err) => { console.log(err.message); }) } // 示例 downloadFile('/api/download', {id}, '文件名');
-
-
深拷贝
- 想要完备的深拷贝,推荐使用 lodash 中的 cloneDeep 方法
-
模糊检索
-
/** * list 原数组 * keyWord 查询的关键词 * attribute 数组需要检索属性 **/ export const fuzzyQuery = (list, keyWord, attribute = 'name') => { const reg = new RegExp(keyWord) const arr = [] for (let i = 0; i < list.length; i++) { if (reg.test(list[i][attribute])) { arr.push(list[i]) } } return arr } // 示例: const list = [ { id: 1, name: '小哥' }, { id: 2, name: '黄老爷' }, { id: 3, name: '张麻子' }, { id: 4, name: '汤师爷' }, { id: 5, name: '胡万' }, { id: 6, name: '花姐' }, { id: 7, name: '小梅' } ] fuzzyQuery(list, '哥', 'name') // [{id: 1, name: '小哥'}]
-
-
遍历树节点
-
export const foreachTree = (data, callback, childrenName = 'children') => { for (let i = 0; i < data.length; i++) { callback(data[i]) if (data[i][childrenName] && data[i][childrenName].length > 0) { foreachTree(data[i][childrenName], callback, childrenName) } } } // 示例: const treeData = [{ id: 1, label: '一级 1', children: [{ id: 4, label: '二级 1-1', children: [{ id: 9, label: '三级 1-1-1' }, { id: 10, label: '三级 1-1-2' }] }] }, { id: 2, label: '一级 2', children: [{ id: 5, label: '二级 2-1' }, { id: 6, label: '二级 2-2' }] }, { id: 3, label: '一级 3', children: [{ id: 7, label: '二级 3-1' }, { id: 8, label: '二级 3-2' }] }], let result foreachTree(data, (item) => { if (item.id === 9) { result = item } }) console.log('result', result) // {id: 9,label: "三级 1-1-1"}
-