目錄

• 前言
• 按屬性對object分類
• 嚴格的身份證校驗
• 校驗數據類型
• 防抖
• 節流
• 手機號脫敏
• 開啟全屏
• 關閉全屏
• 大小寫轉換
• 解析URL參數
• 判斷手機是Andoird還是IOS
• 數組對象根據字段去重
• 滾動到頁面頂部
• 滾動到元素位置
• uuid
• 金額格式化
• 下載文件
• 模糊搜索
• 遍歷樹節點
• 將 RGB 轉換為十六進制
• 計算距離下次生日還有多少天
• 檢測暗模式
• 數字轉化為大寫金額
• 數字轉化為中文數字
• 校驗是否為中國大陸的郵政編碼
• 校驗是否為IPv6地址
• 數組拆分塊
• 交換數組項
• 檢查當前選項卡是否在后臺
• 等待函數
• 樹形數據結構轉換
• 獲取滾動的坐標

前言

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

按屬性對object分類

var people = [{ name: 'Alice', age: 21 },{ name: 'Max', age: 20 },{ name: 'Jane', age: 20 } ]; function groupBy(objectArray, property) {return objectArray.reduce(function (acc, obj) {var key = obj[property];if (!acc[key]) {acc[key] = [];}acc[key].push(obj);return acc;}, {}); } var groupedPeople = groupBy(people, 'age'); // { // 20: [ // { name: 'Max', age: 20 }, // { name: 'Jane', age: 20 } // ], // 21: [{ name: 'Alice', age: 21 }] // }

嚴格的身份證校驗

export const isCardID = (sId) => {if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(sId)) {console.log('你輸入的身份證長度或格式錯誤')return false}//身份證城市var aCity = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "內蒙古", 21: "遼寧", 22: "吉林", 23: "黑龍江", 31: "上海", 32: "江蘇", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山東", 41: "河南", 42: "湖北", 43: "湖南", 44: "廣東", 45: "廣西", 46: "海南", 50: "重慶", 51: "四川", 52: "貴州", 53: "云南", 54: "西藏", 61: "陜西", 62: "甘肅", 63: "青海", 64: "寧夏", 65: "新疆", 71: "臺灣", 81: "香港", 82: "澳門", 91: "國外" };if (!aCity[parseInt(sId.substr(0, 2))]) {console.log('你的身份證地區非法')return false}// 出生日期驗證var sBirthday = (sId.substr(6, 4) + "-" + Number(sId.substr(10, 2)) + "-" + Number(sId.substr(12, 2))).replace(/-/g, "/"),d = new Date(sBirthday)if (sBirthday != (d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate())) {console.log('身份證上的出生日期非法')return false}// 身份證號碼校驗var sum = 0,weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],codes = "10X98765432"for (var i = 0; i < sId.length - 1; i++) {sum += sId[i] * weights[i];}var last = codes[sum % 11]; //計算出來的最后一位身份證號碼if (sId[sId.length - 1] != last) {console.log('你輸入的身份證號非法')return false}return true }

校驗數據類型

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

防抖

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

節流

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

手機號脫敏

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

示例：

hideMobile('13233774627') // '132****4627'

開啟全屏

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

大小寫轉換

參數：

• 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

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

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

數組對象根據字段去重

參數：

• 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: '張麻子' }]

滾動到頁面頂部

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 的元素

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

金額格式化

參數：

• {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

下載文件

參數：

• 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}, '文件名')

模糊搜索

參數：

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

示例：

假設我們要從樹狀結構數據中查找 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"}

將 RGB 轉換為十六進制

function getColorFun(r,g,b) {return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1) }getColorFun(178,232,55) // 這里輸出的是 #b2e837

計算距離下次生日還有多少天

注意這里借助 moment 實現

