日常开发中,不同的项目经常会重复用到相同的方法,所以干脆把日常开发中常用或者有用到过一些js方法好好整理了一份,以后只要无脑复制就完事了。
由于加上源码会有很多,所以这边主要做一个目录索引和效果展示的地方,源码都放在git上,根据下面地址按需取用即可。
方法类
根据pid生成树形结构
根据时间生成树形结构
// 输入
let data = [
{
created_at: '"2022-01-24 18:25:43',
title: 'title'
}
]
// 输出
let newData = [
{
time: '2022',
lists: [
{
created_at: '"2022-01-24 18:25:43',
title: 'title'
}
]
}
]
寻找所有子节点
修改数组里对象的key
别名:修改数组里对象的键名
//输入
data:[{"label":"标签","value":"值"}]
// 输出
newData: [{"name":"标签","code":"值"}]
加减乘除解决精度丢失问题
根据对象里的属性 重构为数组
//输入
let chartData = [{"day":"2022-11-17","num":0},{"day":"2022-11-18","num":0},{"day":"2022-11-19","num":0}]
//执行
objToArr(chartData, 'day') //['2022-11-17', '2022-11-18', '2022-11-19']
根据对象的某个属性,找到数组里的对象
//输入
let objArr = [{"id":1,"name":"a"},{"id":2,"name":"b"}]
// 执行
getListObj(objArr,1,'id') //{id: 1, name: 'a'}
树结构 根据id获取name
//输入
let objArr = [{"child":[{"child":[{"id":80,"name":"三级分类"}],"id":12,"name":"二级分类"}],"id":13,"name":"一级分类"},{"child":[{"child":[{"child":[{"id":72,"name":"奶茶分类"}],"id":24,"name":"咖啡分类"},{"id":2,"name":"甜品分类"}],"id":20,"name":"吃货分类"}],"id":4,"name":"甜点饮品"}]
//执行
getTreeName(objArr,72,'id','name') //奶茶分类
字符串转对象
//输入
let Str = '规格A;规格B;规格C'
//执行
stringToOptionObject(Str,'label','value')
//[{"label":"规格A","value":"规格A"},{"label":"规格B","value":"规格B"},{"label":"规格C","value":"规格C"}]
数组对象值转对象
//输入
let arr = [{"id":0,"status":"a"},{"id":155,"status":"b"},{"id":283,"status":"c"},{"id":88,"status":"d"}]
//执行
arrOptionToObject(arr,'status','id')//{"a":0,"b":155,"c":283,"d":88}
二维数组全排列组合转一维数组
//输入
let arr2D = [["规格:大号-U"],["颜色:红色","颜色:黄色"]]
//执行
doCombination(arr2D)//["规格:大号-U,颜色:红色","规格:大号-U,颜色:黄色"]
数组|对象深拷贝
数组对象去重
替换指定位置的字符串
//输入
let str = '1300011'
//执行
changeStr(str,str.length-2,'00') //1300000 把字符串后两位替换掉
数量排序
函数节流
demoFun:throttle(function (e) {
//...业务逻辑
}, 1000)
函数防抖
gotoUnlock: debounce(function() {
//...业务逻辑
}),
对象字符串的值转字符串
ObjStringDeal('{"颜色":"红色","规格":"大号-U"}') //红色,大号-U
去掉字符串最后的逗号
strRemoveDot('abcd,') //abcd
检验类
判断对象指定属性是否存在
//输入
let obj = {"id":1,"name":"1"};
//执行
hasProperty(obj,'id') //true
hasProperty(obj,'ids') //false
比较两个数据类型是否相同
sameType(6,'aaa') //false
sameType(6,8) //true
是否为空
是否是字符串
是否是数组
是否是对象
是否是时间类型
是否是数字
是否是布尔值
是否是方法
邮箱校验
手机号校验
校验字符串是否是url
检验输入框大于等于0
工具类
PC端判断
if (isPc) alert('这是PC端');
数字格式化(给数字加逗号)
formatDecimal(12000000.11) //12,000,000.11
formatDecimal(12000000.11,false) //12,000,000
downFile文件下载
生成随机数
randomString(5) // ZsAl6
复制文本
copyToClip('复制文本')
loadScript
别名:加载脚本、加载js、加载css、加载资源
loadScript('js', 'xxx.js').then(() => {
//执行后的方法
})
loadScript('css', 'xxx.css').then(() => {
//执行后的方法
})
历史记录
获取地址栏参数
base64转换为文件
图片转换为base64
uuid生成唯一值
生成一个hash字符串
生成随机字符串
console.log(createUniqueString()) // njb9967469s0
大小写转换或首字母
changeBigSmallCase('Hello', 5); // hello
将阿拉伯数字翻译成中文的大写数字
numberToChinese('10') // 十
将数字转换为大写金额
console.log(changeToChinese('1000')) // 壹仟元整
富文本代码块右上角显示复制按钮
onMounted(() => {
codeCopy() // 代码块复制
})
图片懒加载
import lazyLoad from "@/plugins/lazy-load-img"
onMounted(() => {
lazyLoad() // 图片懒加载
window.addEventListener('scroll',handleScroll,false)
})
onUnmounted(() => {
window.removeEventListener('scroll',handleScroll,false)
})
function handleScroll() {
lazyLoad()
}
计算字符串长度(中英文)
判断链接是否为本地
获取当前url上的参数
处理二进制流文件
时间类
获取当前周几
getDayText() //五
时间问候语
Date时间转数字
parseTime(new Date(), '{y}{m}{d}') // 20211221
Date时间转汉字
formatTime(new Date()) // 刚刚
获取某月有多少天
console.log(getMonthOfDay('2021-2')) // 28
console.log(getMonthOfDay()) // 当前为2021-12月,即得到的是30
获取某年的第一天
console.log(getFirstDayOfYear('2021')) // 2021-01-01 00:00:00
获取某年最后一天
console.log(getLastDayOfYear('2021')) // 2021-12-31 23:59:59
获取某个日期是当年中的第几天
console.log(getDayOfYear('2021-12-13')) // 347
获取某个日期在这一年的第几周
console.log(getDayOfYearWeek('2021-12-31')) // 53
把秒转化为天小时分钟秒
sToHs(60) // 1分钟0秒
🎨 整理哭了!!!你如果有什么好用的方法,欢迎交流分享啊。
往期推荐
👉 Vite基础入门