常见的功能函数
本文会不定时更新,有需要的随便拿走不谢
一、解析URL参数
解析URL参数在前端开发中是非常常见的功能
const _getParams = (url) => {
// 补全代码
const params=url.split('?')[1].split('&')
const obj={}
params.forEach(item=>{
obj[item.split('=')[0]]=item.split('=')[1]
})
return obj
}
二、格式化时间函数
后端返回时间戳,前端显示年月日,时分秒
function formatDate (value) {
if (typeof (value) == 'undefined') {
return ''
} else {
let date = new Date(parseInt(value))
let y = date.getFullYear()
let MM = date.getMonth() + 1
MM = MM < 10 ? ('0' + MM) : MM
let d = date.getDate()
d = d < 10 ? ('0' + d) : d
let h = date.getHours()
h = h < 10 ? ('0' + h) : h
let m = date.getMinutes()
m = m < 10 ? ('0' + m) : m
let s = date.getSeconds()
s = s < 10 ? ('0' + s) : s
return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
}
}
反向转换,将年月日,时分秒转换为时间戳
function formatDate() {
var date = new Date('2020-04-07 18:08:58');
// 有三种方式获取
var time1 = date.getTime();
var time2 = date.valueOf();
var time3 = Date.parse(date);
}
三、防抖
// 函数防抖 (只执行最后一次点击)
const debounce = (fn: Function, delay = 300) => {
let timer: NodeJS.Timeout | null;
return function(...args: any) {
timer && clearTimeout(timer);
timer = setTimeout(() => {
timer = null;
fn.apply(this, args);
}, delay);
};
};
四、节流
// 节流(n秒内只下执行一次)
const throttle = (fn: any, delay = 500) => {
let flag = false;
return function(...args: any) {
if (!flag) {
flag = true;
setTimeout(() => {
console.log(flag);
flag = false;
// @ts-ignore
fn.apply(this, args);
}, delay);
}
};
}
五、关键字高亮
当用户在输入框搜索某个关键字后,将展示出来的联想列表中的关键字改变颜色,可以让用户更直观的看到想要的结果。
export const lightFn = (str, targetStr) => {
// 忽略大小写且全局匹配
const reg = new RegExp(targetStr, "ig")
return str.replace(reg, match => {
return `<span style="color:red">${match}</span>`
})
}
六、数据类型检测
//检测变量的数据类型
export function getParamType(item) {
if (item === null) return null;
if (item === undefined) return undefined;
return Object.prototype.toString.call(item).slice(8, -1);
}
//返回String, Function, Boolean, Object, Number
七、函数柯里化
即把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术
const curring = fn => {
const { length } = fn
const curried = (...args) => {
return (args.length >= length
? fn(...args)
: (...args2) => curried(...args.concat(args2)))
}
return curried
}