getBirthdayFun(){// 首先要獲取到今年的生日let birthdayTime = moment().format('YYYY-') + '12-19'// 通過時間戳 去判斷當前的時間戳是否大于今年生日的時間戳 if (moment().unix() >= moment(birthdayTime).unix()) {// 如果大于的話，那么就在今年的生日上再添加一年，已達到獲取下次生日的時間birthdayTime = moment(birthdayTime).add(1, 'y').format('YYYY-MM-DD')}// 這個直接通過計算 （下次生日的時間戳 - 當前日期的時間戳) / (60 * 60 * 24) 最后求出來的就是 XX 天return parseInt((moment(birthdayTime).unix() - moment().unix()) / (60 * 60 * 24)) }

檢測暗模式

這是一種非常方便的方法來檢查用戶是否在其瀏覽器上啟用了黑暗模式

const isDarkMode = () => window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;

數字轉化為大寫金額

export const digitUppercase = (n) => {const fraction = ['角', '分'];const digit = ['零', '壹', '貳', '叁', '肆','伍', '陸', '柒', '捌', '玖'];const unit = [['元', '萬', '億'],['', '拾', '佰', '仟']];n = Math.abs(n);let s = '';for (let i = 0; i < fraction.length; i++) {s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');}s = s || '整';n = Math.floor(n);for (let i = 0; i < unit[0].length && n > 0; i++) {let p = '';for (let j = 0; j < unit[1].length && n > 0; j++) {p = digit[n % 10] + unit[1][j] + p;n = Math.floor(n / 10);}s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;}return s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整'); };

示例

digitUppercase(123) // '壹佰貳拾叁元整' digitUppercase(123456789) // '壹億貳仟叁佰肆拾伍萬陸仟柒佰捌拾玖元整'

數字轉化為中文數字

export const intToChinese = (value) => {const str = String(value);const len = str.length-1;const idxs = ['','十','百','千','萬','十','百','千','億','十','百','千','萬','十','百','千','億'];const num = ['零','一','二','三','四','五','六','七','八','九'];return str.replace(/([1-9]|0+)/g, ( $, $1, idx, full) => {let pos = 0;if($1[0] !== '0'){pos = len-idx;if(idx == 0 && $1[0] == 1 && idxs[len-idx] == '十'){return idxs[len-idx];}return num[$1[0]] + idxs[len-idx];} else {let left = len - idx;let right = len - idx + $1.length;if(Math.floor(right / 4) - Math.floor(left / 4) > 0){pos = left - left % 4;}if( pos ){return idxs[pos] + num[$1[0]];} else if( idx + $1.length >= len ){return '';}else {return num[$1[0]]}}}); }

示例

intToChinese(123) // '一百二十三' intToChinese(123456789) // '一億二千三百四十五萬六千七百八十九'

校驗是否為中國大陸的郵政編碼

const isPostCode = (value) => {return /^[1-9][0-9]{5}$/.test(value.toString()); }

校驗是否為IPv6地址

const isIPv6 = (str) => {return Boolean(str.match(/:/g)?str.match(/:/g).length<=7:false && /::/.test(str)?/^([\da-f]{1,4}(:|::)){1,6}[\da-f]{1,4}$/i.test(str):/^([\da-f]{1,4}:){7}[\da-f]{1,4}$/i.test(str)); }

數組拆分塊

const chunk = (arr, size) => arr.reduce((acc, e, i) => (i % size ? acc[acc.length - 1].push(e) : acc.push([e]), acc), [])//demo chunk([1, 2, 3, 4, 5, 6, 7, 8], 3) // [[1, 2, 3], [4, 5, 6], [7, 8]] chunk([1, 2, 3, 4, 5, 6, 7, 8], 4) // [[1, 2, 3, 4], [5, 6, 7, 8]]

交換數組項

// i < j const swapItems = (a, i, j) => (a[i] && a[j] && [...a.slice(0, i), a[j], ...a.slice(i + 1, j), a[i], ...a.slice(j + 1)]) || a//demo swapItems([1, 2, 3, 4, 5], 1, 4) // [1, 5, 3, 4, 2]

檢查當前選項卡是否在后臺

const isTabActive = () => !document.hidden; isTabActive() // true|false

等待函數

JavaScript 提供了 setTimeout 函數，但是它并不返回 Promise 對象，所以我們沒辦法使用 async 作用在這個函數上，但是我們可以封裝等待函數。

const wait = (ms) => new Promise((resolve)=> setTimeout(resolve, ms))const asyncFn = async () => {await wait(1000)console.log('等待異步函數執行結束') }asyncFn()

樹形數據結構轉換

// 函數版 function tranListToTreeData(list) {// 1. 定義兩個變量const treeList = []; const map = {}// 2. 建立一個映射關系，并給每個元素補充children屬性.// 映射關系: 目的是讓我們能通過id快速找到對應的元素// 補充children：讓后邊的計算更方便list.forEach(item => {if (!item.children) {item.children = []}map[item.id] = item})// 3.循環list.forEach(item => {// 對于每一個元素來說，先找它的上級// 如果能找到，說明它有上級，則要把它添加到上級的children中去// 如果找不到，說明它沒有上級，直接添加到 treeListconst parent = map[item.pid]// 如果存在上級則表示item不是最頂層的數據if (parent) {parent.children.push(item)} else {// 如果不存在上級 則是頂層數據,直接添加treeList.push(item)}})// 返回return treeList }

示例

const arr = [{ id: "a", pid: "", name: "總裁辦" },{ id: "b", pid: "", name: "行政部" },{ id: "c", pid: "", name: "財務部" },{ id: "d", pid: "c", name: "財務核算部" },{ id: "e", pid: "c", name: "稅務管理部" },{ id: "f", pid: "e", name: "稅務管理部-分部" }, ];console.log(tranListToTreeData(arr)); /* [{"id": "a","pid": "","name": "總裁辦","children": []},{"id": "b","pid": "","name": "行政部","children": []},{"id": "c","pid": "","name": "財務部","children": [{"id": "d","pid": "c","name": "財務核算部","children": []},{"id": "e","pid": "c","name": "稅務管理部","children": [{"id": "f","pid": "e","name": "稅務管理部-分部","children": []}]}]} ] */

獲取滾動的坐標

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

總結

以上是生活随笔為你收集整理的收集的JS工具函数的全部內容，希望文章能夠幫你解決所遇到的問題。

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