js 常用工具函数 校验数据类型/防抖/节流/手机号脱敏/解析url参数/判断手机平台/数组去重/滚动到页面顶部/滚动到元素位置/存储/下载文件/模糊搜索/

js 常用工具函数 校验数据类型/防抖/节流/手机号脱敏/解析url参数/判断手机平台/数组去重/滚动到页面顶部/滚动到元素位置/存储/下载文件/模糊搜索/

// 校验数据类型
export const typeofData = function(obj) {return String.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 = nullreturn (callback, wait = 800) => {timer && clearTimeout(timer)timer = setTimeout(callback, wait)}
})
// 如 vue 中使用
// methods: {
//   loadList() {
//     debounce(() => {
//       console.log('加载数据')
//     }, 500)
//   }
// }// 节流
export const throttle = (() => {let last = 0return (callback, wait = 800) => {let now = +new Date()if (now - last > wait) {callback()last = now}}
})// 手机号脱敏
export const hideMobile = (mobile) => {place(/^(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] ies()) {paramsObj[key] = value}return paramsObj
}
// ****com/index?id=154513&age=18;
// getSearchParams(); // {id: "154513", age: "18"}// 判断手机是Andoird还是IOS
export const getOSType = () => {let u = navigator.userAgent,app = navigator.appVersionlet isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1let 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) 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 scrollTop = () => {const height = document.documentElement.scrollTop || document.body.scrollTopif (height > 0) {questAnimationFrame(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 = ateObjectURL(new Blob())const uuid = String()vokeObjectURL(temp_url) //释放这个urlreturn 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(Item(key))} catch (e) {return Item(key)}}removeItem(key) {veItem(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
}
// Item('user')
// sessionCache.setItem('name','树哥')
// Item('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 = ateObjectURL(res.data)let link = ateElement('a')link.style.display = 'none'link.href = urllink.setAttribute('download', fileName + suffix)document.body.appendChild(link)link.click()veChild(link)vokeObjectURL(link.href)}}).catch((err) => {console.ssage);})
}
// 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 (st(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"}