日常开发中，面对各种不同的需求，我们经常会用到以前开发过的一些工具函数，把这些工具函数收集起来，将大大提高我们的开发效率。
1、校验数据类型
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'
typeOf(undefined) // 'undefined'
typeOf({
name:'明哥'}) // 'object'
2、防抖
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 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"}
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 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、生成随机的uuid
export 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
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.000
15、下载文件
// 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}, '文件名')
16、模糊搜索
// 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: '树哥'}]
17、随机生成一个十六进制颜色
首先声明一个产生随机数的函数
function getRandom(N, M) {
return Math.floor(Math.random() * (M - N + 1) + N)
}
十六进制颜色的表示是：#xxxxxx
十六进制的值有：A,B,C,D,E,F,0,1,2,3,4,5,6,7,8,9
所以需要先定义一个数组用来保存这十五位字符串
let arr = ['0','1','2','3','4','5','6','7','8','8','A','B','C','D','E','F']
声明一个表示十六进制颜色的函数，并且需要调用6次产生随机数的函数，
因为调用getRandom函数的时候，范围在数组arr里面，索引从0开始，所以范围是（0，arr.lenght-1)
function getColor(){
let arr = ['0','1','2','3','4','5','6','7','8','8','A','B','C','D','E','F']
let color1 = getRandom(0,arr.length-1)
let color2 = getRandom(0,arr.length-1)
let color3 = getRandom(0,arr.length-1)
let color4 = getRandom(0,arr.length-1)
let color5 = getRandom(0,arr.length-1)
let color6 = getRandom(0,arr.length-1)
return `#${
color1}${
color2}${
color3}${
color4}${
color5}${
color6}`
}
但是这种方法只适合调用少数量的，如果需要多个数字，一直调用的话会很繁琐，所以代码可以更新。
思路：
①使用字符串拼接的方法，随机调用字符串六次，并且将随机得到的字符串和#拼接在一起
②使用for循环6次，因为十六进制后#后面有6位
③定义一个颜色 str = ‘ # ’
④将每次产生的随机数赋值给颜色str
⑤返回颜色值
function getColor(){
let arr = ['0','1','2','3','4','5','6','7','8','8','A','B','C','D','E','F']
let str = '#'
for(i=0;i<6;i++){
let temp = arr[getRandom(0,arr.length-1)]
str = str +temp
}
return str
}
在Vue项目中的实际使用：首先在src下的libs下的utils.js里定义两个方法noRepeatColor16和getRandom，并将noRepeatColor16暴露出来。然后在Vue组件里引入并使用：
// utils.js
//生成不重复的十六进制颜色
function noRepeatColor16() {
let arr = [
'0',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'8',
'A',
'B',
'C',
'D',
'E',
'F',
]
let str = '#'
for (var i = 0; i < 6; i++) {
let temp = arr[getRandom(0, arr.length - 1)]
str = str + temp
}
return str
}
function getRandom(N, M) {
return Math.floor(Math.random() * (M - N + 1) + N)
}
export {
noRepeatColor16 }
// people.vue
<script>
import {
noRepeatColor16 } from "@/libs/utils.js";
export default {
data() {
return {
myPeopleList: []
};
},
methods:{
if (this.peopleList.length > 0) {
let newArr = this.peopleList.map((k, index) => {
return {
...k,
// pic: picArr[index],
// bgColor: bgColorArr[index],
bgColor: noRepeatColor16(),
num: k.valuetag,
date: k.keytag
};
});
this.myPeopleList = newArr;
} else {
this.myPeopleList = [];
}
}
}
</script>