实用篇：JS工具函数，提高生产力的利器，助力高效开发（一）
原文地址：实用篇：JS工具函数，提高生产力的利器，助力高效开发（一）
在这篇文章中，我们将探讨JavaScript中的工具函数。这些函数是用来解决日常开发中常见问题的实用代码。它们可以极大地提高开发效率和代码质量。
在JavaScript开发过程中，我们经常遇到一些通用的任务，比如处理数组、对象、日期、字符串等。如果每次遇到这些问题，我们都从头开始编写代码，那么开发效率会大大降低。工具函数就是用来解决这些常见问题的。它们提供了一种重用代码的方式，让我们能够更快地完成任务，同时保持代码的清晰和可维护。当然，我们我们也可以使用第三方库，比如lodash是一个非常流行的JavaScript工具库，它提供了许多实用的工具函数。
01数字千分位分割
1、使用正则表达式和replace函数
const numFormat = (num) => {
const str = num.toString();
const res = str.replace(/\d+/, function(n) {
// 先提取整数部分
return n.replace(/(\d)(?=(\d{3})+$)/g, function($1) {
return $1 + ",";
});
})
return res;
}
console.log(numFormat(1649966)) // 1,649,966
console.log(numFormat(673439.6328)); // 673,439.6328
console.log(numFormat(12345.36)) // 12,345.36
2、除法+求模
const numFormat = (num) => {
let n = num;
let r = '';
let temp = '';
do {
// 求模的值， 用于获取高三位，这里可能有小数
mod = n % 1000;
// 值是不是大于1，是继续的条件
n = n / 1000;
// 高三位
temp = ~~mod;
// 1.填充: n > 1 循环未结束， 就要填充为比如 1 => 001
// 不然temp = ~~mod的时候, 1 001， 就会变成 "11"
// 2.拼接“,”
r = (n >= 1 ? `${temp}`.padStart(3, '0') : temp) + (!!r ? ',' + r : '');
} while (n >= 1);
const strNumber = num + '';
let index = strNumber.indexOf('.');
// 拼接小数部分
if (index >= 0) {
r += strNumber.substring(index);
}
return r;
}
console.log(numFormat(1649966)) // 1,649,966
console.log(numFormat(673439.6328)); // 673,439.6328
console.log(numFormat(12345.36)) // 12,345.36
3、数组分割法
const numFormat = (num) => {
// 转为字符串，并按照.拆分
const arr = (num + '').split('.');
// 整数部分再拆分
const int = arr[0].split('');
// 小数部分
const fraction = arr[1] || '';
// 返回的变量
let r = '';
int.reverse().forEach(function (v, i) {
// 非第一位并且是位值是3的倍数，添加“,”
if (i !== 0 && i % 3 === 0) {
r = v + ',' + r;
} else {
// 正常添加字符(这是好写法)
r = v + r;
}
});
// 整数部分和小数部分拼接
return r + (!!fraction ? '.' + fraction : '');
}
console.log(numFormat(1649966)) // 1,649,966
console.log(numFormat(673439.6328)); // 673,439.6328
console.log(numFormat(12345.36)) // 12,345.36
02生成指定范围随机数
const randomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
03字符串首字母大写
const fistLetterUpper = (str) => {
return str.charAt(0).toUpperCase() + str.slice(1);
};
console.log(fistLetterUpper('hello word'))
04每个单词首字母大写
const everyLetterUpper = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());
console.log(everyLetterUpper('hello world! today is a wonderful day'));
// Hello World! Today Is A Wonderful Day
05根据parent_id生成树结构
// pid代表它的父结点
const list =[
{ id: 1,name:"部门1", pid: 0 },
{ id: 2, name:"部门2", pid:1 },
{ id: 3,name:"部门3", pid: 1 },
{ id: 4,name:"部门4", pid: 3 },
{ id: 5,name:"部门5", pid: 4 }
]
//希望输出的结果
const resultList = [
{
id: 1,
name: "部门1",
pid: 0,
children: [
{
id: 2,
name: "部门2",
pid: 1,
children: []
},
{
id: 3,
name: "部门3",
pid: 1,
children: [
// ...
]
}
]
}
]
1、Map对象实现
const listToTree = (list) => {
//最终树形结构的结果
const result = [];
const itemMap = {};
for (const item of list) {
const id = item.id;
const pid = item.pid;
if (!itemMap[id]) {
itemMap[id] = {
children: [],
}
}
itemMap[id] = {
...item,
children: itemMap[id]["children"]
}
const treeItem = itemMap[id];
if (pid === 0) {
result.push(treeItem);
} else {
if (!itemMap[pid]) {
itemMap[pid] = {
children: [],
}
}
itemMap[pid].children.push(treeItem);
}
}
return result;
}
listToTree(list);
2、递归实现
//递归查找获取子节点
// List扁平数组
// 树形结构最终数据
// 父节点
const childGet = (list, result, pid) => {
for (const item of list) {
if (item.pid === pid) {
const newItem = { ...item, children: [] };
result.push(newItem);
childGet(list, newItem.children, item.id);
}
}
}
// 调用实现
const listToTree = (list, pid) => {
const result = [];
childGet(list, result, pid);
return result;
};
listToTree(list, 0);
3、filter+递归（方法2进阶版）
const listToTree = (list, id, pid='pid') => {
const items = list.filter(item => item[pid] === id);
const result = items.map(item => ({
...item,
children: listToTree(list, item.id)
}));
return result;
}
listToTree(list, 0, 'pid')
06对象属性剔除
const omit = (object, props = []) => {
let res = {};
Object.keys(object).forEach(key => {
if (props.includes(key) === false) {
res[key] = typeof object[key] === 'object' && object[key] !== null ?
JSON.parse(JSON.stringify(object[key])) :
object[key]
}
})
return res;
}
const obj = {
id: '1',
name: '张三',
age: 18,
desc: ''
}
omit(obj, ['age'])
// {id: '1', name: '张三', desc: ''}
07去除字符串两端空格
const trimFn = (value) => { const str = value.toString(); const reExtraSpace = /^\s*(.*?)\s+$/; return str.replace(reExtraSpace, "$1"); } trimFn(' 12345678 ') // 12345678
08日期格式化
const formatDate = (format='Y-M-D h:m:s', timestamp=Date.now()) => {
let date = new Date(timestamp)
let dateInfo = {
Y: date.getFullYear(),
M: date.getMonth()+1,
D: date.getDate(),
h: date.getHours(),
m: date.getMinutes(),
s: date.getSeconds()
}
let formatNumber = (n) => n > 10 ? n : '0' + n
let res = format
.replace('Y', dateInfo.Y)
.replace('M', dateInfo.M)
.replace('D', dateInfo.D)
.replace('h', formatNumber(dateInfo.h))
.replace('m', formatNumber(dateInfo.m))
.replace('s', formatNumber(dateInfo.s))
return res
}
formatDate()
// 2023-11-25 14:26:36
formatDate('Y年M月D日 h时m分s秒')
// 2023年11月25日 14时26分37秒
formatDate('h:m Y-M-D', 1700919198000)
// 21:33 2023-11-25
09防抖
/**
* @param {function} func - 执行函数
* @param {number} wait - 等待时间
* @param {boolean} immediate - 是否立即执行
* @return {function}
*/
const debounce = (func, wait = 300, immediate = false) => {
let timer, ctx;
let later = (arg) => setTimeout(()=>{
func.apply(ctx, arg)
timer = ctx = null
}, wait)
return function(...arg){
if(!timer){
timer = later(arg)
ctx = this
if(immediate){
func.apply(ctx, arg)
}
}else{
clearTimeout(timer)
timer = later(arg)
}
}
}
let scrollHandler = debounce(function(e){
console.log(e)
}, 500)
window.onscroll = scrollHandler
10节流
/**
* @param {function} func - 执行函数
* @param {number} delay - 延迟时间
* @return {function}
*/
const throttle = (func, delay) => {
let timer = null
return function(...arg){
if(!timer){
timer = setTimeout(()=>{
func.apply(this, arg)
timer = null
}, delay)
}
}
}
let scrollHandler = throttle(function(e){
console.log(e)
}, 500)
window.onscroll = scrollHandler
11base64数据导出文件下载
/**
* @param {string} filename - 下载时的文件名
* @param {string} data - base64字符串
*/
const downloadFile = (filename, data) => {
let downloadLink = document.createElement('a');
if (downloadLink) {
document.body.appendChild(downloadLink);
downloadLink.style = 'display: none';
downloadLink.download = filename;
downloadLink.href = data;
if (document.createEvent) {
let downloadEvt = document.createEvent('MouseEvents');
downloadEvt.initEvent('click', true, false);
downloadLink.dispatchEvent(downloadEvt);
} else if (document.createEventObject) {
downloadLink.fireEvent('onclick');
} else if (typeof downloadLink.onclick == 'function') {
downloadLink.onclick();
}
document.body.removeChild(downloadLink);
}
}
12检测是否为PC浏览器
const isPCBroswer = () => {
let e = window.navigator.userAgent.toLowerCase()
, t = "ipad" == e.match(/ipad/i)
, i = "iphone" == e.match(/iphone/i)
, r = "midp" == e.match(/midp/i)
, n = "rv:1.2.3.4" == e.match(/rv:1.2.3.4/i)
, a = "ucweb" == e.match(/ucweb/i)
, o = "android" == e.match(/android/i)
, s = "windows ce" == e.match(/windows ce/i)
, l = "windows mobile" == e.match(/windows mobile/i);
return !(t || i || r || n || a || o || s || l)
}
13数组中获取随机数
const sample = arr => arr[Math.floor(Math.random() * arr.length)];
14手机号脱敏
const telFormat = (tel) => {
// 第一种：正则表达式
const result = tel.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
// 第二种：字符串 substring 方法
/* 利用replace()方法，将电话号码中符合条件的部分替换成 ****，
条件就是 tel.substring(3,7) 截取的中间四位字符串 */
const result = tel.replace(tel.substring(3,7), "****");
// 第三种：字符串substr方法
// 截取字符串的前三项 + **** + 截取字符串的第七项之后的字符串
const result = tel.substr(0,3) + "****" + tel.substr(7);
}
telFormat(13612345678) // 136****5678
15驼峰命名转短横线命名
const getKebabCase = (str) => {
return str.replace(/[A-Z]/g, (item) => '-' + item.toLowerCase())
}
getKebabCase('firstCodeHelloWorld')
// first-code-hello-world
16短横线命名转驼峰命名
const getCamelCase = (str) => {
return str.replace( /-([a-z])/g, (i, item) => item.toUpperCase())
}
getCamelCase('first-code-hello-world')
// firstCodeHelloWorld
总结
在JavaScript中，工具函数（也称为实用函数或辅助函数）是用来解决日常编程任务的函数。它们通常不是用于实现应用程序的主要功能，而是提供一些实用的功能，使开发人员的工作更加轻松。
本篇文章就先分享到这里，更多精彩内容，您可以关注作者及时获取后续的最新文章内容！文中有错误的地方，欢迎大家批评指正，谢谢您的观看。