亚洲精品中文免费|亚洲日韩中文字幕制服|久久精品亚洲免费|一本之道久久免费

      
      

            <dl id="hur0q"><div id="hur0q"></div></dl>

                20 個(gè) JS 工具函數(shù)助力高效開發(fā)

                1、校驗(yàn)數(shù)據(jù)類型

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

                示例

                typeOf(‘樹哥’)// stringtypeOf([])// arraytypeOf(new Date())// datetypeOf(null) // nulltypeOf(true) // booleantypeOf(() => { }) // function

                2、防抖

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

                示例:

                如 vue 中使用

                methods: {loadList() {debounce(() => {console.log(‘加載數(shù)據(jù)’)}, 500)}}

                3、節(jié)流

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

                4、手機(jī)號(hào)脫敏

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

                5、開啟全屏

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

                6、關(guān)閉全屏

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

                7、大小寫轉(zhuǎn)換

                參數(shù):

                • str 待轉(zhuǎn)換的字符串
                • 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) // VUEturnCase(‘REACT’, 2) // reactturnCase(‘vue’, 3) // Vue

                8、解析URL參數(shù)

                export const getSearchParams = () => {const searchPar = new URLSearchParams(window.location.search)const paramsObj = {}for (const [key, value] of searchPar.entries()) {paramsObj[key] = value}return paramsObj}

                示例:

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

                9、判斷手機(jī)是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、數(shù)組對象根據(jù)字段去重

                參數(shù):

                • arr 要去重的數(shù)組
                • key 根據(jù)去重的字段名

                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、滾動(dòng)到頁面頂部

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

                12、滾動(dòng)到元素位置

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

                示例:

                smoothScroll(‘#target’); // 平滑滾動(dòng)到 ID 為 target 的元素

                13、uuid

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

                示例:

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

                不過要吐槽一句的是,uuid一般應(yīng)由后端來進(jìn)行生成

                14、金額格式化

                參數(shù):

                • {number} number:要格式化的數(shù)字
                • {number} decimals:保留幾位小數(shù)
                • {string} dec_point:小數(shù)點(diǎn)符號(hào)
                • {string} thousands_sep:千分位符號(hào)

                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.00moneyFormat(10000000, 3, ‘.’, ‘-‘) // 10-000-000.000

                15、存儲(chǔ)操作

                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、下載文件

                參數(shù):

                • api 接口
                • params 請求參數(shù)
                • 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、時(shí)間操作

                關(guān)于時(shí)間操作,沒必要自己再寫一大串代碼了,強(qiáng)烈推薦使用 day.js[2]

                Day.js 是一個(gè)僅 2kb 大小的輕量級(jí) JavaScript 時(shí)間日期處理庫,下載、解析和執(zhí)行的JavaScript更少,為代碼留下更多的時(shí)間。

                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;};// 維護(hù)兩個(gè)儲(chǔ)存循環(huán)引用的數(shù)組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”)) {// 對數(shù)組做特殊處理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);}// 處理循環(huán)引用const index = parents.indexOf(parent);if (index != -1) {// 如果父數(shù)組存在本對象,說明之前已經(jīng)被引用過,直接返回此對象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。

                如果確實(shí)想要完備的深拷貝,推薦使用 lodash 中的 cloneDeep 方法。

                19、模糊搜索

                參數(shù):

                • list 原數(shù)組
                • keyWord 查詢的關(guān)鍵詞
                • attribute 數(shù)組需要檢索屬性

                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、遍歷樹節(jié)點(diǎn)

                export const foreachTree = (data, callback, childrenName = ‘children’) => {for (let i = 0; i0) {foreachTree(data[i][childrenName], callback, childrenName)}}}

                示例:

                假設(shè)我們要從樹狀結(jié)構(gòu)數(shù)據(jù)中查找 id 為 9 的節(jié)點(diǎn)

                const treeData = [{id: 1,label: ‘一級(jí) 1’,children: [{id: 4,label: ‘二級(jí) 1-1’,children: [{id: 9,label: ‘三級(jí) 1-1-1’}, {id: 10,label: ‘三級(jí) 1-1-2’}]}] }, {id: 2,label: ‘一級(jí) 2’,children: [{id: 5,label: ‘二級(jí) 2-1’}, {id: 6,label: ‘二級(jí) 2-2’}]}, {id: 3,label: ‘一級(jí) 3’,children: [{id: 7,label: ‘二級(jí) 3-1’}, {id: 8,label: ‘二級(jí) 3-2’}]}],let resultforeachTree(data, (item) => {if (item.id === 9) {result = item}})console.log(‘result’, result)// {id: 9,label: “三級(jí) 1-1-1”}

                鄭重聲明:本文內(nèi)容及圖片均整理自互聯(lián)網(wǎng),不代表本站立場,版權(quán)歸原作者所有,如有侵權(quán)請聯(lián)系管理員(admin#wlmqw.com)刪除。
                用戶投稿
                上一篇 2022年9月16日 21:10
                下一篇 2022年9月16日 21:10

                相關(guān)推薦

                • 存儲(chǔ)過程語法(sql server存儲(chǔ)過程語法)

                  今天小編給各位分享存儲(chǔ)過程語法的知識(shí),其中也會(huì)對sql server存儲(chǔ)過程語法進(jìn)行解釋,如果能碰巧解決你現(xiàn)在面臨的問題,別忘了關(guān)注本站,現(xiàn)在開始吧! oracle存儲(chǔ)過程基本語法…

                  2022年11月26日
                • 武漢疫情最新消息今天新增哪些地方有風(fēng)險(xiǎn)

                  11月16日,據(jù)武漢疫情最新通報(bào),昨日全市新增本土4+44,其中有多例陽性感染者是在常態(tài)化核酸篩查中檢出的。目前官方已經(jīng)通報(bào)了新增新冠病毒感染者詳情,風(fēng)險(xiǎn)點(diǎn)位涉順豐速運(yùn)營業(yè)點(diǎn)、盒馬…

                  2022年11月17日
                • 重慶消防辟謠龍麻子被特招入伍 來看事件始末

                  自從重慶龍麻子走紅后,關(guān)注他的人越來越多,現(xiàn)在粉絲也在不斷上漲。這兩天,有網(wǎng)友爆料龍麻子被特招入伍了,引發(fā)全網(wǎng)熱議。對此,重慶消防辟謠龍麻子被特招入伍,具體詳情跟小編一起去看看吧?!?/p>

                  2022年9月2日
                • 初秋少不了一條“小白褲”,今年流行這樣穿,高級(jí)又吸睛

                  初秋的季節(jié),穿衣搭配既要滿足這個(gè)季節(jié)的實(shí)際需要,又要保證搭配的時(shí)尚感和精致度,拒絕穿出沉悶高級(jí)的感覺。配色清爽、時(shí)尚又高級(jí)的小白褲無疑是初秋搭配的必備下裝單品之一,可以完美匹配各種…

                  2022年8月25日
                • 有哪些由中國人開發(fā)的編程語言?

                  出品 | OSC社區(qū)(ID:OSCHINA_2013) 本期 Awesome 系列給大家介紹下中國人主導(dǎo)的編程語言。 1、洛書 —— 國產(chǎn)中文編程語言 洛書編程語言旨在打造開源、高…

                  2022年8月24日
                • 算法|八皇后問題理解回溯法

                  回溯算法從空解開始,并逐步擴(kuò)展該解。搜索遞歸地通過各種不同的構(gòu)造解決方案的路徑。 例如,考慮計(jì)算n皇后問題:在n*n的棋盤上放置彼此不受攻擊的n個(gè)皇后。 (皇后可以攻擊在同一行、同…

                  2022年8月22日
                • Amazon亞馬遜各個(gè)類目的銷售傭金費(fèi)率

                  對于所有商品,亞馬遜將扣除基于總銷售價(jià)格和適用百分比計(jì)算得出的銷售傭金,其中不包含通過亞馬遜稅務(wù)計(jì)算服務(wù)計(jì)算得出的任何稅費(fèi)??備N售價(jià)格是買家支付的總金額,包括商品價(jià)格以及所有運(yùn)費(fèi)或…

                  2022年8月20日
                • JDK數(shù)組阻塞隊(duì)列源碼深入剖析

                  JDK數(shù)組阻塞隊(duì)列源碼深入剖析 阻塞隊(duì)列的功能 而在本篇文章所談到的阻塞隊(duì)列當(dāng)中,是在并發(fā)的情況下使用的,上面所談到的是隊(duì)列是 并發(fā)不安全 的,但是阻塞隊(duì)列在并發(fā)下情況是安全的。阻…

                  2022年8月16日
                • C++的四類循環(huán):Entry or Exit controlled, Ranged-based or For_each

                  In programming, sometimes there is a need to perform some operation more than once or (say…

                  2022年8月15日
                • 細(xì)說redis數(shù)據(jù)類型

                  本文主要講解redis的6種數(shù)據(jù)類型。 string redis的string可以存儲(chǔ)3種數(shù)據(jù)類型:string,整數(shù)和浮點(diǎn)數(shù)。 常見的操作如下 命令名稱 示例 描述 set se…

                  2022年8月11日

                聯(lián)系我們

                聯(lián)系郵箱:admin#wlmqw.com
                工作時(shí)間:周一至周五,10:30-18:30,節(jié)假日休息