前言

在我們?nèi)粘ｉ_(kāi)發(fā)的時(shí)候，可能會(huì)遇到各種各樣的需求，但是自己一時(shí)半會(huì)兒可能找不到合適的辦法去解決。書(shū)到用時(shí)方恨少，下面的這些JavaScript的工具函數(shù)可能就會(huì)派上大用場(chǎng)了，我們可以進(jìn)行復(fù)用，提高我們的工作效率。

我把下面的方法都大致分了個(gè)類放在了我的GitHub上。大家可以clone下來(lái)直接使用，也可以在需要用到時(shí)在里面去查找，善用ctrl F。
這個(gè)倉(cāng)庫(kù)也會(huì)持更新的，如果里面沒(méi)有，但是需要用到的工具函數(shù)，大家也可以在issues提出來(lái)，說(shuō)不定就幫到了別人喲~

大家學(xué)完知識(shí)后別忘了順手再下載Freemen App投遞下簡(jiǎn)歷，暫時(shí)沒(méi)求職意向的小伙伴也可以先囤下崗位，跪求各位程序員大佬動(dòng)動(dòng)手指，讓小編可以加個(gè)雞腿。

正則校驗(yàn)check工具函數(shù)

這里的正則表達(dá)式主要參考了any-rule。

驗(yàn)證不能包含字母

/** * @param { string } value */export const isNoWord = value => /^[^A-Za-z]*$/g.test(value);

驗(yàn)證中文和數(shù)字

/** * @param { string } value */export const isCHNAndEN = value => /^((?:[u3400-u4DB5u4E00-u9FEAuFA0EuFA0FuFA11uFA13uFA14uFA1FuFA21uFA23uFA24uFA27-uFA29]|[uD840-uD868uD86A-uD86CuD86F-uD872uD874-uD879][uDC00-uDFFF]|uD869[uDC00-uDED6uDF00-uDFFF]|uD86D[uDC00-uDF34uDF40-uDFFF]|uD86E[uDC00-uDC1DuDC20-uDFFF]|uD873[uDC00-uDEA1uDEB0-uDFFF]|uD87A[uDC00-uDFE0])|(d)) $/g.test(value);

驗(yàn)證郵政編碼(中國(guó))

/** * @param { string } value */export const isPostcode = value => /^(0[1-7]|1[0-356]|2[0-7]|3[0-6]|4[0-7]|5[1-7]|6[1-7]|7[0-5]|8[013-6])d{4}$/g.test(value);

驗(yàn)證微信號(hào)，6至20位，以字母開(kāi)頭，字母，數(shù)字，減號(hào)，下劃線

/** * @param { string } value */export const isWeChatNum = value => /^[a-zA-Z][-_a-zA-Z0-9]{5,19}$/g.test(value);

驗(yàn)證16進(jìn)制顏色

/** * @param { string } value */export const isColor16 = value => /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/g.test(value);

驗(yàn)證火車車次

/** * @param { string } value */export const isTrainNum = value => /^[GCDZTSPKXLY1-9]d{1,4}$/g.test(value);

驗(yàn)證手機(jī)機(jī)身碼(IMEI)

/** * @param { string } value */export const isIMEI = value => /^d{15,17}$/g.test(value);

驗(yàn)證必須帶端口號(hào)的網(wǎng)址(或ip)

