20个Javascript工具函数助力高效开发

日常开发中，个Jt工面对各种不同的具函需求，我们经常会用到以前开发过的数助一些工具函数，把这些工具函数收集起来，力高将大大提高我们的效开开发效率。

1. 校验数据类型export const typeOf = function(obj) {

return Object.prototype.toString.call(obj).slice(8,个Jt工 -1).toLowerCase()

}

示例：

typeOf(树哥) // string

typeOf([]) // array

typeOf(new Date()) // date

typeOf(null) // null

typeOf(true) // boolean

typeOf(() => { }) // function2. 防抖export const debounce = (() => {

let timer = null

return (callback, wait = 800) => {

timer&&clearTimeout(timer)

timer = setTimeout(callback, wait)

}

})()

示例：如 vue 中使用

methods: {

loadList() {

debounce(() => {

console.log(加载数据)

}, 500)

}

}3. 节流export const throttle = (() => {

let last = 0

return (callback, wait = 800) => {

let now = +new Date()

if (now - last > wait) {

callback()

last = now

}

}

})()4. 手机号脱敏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. 关闭全屏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. 大小写转换

参数：

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) // Vue8. 解析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) 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: 张麻子 }]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. uuidexport 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

不过要吐槽一句的网站模板是，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 : +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.00015. 存储操作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 = 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}, 文件名)17. 时间操作

关于时间操作，没必要自己再写一大串代码了，数助强烈推荐使用 day.js。力高

Day.js 是效开一个仅 2kb 大小的轻量级 JavaScript 时间日期处理库，下载、个Jt工解析和执行的具函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"}