100个提高日常开发效率的JS方法

238 阅读6分钟

日常开发中,不同的项目经常会重复用到相同的方法,所以干脆把日常开发中常用或者有用到过一些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基础入门

👉 15 个JavaScript数组实用技巧

👉 JavaScript数组方法看这一篇就够了

👉 JS内置日期对象Date的使用指南