/** * @param { string } value */export const isHttpAndPort = value => /^((ht|f)tps?://)?[w-] (.[w-] ) :d{1,5}/?$/g.test(value);

驗(yàn)證網(wǎng)址(支持端口和"? 參數(shù)"和"# 參數(shù))

/** * @param { string } value */export const isRightWebsite = value => /^(((ht|f)tps?)://)?[w-] (.[w-] ) ([w.,@?^=%&:/~ #-]*[w@?^=%&/~ #-])?$/g.test(value);

驗(yàn)證統(tǒng)一社會(huì)信用代碼

/** * @param { string } value */export const isCreditCode = value => /^[0-9A-HJ-NPQRTUWXY]{2}d{6}[0-9A-HJ-NPQRTUWXY]{10}$/g.test(value);

驗(yàn)證迅雷鏈接

/** * @param { string } value */export const isThunderLink = value => /^thunderx?://[a-zA-Zd] =$/g.test(value);

驗(yàn)證ed2k鏈接(寬松匹配)

/** * @param { string } value */export const ised2k = value => /^ed2k://|File|. |/$/g.test(value);

驗(yàn)證磁力鏈接(寬松匹配)

/** * @param { string } value */export const isMagnet = value => /^magnet:?xt=urn:btih:[0-9a-fA-F]{40,}.*$/g.test(value);

驗(yàn)證子網(wǎng)掩碼

/** * @param { string } value */export const isSubnetMask = value => /^(?:d{1,2}|1dd|2[0-4]d|25[0-5])(?:.(?:d{1,2}|1dd|2[0-4]d|25[0-5])){3}$/g.test(value);

驗(yàn)證linux"文件夾"路徑

/** * @param { string } value */export const isLinuxFolderPath = value => /^(/[^/] ) /?$/g.test(value);

驗(yàn)證linux"文件"路徑

/** * @param { string } value */export const isLinuxFilePath = value => /^(/[^/] ) $/g.test(value);

驗(yàn)證window"文件夾"路徑

/** * @param { string } value */export const isWindowsFolderPath = value => /^[a-zA-Z]:(?:w ?)*$/g.test(value);

驗(yàn)證window下"文件"路徑

/** * @param { string } value */export const isWindowsFilePath = value => /^[a-zA-Z]:(?:w )*w .w $/g.test(value);

驗(yàn)證股票代碼(A股)

/** * @param { string } value */export const isAShare = value => /^(s[hz]|S[HZ])(000[d]{3}|002[d]{3}|300[d]{3}|600[d]{3}|60[d]{4})$/g.test(value);

驗(yàn)證版本號(hào)格式必須為X.Y.Z

/** * @param { string } value */export const isVersion = value => /^d (?:.d ){2}$/g.test(value);

驗(yàn)證視頻鏈接地址（視頻格式可按需增刪）

/** * @param { string } value */export const isVideoUrl = value => /^https?://(. /) . (.(swf|avi|flv|mpg|rm|mov|wav|asf|3gp|mkv|rmvb|mp4))$/i.test(value);

驗(yàn)證圖片鏈接地址（圖片格式可按需增刪）

/** * @param { string } value */export const isImageUrl = value => /^https?://(. /) . (.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i.test(value);

驗(yàn)證銀行卡號(hào)（10到30位, 覆蓋對(duì)公/私賬戶, 參考微信支付）

/** * @param { string } value */export const isAccountNumber = value => /^[1-9]d{9,29}$/g.test(value);

驗(yàn)證中文姓名

/** * @param { string } value */export const isChineseName = value => /^(?:[u4e00-u9fa5·]{2,16})$/g.test(value);

驗(yàn)證英文姓名

/** * @param { string } value */export const isEnglishName = value => /(^[a-zA-Z]{1}[a-zA-Zs]{0,20}[a-zA-Z]{1}$)/g.test(value);

驗(yàn)證車牌號(hào)(新能源)

/** * @param { string } value */export const isLicensePlateNumberNER = value => /[京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領(lǐng) A-Z]{1}[A-HJ-NP-Z]{1}(([0-9]{5}[DF])|([DF][A-HJ-NP-Z0-9][0-9]{4}))$/g.test(value);

驗(yàn)證車牌號(hào)(非新能源)

/** * @param { string } value */export const isLicensePlateNumberNNER = value => /^[京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領(lǐng) A-Z]{1}[A-HJ-NP-Z]{1}[A-Z0-9]{4}[A-Z0-9掛學(xué)警港澳]{1}$/g.test(value);

驗(yàn)證車牌號(hào)(新能源 非新能源)

/** * @param { string } value */export const isLicensePlateNumber = value => /^(?:[京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領(lǐng) A-Z]{1}[A-HJ-NP-Z]{1}(?:(?:[0-9]{5}[DF])|(?:[DF](?:[A-HJ-NP-Z0-9])[0-9]{4})))|(?:[京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領(lǐng) A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9 掛學(xué)警港澳]{1})$/g.test(value);

驗(yàn)證手機(jī)號(hào)中國(guó)(嚴(yán)謹(jǐn)), 根據(jù)工信部2019年最新公布的手機(jī)號(hào)段

/** * @param { string } value */export const isMPStrict = value => /^(?:(?: |00)86)?1(?:(?:3[d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[d])|(?:9[1|8|9]))d{8}$/g.test(value);

驗(yàn)證手機(jī)號(hào)中國(guó)(寬松), 只要是13,14,15,16,17,18,19開(kāi)頭即可

/** * @param { string } value */export const isMPRelaxed = value => /^(?:(?: |00)86)?1[3-9]d{9}$/g.test(value);

驗(yàn)證email(郵箱)

/** * @param { string } value */export const isEmail = value => /^[a-zA-Z0-9.!#$%&'* /=?^_`{|}~-] @[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/g.test(value);

驗(yàn)證座機(jī)電話(國(guó)內(nèi)),如: 0341-86091234

/** * @param { string } value */export const isLandlineTelephone = value => /d{3}-d{8}|d{4}-d{7}/g.test(value);

驗(yàn)證身份證號(hào)(1代,15位數(shù)字)

/** * @param { string } value */export const isIDCardOld = value => /^d{8}(0d|10|11|12)([0-2]d|30|31)d{3}$/g.test(value);

驗(yàn)證身份證號(hào)(2代,18位數(shù)字),最后一位是校驗(yàn)位,可能為數(shù)字或字符X

/** * @param { string } value */export const isIDCardNew = value => /^d{6}(18|19|20)d{2}(0d|10|11|12)([0-2]d|30|31)d{3}[dXx]$/g.test(value);

驗(yàn)證身份證號(hào), 支持1/2代(15位/18位數(shù)字)

/** * @param { string } value */export const isIDCard = value => /(^d{8}(0d|10|11|12)([0-2]d|30|31)d{3}$)|(^d{6}(18|19|20)d{2}(0d|10|11|12)([0-2]d|30|31)d{3}(d|X|x)$)/g.test(value);

驗(yàn)證護(hù)照（包含香港、澳門）

/** * @param { string } value */export const isPassport = value => /(^[EeKkGgDdSsPpHh]d{8}$)|(^(([Ee][a-fA-F])|([DdSsPp][Ee])|([Kk][Jj])|([Mm][Aa])|(1[45]))d{7}$)/g.test(value);

驗(yàn)證帳號(hào)是否合法(字母開(kāi)頭，允許5-16字節(jié)，允許字母數(shù)字下劃線組合

/** * @param { string } value */export const isWebAccount = value => /^[a-zA-Z]w{4,15}$/g.test(value);

驗(yàn)證中文/漢字

/** * @param { string } value */export const isChineseCharacter = value => /^(?:[u3400-u4DB5u4E00-u9FEAuFA0EuFA0FuFA11uFA13uFA14uFA1FuFA21uFA23uFA24uFA27-uFA29]|[uD840-uD868uD86A-uD86CuD86F-uD872uD874-uD879][uDC00-uDFFF]|uD869[uDC00-uDED6uDF00-uDFFF]|uD86D[uDC00-uDF34uDF40-uDFFF]|uD86E[uDC00-uDC1DuDC20-uDFFF]|uD873[uDC00-uDEA1uDEB0-uDFFF]|uD87A[uDC00-uDFE0]) $/g.test(value);

驗(yàn)證小數(shù)

/** * @param { string } value */export const isDecimal = value => /^d .d $/g.test(value);

驗(yàn)證數(shù)字

/** * @param { string } value */export const isNumber = value => /^d{1,}$/g.test(value);

驗(yàn)證qq號(hào)格式

/** * @param { string } value */export const isQQNum = value => /^[1-9][0-9]{4,10}$/g.test(value);

驗(yàn)證數(shù)字和字母組成

/** * @param { string } value */export const isNumAndStr = value => /^[A-Za-z0-9] $/g.test(value);

驗(yàn)證英文字母

/** * @param { string } value */export const isEnglish = value => /^[a-zA-Z] $/g.test(value);

驗(yàn)證大寫英文字母

/** * @param { string } value */export const isCapital = value => /^[A-Z] $/g.test(value);

驗(yàn)證小寫英文字母

/** * @param { string } value */export const isLowercase = value => /^[a-z] $/g.test(value);

瀏覽器操作相關(guān)browser工具函數(shù)

返回當(dāng)前url

export const currentURL = () => window.location.href;

獲取url參數(shù)（第一種）

/** * @param {*} name * @param {*} origin */export function getUrlParam(name, origin = null) { let reg = new RegExp("(^|&)" name "=([^&]*)(&|$)"); let r = null; if (origin == null) { r = window.location.search.substr(1).match(reg); } else { r = origin.substr(1).match(reg); } if (r != null) return decodeURIComponent(r[2]); return null;}

獲取url參數(shù)（第二種）

/** * @param {*} name * @param {*} origin */export function getUrlParams(name, origin = null) { let url = location.href; let temp1 = url.split('?'); let pram = temp1[1]; let keyValue = pram.split('&'); let obj = {}; for (let i = 0; i < keyValue.length; i ) { let item = keyValue[i].split('='); let key = item[0]; let value = item[1]; obj[key] = value; } return obj[name];}

修改url中的參數(shù)

/** * @param { string } paramName * @param { string } replaceWith */export function replaceParamVal(paramName,replaceWith) { var oUrl = location.href.toString(); var re=eval('/(' paramName '=)([^&]*)/gi'); location.href = oUrl.replace(re,paramName '=' replaceWith); return location.href;}

刪除url中指定的參數(shù)

/** * @param { string } name */export function funcUrlDel(name){ var loca =location; var baseUrl = loca.origin loca.pathname "?"; var query = loca.search.substr(1); if (query.indexOf(name)>-1) { var obj = {}; var arr = query.split("&"); for (var i = 0; i < arr.length; i ) { arr[i] = arr[i].split("="); obj[arr[i][0]] = arr[i][1]; } delete obj[name]; var url = baseUrl JSON.stringify(obj).replace(/["{}]/g,"").replace(/:/g,"=").replace(/,/g,"&"); return url }}

獲取窗口可視范圍的高度

export function getClientHeight() { let clientHeight = 0; if (document.body.clientHeight && document.documentElement.clientHeight) { clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight; } else { clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight; } return clientHeight;}

獲取窗口可視范圍寬度

export function getPageViewWidth() { let d = document, a = d.compatMode == "BackCompat" ? d.body : d.documentElement; return a.clientWidth;}

獲取窗口寬度

export function getPageWidth() { let g = document, a = g.body, f = g.documentElement, d = g.compatMode == "BackCompat" ? a : g.documentElement; return Math.max(f.scrollWidth, a.scrollWidth, d.clientWidth);}

獲取窗口尺寸

export function getViewportOffset() { if (window.innerWidth) { return { w: window.innerWidth, h: window.innerHeight } } else { // ie8及其以下 if (document.compatMode === "BackCompat") { // 怪異模式 return { w: document.body.clientWidth, h: document.body.clientHeight } } else { // 標(biāo)準(zhǔn)模式 return { w: document.documentElement.clientWidth, h: document.documentElement.clientHeight } } }}

獲取滾動(dòng)條距頂部高度

export function getPageScrollTop() { let a = document; return a.documentElement.scrollTop || a.body.scrollTop;}

獲取滾動(dòng)條距左邊的高度

export function getPageScrollLeft() { let a = document; return a.documentElement.scrollLeft || a.body.scrollLeft;}

開(kāi)啟全屏

/** * @param {*} element */export function 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() }}

關(guān)閉全屏

export function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen() } else if (document.msExitFullscreen) { document.msExitFullscreen() } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen() } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen() }}

返回當(dāng)前滾動(dòng)條位置

export const getScrollPosition = (el = window) => ({ x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft, y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop});

滾動(dòng)到指定元素區(qū)域

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

平滑滾動(dòng)到頁(yè)面頂部

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

http跳轉(zhuǎn)https

export const httpsRedirect = () => { if (location.protocol !== 'https:') location.replace('https://' location.href.split('//')[1]);};

檢查頁(yè)面底部是否可見(jiàn)

export const bottomVisible = () =>{ return document.documentElement.clientHeight window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight);};

打開(kāi)一個(gè)窗口

/** * @param { string } url * @param { string } windowName * @param { number } width * @param { number } height */export function openWindow(url, windowName, width, height) { var x = parseInt(screen.width / 2.0) - width / 2.0; var y = parseInt(screen.height / 2.0) - height / 2.0; var isMSIE = navigator.appName == "Microsoft Internet Explorer"; if (isMSIE) { var p = "resizable=1,location=no,scrollbars=no,width="; p = p width; p = p ",height="; p = p height; p = p ",left="; p = p x; p = p ",top="; p = p y; window.open(url, windowName, p); } else { var win = window.open( url, "ZyiisPopup", "top=" y ",left=" x ",scrollbars=" scrollbars ",dialog=yes,modal=yes,width=" width ",height=" height ",resizable=no" ); eval("try { win.resizeTo(width, height); } catch(e) { }"); win.focus(); }}

自適應(yīng)頁(yè)面（rem）

/** * @param { number } width */export function AutoResponse(width = 750) { const target = document.documentElement; target.clientWidth >= 600 ? (target.style.fontSize = "80px") : (target.style.fontSize = target.clientWidth / width * 100 "px");}

日期工具date工具函數(shù)

可以參考我的另一篇文章《前端的各種日期操作》，或者直接到我的GitHub查看

瀏覽器存儲(chǔ)相關(guān)storage工具函數(shù)

主要為瀏覽器存儲(chǔ)方面的工具函數(shù)，大部分搬運(yùn)自大神火狼1

localStorage 存貯

/** * 目前對(duì)象值如果是函數(shù) 、RegExp等特殊對(duì)象存貯會(huì)被忽略 * @param { String } key 屬性 * @param { string } value 值 */export const localStorageSet = (key, value) => { if (typeof (value) === 'object') value = JSON.stringify(value); localStorage.setItem(key, value)};

localStorage 獲取

/** * @param {String} key 屬性 */export const localStorageGet = (key) => { return localStorage.getItem(key)};

localStorage 移除

/** * @param {String} key 屬性 */export const localStorageRemove = (key) => { localStorage.removeItem(key)};

localStorage 存貯某一段時(shí)間失效

/** * @param {String} key 屬性 * @param {*} value 存貯值 * @param { number } expire 過(guò)期時(shí)間,毫秒數(shù) */export const localStorageSetExpire = (key, value, expire) => { if (typeof (value) === 'object') value = JSON.stringify(value); localStorage.setItem(key, value); setTimeout(() => { localStorage.removeItem(key) }, expire)};

sessionStorage 存貯

/** * @param {String} key 屬性 * @param {*} value 值 */export const sessionStorageSet = (key, value) => { if (typeof (value) === 'object') value = JSON.stringify(value); sessionStorage.setItem(key, value)};

sessionStorage 獲取

/** * @param {String} key 屬性 */export const sessionStorageGet = (key) => { return sessionStorage.getItem(key)};

sessionStorage 刪除

/** * @param {String} key 屬性 */export const sessionStorageRemove = (key) => { sessionStorage.removeItem(key)};

sessionStorage 存貯某一段時(shí)間失效

/** * @param {String} key 屬性 * @param {*} value 存貯值 * @param {String} expire 過(guò)期時(shí)間,毫秒數(shù) */export const sessionStorageSetExpire = (key, value, expire) => { if (typeof (value) === 'object') value = JSON.stringify(value); sessionStorage.setItem(key, value); setTimeout(() => { sessionStorage.removeItem(key) }, expire)};

cookie 存貯

/** * @param {String} key 屬性 * @param {*} value 值 * @param { String } expire 過(guò)期時(shí)間,單位天 */export const cookieSet = (key, value, expire) => { const d = new Date(); d.setDate(d.getDate() expire); document.cookie = `${key}=${value};expires=${d.toUTCString()}`};

cookie 獲取

/** * @param {String} key 屬性 */export const cookieGet = (key) => { const cookieStr = unescape(document.cookie); const arr = cookieStr.split('; '); let cookieValue = ''; for (let i = 0; i < arr.length; i ) { const temp = arr[i].split('='); if (temp[0] === key) { cookieValue = temp[1]; break } } return cookieValue};

cookie 刪除

/** * @param {String} key 屬性 */export const cookieRemove = (key) => { document.cookie = `${encodeURIComponent(key)}=;expires=${new Date()}`};

更多的工具函數(shù)

這里包含了平時(shí)可能常用的工具函數(shù)，包含數(shù)字，字符串，數(shù)組和對(duì)象等等操作。

金錢格式化，三位加逗號(hào)

/** * @param { number } num */export const formatMoney = num => num.toString().replace(/B(?=(d{3}) (?!d))/g, ",");

截取字符串并加身略號(hào)

export function subText(str, length) { if (str.length === 0) { return ''; } if (str.length > length) { return str.substr(0, length) "..."; } else { return str; }}

獲取文件base64編碼

/** * @param file * @param format 指定文件格式 * @param size 指定文件大小(字節(jié)) * @param formatMsg 格式錯(cuò)誤提示 * @param sizeMsg 大小超出限制提示 * @returns {Promise<any>} */export function fileToBase64String(file, format = ['jpg', 'jpeg', 'png', 'gif'], size = 20 * 1024 * 1024, formatMsg = '文件格式不正確', sizeMsg = '文件大小超出限制') { return new Promise((resolve, reject) => { // 格式過(guò)濾 let suffix = file.type.split('/')[1].toLowerCase(); let inFormat = false; for (let i = 0; i < format.length; i ) { if (suffix === format[i]) { inFormat = true; break; } } if (!inFormat) { reject(formatMsg); } // 大小過(guò)濾 if (file.size > size) { reject(sizeMsg); } // 轉(zhuǎn)base64字符串 let fileReader = new FileReader(); fileReader.readAsDataURL(file); fileReader.onload = () => { let res = fileReader.result; resolve({base64String: res, suffix: suffix}); reject('異常文件，請(qǐng)重新選擇'); } })}

B轉(zhuǎn)換到KB,MB,GB并保留兩位小數(shù)

/** * @param { number } fileSize */export function formatFileSize(fileSize) { let temp; if (fileSize < 1024) { return fileSize 'B'; } else if (fileSize < (1024 * 1024)) { temp = fileSize / 1024; temp = temp.toFixed(2); return temp 'KB'; } else if (fileSize < (1024 * 1024 * 1024)) { temp = fileSize / (1024 * 1024); temp = temp.toFixed(2); return temp 'MB'; } else { temp = fileSize / (1024 * 1024 * 1024); temp = temp.toFixed(2); return temp 'GB'; }}

base64轉(zhuǎn)file

/** * @param { base64 } base64 * @param { string } filename 轉(zhuǎn)換后的文件名 */export const base64ToFile = (base64, filename )=> { let arr = base64.split(','); let mime = arr[0].match(/:(.*?);/)[1]; let suffix = mime.split('/')[1] ;// 圖片后綴 let bstr = atob(arr[1]); let n = bstr.length; let u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], `${filename}.${suffix}`, { type: mime })};

base64轉(zhuǎn)blob

/** * @param { base64 } base64 */export const base64ToBlob = base64 => { let arr = base64.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime });};

blob轉(zhuǎn)file

/** * @param { blob } blob * @param { string } fileName */export const blobToFile = (blob, fileName) => { blob.lastModifiedDate = new Date(); blob.name = fileName; return blob;};

file轉(zhuǎn)base64

/** * @param { * } file 圖片文件 */export const fileToBase64 = file => { let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { return e.target.result };};

遞歸生成樹(shù)形結(jié)構(gòu)

export function getTreeData(data, pid, pidName = 'parentId', idName = 'id', childrenName = 'children', key) { let arr = []; for (let i = 0; i < data.length; i ) { if (data[i][pidName] == pid) { data[i].key = data[i][idName]; data[i][childrenName] = getTreeData(data, data[i][idName], pidName, idName, childrenName); arr.push(data[i]); } } return arr;}

遍歷樹(shù)節(jié)點(diǎn)

export function foreachTree(data, childrenName = 'children', callback) { for (let i = 0; i < data.length; i ) { callback(data[i]); if (data[i][childrenName] && data[i][childrenName].length > 0) { foreachTree(data[i][childrenName], childrenName, callback); } }}

追溯父節(jié)點(diǎn)

export function traceParentNode(pid, data, rootPid, pidName = 'parentId', idName = 'id', childrenName = 'children') { let arr = []; foreachTree(data, childrenName, (node) => { if (node[idName] == pid) { arr.push(node); if (node[pidName] != rootPid) { arr = arr.concat(traceParentNode(node[pidName], data, rootPid, pidName, idName)); } } }); return arr; }

尋找所有子節(jié)點(diǎn)

export function traceChildNode(id, data, pidName = 'parentId', idName = 'id', childrenName = 'children') { let arr = []; foreachTree(data, childrenName, (node) => { if (node[pidName] == id) { arr.push(node); arr = arr.concat(traceChildNode(node[idName], data, pidName, idName, childrenName)); } }); return arr;}

根據(jù)pid生成樹(shù)形結(jié)構(gòu)

/** * @param { object } items 后臺(tái)獲取的數(shù)據(jù) * @param { * } id 數(shù)據(jù)中的id * @param { * } link 生成樹(shù)形結(jié)構(gòu)的依據(jù) */export const createTree = (items, id = null, link = 'pid') =>{ items.filter(item => item[link] === id).map(item => ({ ...item, children: createTree(items, item.id) }));};

查詢數(shù)組中是否存在某個(gè)元素并返回元素第一次出現(xiàn)的下標(biāo)

/** * @param {*} item * @param { array } data */export function inArray(item, data) { for (let i = 0; i < data.length; i ) { if (item === data[i]) { return i; } } return -1;}

Windows根據(jù)詳細(xì)版本號(hào)判斷當(dāng)前系統(tǒng)名稱

/** * @param { string } osVersion */export function OutOsName(osVersion) { if(!osVersion){ return } let str = osVersion.substr(0, 3); if (str === "5.0") { return "Win 2000" } else if (str === "5.1") { return "Win XP" } else if (str === "5.2") { return "Win XP64" } else if (str === "6.0") { return "Win Vista" } else if (str === "6.1") { return "Win 7" } else if (str === "6.2") { return "Win 8" } else if (str === "6.3") { return "Win 8.1" } else if (str === "10.") { return "Win 10" } else { return "Win" }}

判斷手機(jī)是Andoird還是IOS

/** * 0: ios * 1: android * 2: 其它 */export function 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 0; } if (isAndroid) { return 1; } return 2;}

函數(shù)防抖

/** * @param { function } func * @param { number } wait 延遲執(zhí)行毫秒數(shù) * @param { boolean } immediate true 表立即執(zhí)行，false 表非立即執(zhí)行 */export function debounce(func,wait,immediate) { let timeout; return function () { let context = this; let args = arguments; if (timeout) clearTimeout(timeout); if (immediate) { let callNow = !timeout; timeout = setTimeout(() => { timeout = null; }, wait); if (callNow) func.apply(context, args) } else { timeout = setTimeout(() => { func.apply(context, args) }, wait); } }}

函數(shù)節(jié)流

/** * @param { function } func 函數(shù) * @param { number } wait 延遲執(zhí)行毫秒數(shù) * @param { number } type 1 表時(shí)間戳版，2 表定時(shí)器版 */export function throttle(func, wait ,type) { let previous, timeout; if(type===1){ previous = 0; }else if(type===2){ timeout = null; } return function() { let context = this; let args = arguments; if(type===1){ let now = Date.now(); if (now - previous > wait) { func.apply(context, args); previous = now; } }else if(type===2){ if (!timeout) { timeout = setTimeout(() => { timeout = null; func.apply(context, args) }, wait) } } }}

判斷數(shù)據(jù)類型

/** * @param {*} target */export function type(target) { let ret = typeof(target); let template = { "[object Array]": "array", "[object Object]":"object", "[object Number]":"number - object", "[object Boolean]":"boolean - object", "[object String]":'string-object' }; if(target === null) { return 'null'; }else if(ret == "object"){ let str = Object.prototype.toString.call(target); return template[str]; }else{ return ret; }}

生成指定范圍隨機(jī)數(shù)

/** * @param { number } min * @param { number } max */export const RandomNum = (min, max) => Math.floor(Math.random() * (max - min 1)) min;

數(shù)組亂序

/** * @param {array} arr */export function arrScrambling(arr) { let array = arr; let index = array.length; while (index) { index -= 1; let randomIndex = Math.floor(Math.random() * index); let middleware = array[index]; array[index] = array[randomIndex]; array[randomIndex] = middleware } return array}

數(shù)組交集

/** * @param { array} arr1 * @param { array } arr2 */export const similarity = (arr1, arr2) => arr1.filter(v => arr2.includes(v));

數(shù)組中某元素出現(xiàn)的次數(shù)

/** * @param { array } arr * @param {*} value */export function countOccurrences(arr, value) { return arr.reduce((a, v) => v === value ? a 1 : a 0, 0);}

加法函數(shù)（精度丟失問(wèn)題）

/** * @param { number } arg1 * @param { number } arg2 */export function add(arg1, arg2) { let r1, r2, m; try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 } try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 } m = Math.pow(10, Math.max(r1, r2)); return (arg1 * m arg2 * m) / m}

減法函數(shù)（精度丟失問(wèn)題）

/** * @param { number } arg1 * @param { number } arg2 */export function sub(arg1, arg2) { let r1, r2, m, n; try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 } try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 } m = Math.pow(10, Math.max(r1, r2)); n = (r1 >= r2) ? r1 : r2; return Number(((arg1 * m - arg2 * m) / m).toFixed(n));}

除法函數(shù)（精度丟失問(wèn)題）

/** * @param { number } num1 * @param { number } num2 */export function division(num1,num2){ let t1,t2,r1,r2; try{ t1 = num1.toString().split('.')[1].length; }catch(e){ t1 = 0; } try{ t2=num2.toString().split(".")[1].length; }catch(e){ t2=0; } r1=Number(num1.toString().replace(".","")); r2=Number(num2.toString().replace(".","")); return (r1/r2)*Math.pow(10,t2-t1);}

乘法函數(shù)（精度丟失問(wèn)題）

/** * @param { number } num1 * @param { number } num2 */export function mcl(num1,num2){ let m=0,s1=num1.toString(),s2=num2.toString(); try{m =s1.split(".")[1].length}catch(e){} try{m =s2.split(".")[1].length}catch(e){} return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m);}

