（防抖节流深拷贝数组对象去重前端uuid生成，文件下载等函数封装）

1、校验数据类型

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

示例

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

2、防抖

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

示例：

methods: {requerstList() {debounce(() => {console.log('请求数据')}, 500)}
}

3、节流

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

4、手机号脱敏

// 中间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) // Vue

8、解析地址URL参数

export const getSearchParams = () => {const searchParams = new URLSearchParams(window.location.search)const paramsObj = {}for (const [key, value] of searchParams.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: 'vue' },{ id: 2, name: 'react' },{ id: 3, name: 'angular' },{ id: 1, name: 'vue' },{ id: 2, name: 'react' },{ id: 3, name: 'angular' },{ id: 1, name: 'vue' },{ id: 2, name: 'react' },{ id: 3, name: 'angular' },
]uniqueArrayObject(responseList, 'id')
// [{ id: 1, name: 'vue' },{ id: 2, name: 'react' },{ id: 3, name: 'angular' }]

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、滚动到元素位置

// behavior  [可选]定义过渡动画。"auto","instant"或"smooth"。默认为"auto"。
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() // 5795c038-f7d1-428f-bdc7-ba532f768c3c

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()
sessionCache.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 的节点
// 数据来源elementUi
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"}

vue一些常用的工具函数封装相关推荐

关于Vue中常用的工具函数封装
## Vue 项目中工具函数,我们通常会添加到Vue的原型中,这样就实现了全局函数 import Vue from 'vue' Vue.prototype.$tools = function (){} ...
前端常用Utils工具函数库合集
前端常用Utils工具函数库合集在开发中,我们经常会将一些常用的代码块.功能块进行封装,为的是更好的复用.那么,被抽离出来独立完成功能,通过API或配置项和其他部分交互,便形成了插件. 函数库 Lo ...
matplotlib.pyplot常用画图方式函数封装（一）——.plot绘制折线图及设置坐标轴箭头完美解决
matplotlib.pyplot常用画图方式函数封装(一)--.plot绘制折线图及设置坐标轴箭头完美解决 py.plot常见绘图设置函数封装绘制函数图像(完美解决坐标轴添加箭头) 绘制折线图 p ...
JavaScript常用的工具函数，不全面大家补充哦
JavaScript常用的工具函数,不全面大家补充哦目录博主介绍
一些常用的工具函数（snows-utils）,已发npm,会陆续更新
简介:一些常用的自定义方法 **注意:请用最新版本(之前的有些版本有小问题,目前没有找到删除指定的版本的方法) v2.0.0之前的版本都是没有通过webpack打包的,文件相对于2.0. ...
gookit/goutil - Go一些常用的工具函数实现、增强、收集和整理
gookit/goutil Go 常用的一些工具函数,数字,字符串,数组,Map,文件,错误,时间日期,特殊处理,格式化,常用信息获取等等工具包 arrutil array/slice 相关操作的函 ...
Vue开发常用的工具有哪些？
相比其他大型框架,Vue更加灵活,开发者既可以选择使用Vue来开发一个全新项目,也可以将Vue引入到一个现有的项目中.代码简洁.上手容易,深受开发者青睐.本节我们将对Vue的开发环境以及常用工具的使用 ...
33个前端常用的JavaScript函数封装方法
星标公众号前端开发博客,回复"交流" 加入我们一起学习,天天进步这是我在实际开发中常用的一些js函数方法,总结一下,以后可以,有需要的小伙伴可以参考下百度就完事了,不不不!我亲 ...
python常用的工具函数
1.zip:接受任意多个(包括0个和1个)序列作为参数,返回一个tuple列表. 如: a = [1,2] b = [3,4] c = dict(zip(a, b)) print c 结果: {1: ...

vue一些常用的工具函数封装

1、校验数据类型

2、防抖

3、节流

4、手机号脱敏

5、开启全屏

6、关闭全屏

7、大小写转换

8、解析地址URL参数

9、判断手机是Andoird还是IOS

10、数组对象根据字段去重

11、滚动到页面顶部

12、滚动到元素位置

13、uuid

14、金额格式化

15、存储操作

16、下载文件

17、时间操作

18、深拷贝

19、模糊搜索(本地对象根据字段搜索)

20、遍历树节点

vue一些常用的工具函数封装相关推荐

最新文章

热门文章