前言

??在我們H5的日常開發中，前端會面對各種不同的需求，我們經常會用到以前開發過的一些工具函數，我現在把這些工具函數收集起來，將大大提高我們的開發效率。

1、防抖

export const debounce = (() => {let timer = nullreturn (callback, wait = 800) => {timer&&clearTimeout(timer)timer = setTimeout(callback, wait)} })()

示例：
如 vue 中使用

methods: {loadList() {debounce(() => {console.log('加載數據')}, 500)} }

2、節流

export const throttle = (() => {let last = 0return (callback, wait = 800) => {let now = +new Date()if (now - last > wait) {callback()last = now}} })()

3、校驗數據類型

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

示例：

typeOf('樹哥') // string typeOf([]) // array typeOf(new Date()) // date typeOf(null) // null typeOf(true) // boolean typeOf(() => { }) // function

4、開啟全屏

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()} }

5、關閉全屏

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()} }

6、手機號脫敏

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

7、大小寫轉換

參數：
● 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

8、解析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 }

示例：

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

9、判斷手機是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; }

10、數組對象根據字段去重

參數：
arr 要去重的數組
key 去重的字段名

export const uniqueArrayObject = (arr = [], key = 'id') => {if (arr.length === 0) returnlet 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: '張麻子' }]

11、滾動到頁面頂部

export const scrollToTop = () => {const height = document.documentElement.scrollTop || document.body.scrollTop;if (height > 0) {window.requestAnimationFrame(scrollToTop);window.scrollTo(0, height - height / 8);} }

12、滾動到元素位置

export const smoothScroll = element =>{document.querySelector(element).scrollIntoView({behavior: 'smooth'}); };

示例：

smoothScroll('#target'); // 平滑滾動到 ID 為 target 的元素

13、uuid

export const uuid = () => {const temp_url = URL.createObjectURL(new Blob())const uuid = temp_url.toString()URL.revokeObjectURL(temp_url) //釋放這個urlreturn uuid.substring(uuid.lastIndexOf('/') + 1) }

示例：

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

不過要吐槽一句的是，uuid一般應由后端來進行生成

14、金額格式化

參數：

{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 : +numberconst prec = !isFinite(+decimals) ? 2 : Math.abs(decimals)const sep = typeof thousands_sep === 'undefined' ? ',' : thousands_sepconst dec = typeof dec_point === 'undefined' ? '.' : dec_pointlet 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

15、存儲操作

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()

16、下載文件

參數：
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 = urllink.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}, '文件名')

17、時間操作

關于時間操作，沒必要自己再寫一大串代碼了，強烈推薦使用 day.js
Day.js 是一個僅 2kb 大小的輕量級 JavaScript 時間日期處理庫，下載、解析和執行的JavaScript更少，為代碼留下更多的時間。

18、深拷貝

export const clone = parent => {// 判斷類型const isType = (obj, type) => {if (typeof obj !== "object") return false;const typeString = Object.prototype.toString.call(obj);let flag;switch (type) {case "Array":flag = typeString === "[object Array]";break;case "Date":flag = typeString === "[object Date]";break;case "RegExp":flag = typeString === "[object RegExp]";break;default:flag = false;}return flag;};// 處理正則const getRegExp = re => {var flags = "";if (re.global) flags += "g";if (re.ignoreCase) flags += "i";if (re.multiline) flags += "m";return flags;};// 維護兩個儲存循環引用的數組const parents = [];const children = [];const _clone = parent => {if (parent === null) return null;if (typeof parent !== "object") return parent;let child, proto;if (isType(parent, "Array")) {// 對數組做特殊處理child = [];} else if (isType(parent, "RegExp")) {// 對正則對象做特殊處理child = new RegExp(parent.source, getRegExp(parent));if (parent.lastIndex) child.lastIndex = parent.lastIndex;} else if (isType(parent, "Date")) {// 對Date對象做特殊處理child = new Date(parent.getTime());} else {// 處理對象原型proto = Object.getPrototypeOf(parent);// 利用Object.create切斷原型鏈child = Object.create(proto);}// 處理循環引用const index = parents.indexOf(parent);if (index != -1) {// 如果父數組存在本對象,說明之前已經被引用過,直接返回此對象return children[index];}parents.push(parent);children.push(child);for (let i in parent) {// 遞歸child[i] = _clone(parent[i]);}return child;};return _clone(parent); };

此方法存在一定局限性：一些特殊情況沒有處理: 例如Buffer對象、Promise、Set、Map。
如果確實想要完備的深拷貝，推薦使用 lodash 中的 cloneDeep 方法。

19、模糊搜索

參數：
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: '樹哥'}]

20、遍歷樹節點

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)}} }

示例：

假設我們要從樹狀結構數據中查找 id 為 9 的節點

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"}

總結

以上是生活随笔為你收集整理的JavaScript的20个工具函数助力H5高效开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。