遞歸優(yōu)化（尾遞歸）

/** * @param { function } f */export function tco(f) { let value; let active = false; let accumulated = []; return function accumulator() { accumulated.push(arguments); if (!active) { active = true; while (accumulated.length) { value = f.apply(this, accumulated.shift()); } active = false; return value; } };}

生成隨機(jī)整數(shù)

export function randomNumInteger(min, max) { switch (arguments.length) { case 1: return parseInt(Math.random() * min 1, 10); case 2: return parseInt(Math.random() * (max - min 1) min, 10); default: return 0 }}

去除空格

/** * @param { string } str 待處理字符串 * @param { number } type 去除空格類型 1-所有空格 2-前后空格 3-前空格 4-后空格 默認(rèn)為1 */export function trim(str, type = 1) { if (type && type !== 1 && type !== 2 && type !== 3 && type !== 4) return; switch (type) { case 1: return str.replace(/s/g, ""); case 2: return str.replace(/(^s)|(s*$)/g, ""); case 3: return str.replace(/(^s)/g, ""); case 4: return str.replace(/(s$)/g, ""); default: return str; }}

大小寫轉(zhuǎn)換

/** * @param { string } str 待轉(zhuǎn)換的字符串 * @param { number } type 1-全大寫 2-全小寫 3-首字母大寫 其他-不轉(zhuǎn)換 */export function 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(); default: return str; }}

