开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情
今天工作中被嵌套数组搞得晕头转向，一怒之下，总结一下项目中开发过程中常用的JS函数和正则，我就不信还拿不下你！
本文具体内容由以下的：
-
常用的JS函数（防抖就，节流，去重，排序，模板渲染等）
-
JS常用高阶函数
常用JS函数
flat函数 - 数组扁平化
考虑如下数组
const arr = [1, 2, [3, 4], [5, 6, [7, 8]]]
大家可以看到这个数组有很多层，属于多层嵌套数组，我们现在需要将它变成一层的应该怎么做呢？
结合我们前面讲过的reduce和递归我们很容易写出这个方法：
// 数组扁平化
const flat = (arr, initVal) => {
const startVal = initVal || [];
return arr.reduce((prevRes, item) => {
// 如果里层还是数组，递归调用自身
if(Array.isArray(item)){
return flat(item, prevRes);
}else{
return prevRes.concat(item);
}
}, startVal)
}
const arr = [1, 2, [3, 4], [5, 6, [7, 8]]];
const flatArr = flat(arr);
console.log(flatArr); // [1, 2, 3, 4, 5, 6, 7, 8]
如果我们想要进一步对递归的层数进行限制，我们可以再增加一个参数来控制：
const flat = (arr, depth, initVal) => {
const startVal = initVal || []
return arr.reduce((prevRes, item) => {
// 如果里层还是数组，递归调用自身
if (Array.isArray(item) && depth > 1) {
return flat(item, depth - 1, prevRes)
} else {
return prevRes.concat(item)
}
}, startVal)
}
const flatArr = flat(arr, 1) // 只扁平化一层
console.log(flatArr) // [1,2,3,4,5,6,[7,8]]
防抖函数
我们有一个需求：实现一个搜索框，当用户连续输入的时候不发请求去搜索，只有当用户输入暂停超过500毫秒才发请求。实现这个需求就需要我们的防抖函数了，因为是等待500毫秒才发起请求，我们很容易就想到了setTimeout，如果timer存在，又触发了这个方法，就把timer清了继续等，知道方法不再触发，timer执行
// 防抖函数
const debounce = (fn, waitTime) => {
let timer = null
return function () {
const self = this
const args = [].slice.apply(arguments)
if (timer) {
clearTimeout(timer)
} else {
timer = setTimeout(() => {
fn.apply(self, args)
}, waitTime)
}
}
}
节流函数
节流函数和防抖函数很像，但是针对的需求不一样，比如onScorll方法可能会触发的很频繁，我们不能每次触发的时候都去调回调，会浪费大量性能，我们可能需要每50ms调用一次，那就需要节流函数了：
// 节流函数
const throttle = (fn, waitTime) => {
let isRunnig = false
return (...args) => {
if (!isRunnig) {
isRunnig = true
setTimeout(() => {
fn(...args)
isRunnig = false
}, waitTime)
}
}
}
