// 校验数据类型
export const typeofData = function(obj) {
return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
}
// typeofData('树哥') // string
// typeofData([]) // array
// typeofData(new Date()) // date
// typeofData(null) // null
// typeofData(true) // boolean
// typeofData(() => { }) // function
// 防抖
export const debounce = (() => {
let timer = null
return (callback, wait = 800) => {
timer && clearTimeout(timer)
timer = setTimeout(callback, wait)
}
})
// 如 vue 中使用
// methods: {
// loadList() {
// debounce(() => {
// console.log('加载数据')
// }, 500)
// }
// }
// 节流
export const throttle = (() => {
let last = 0
return (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('13211111111') // '132****1111'
// 解析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
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
}
// getOSType()
// 数组对象根据字段名去重
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: '张麻子' }]
// 滚动到页面顶部
export const scrollTop = () => {
const height = document.documentElement.scrollTop || document.body.scrollTop
if (height > 0) {
window.requestAnimationFrame(scrollTop)
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) //释放这个url
return uuid.substring(uuid.lastIndexOf('/') + 1)
}
// uuid() // a640be34-689f-4b98-be77-e3972f9bffdd
// uuid一般应由后端来进行生成
// 存储操作
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 (e) {
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()
// 下载文件
// 参数: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 ? '' : decodeURI(str.substring(str.lastIndexOf('=') + 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}, '文件名')
// 时间操作:day.js
// Day.js 是一个仅 2kb 大小的轻量级 JavaScript 时间日期处理库,下载、解析和执行的JavaScript更少,为代码留下更多的时间。
// 模糊搜索
// 参数: 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(treeData, (item) => {
// if (item.id === 9) {
// result = item
// }
// })
// console.log('result', result) // {id: 9,label: "三级 1-1-1"}
js 常用工具函数 校验数据类型/防抖/节流/手机号脱敏/解析url参数/判断手机平台/数组去重/滚动到页面顶部/滚动到元素位置/存储/下载文件/模糊搜索/
于 2022-10-21 16:42:36 首次发布