隨機(jī)16進(jìn)制顏色 hexColor

/** * 方法一 */export function hexColor() { let str = '#'; let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F']; for (let i = 0; i < 6; i ) { let index = Number.parseInt((Math.random() * 16).toString()); str = arr[index] } return str;}

隨機(jī)16進(jìn)制顏色 randomHexColorCode

/** * 方法二 */export const randomHexColorCode = () => { let n = (Math.random() * 0xfffff * 1000000).toString(16); return '#' n.slice(0, 6);};

轉(zhuǎn)義html(防XSS攻擊)

export const escapeHTML = str =>{ str.replace( /[&<>'"]/g, tag => ({ '&': '&', '<': '<', '>': '>', "'": ''', '"': '"' }[tag] || tag) );};

檢測(cè)移動(dòng)/PC設(shè)備

export const detectDeviceType = () => { return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop'; };

隱藏所有指定標(biāo)簽

/** * 例: hide(document.querySelectorAll('img')) */export const hideTag = (...el) => [...el].forEach(e => (e.style.display = 'none'));

返回指定元素的生效樣式

/** * @param { element} el 元素節(jié)點(diǎn) * @param { string } ruleName 指定元素的名稱 */export const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];

檢查是否包含子元素

/** * @param { element } parent * @param { element } child * 例：elementContains(document.querySelector('head'), document.querySelector('title')); // true */export const elementContains = (parent, child) => parent !== child && parent.contains(child);

數(shù)字超過(guò)規(guī)定大小加上加號(hào)“ ”，如數(shù)字超過(guò)99顯示99

/** * @param { number } val 輸入的數(shù)字 * @param { number } maxNum 數(shù)字規(guī)定界限 */export const outOfNum = (val, maxNum) =>{ val = val ? val-0 :0; if (val > maxNum ) { return `${maxNum} ` }else{ return val; }};

未完待續(xù)…

最后

上面的工具函數(shù)，一部分來(lái)自于自己平時(shí)的總結(jié)，一部分來(lái)自于上面的參考文章,，感謝大神們的總結(jié)。如果對(duì)你有幫助，為了方便查閱，不妨在GitHub上點(diǎn)個(gè)star~

這個(gè)倉(cāng)庫(kù)會(huì)持續(xù)更新，如果你有更好的點(diǎn)子，或者沒(méi)有找到你想要的工具函數(shù)，歡迎issues~

文中若有不準(zhǔn)確或錯(cuò)誤的地方，歡迎指出，更歡迎issues~

原作者姓名： xmanlin
原出處：segmentfault