这是我参与「第四届青训营 」笔记创作活动的的第5天
高阶函数、防抖与节流 | 青训营笔记
高阶函数Higher-order function
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
Array.prototype.map
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。
语法
array.map(function(currentValue,index,arr), thisValue)
-
function(currentValue, index,arr)
- 必须。函数，数组中的每个元素都会执行这个函数
- currentValue：必须。当前元素的值
- index：可选。当前元素的索引值
- arr：可选。当前元素属于的数组对象
-
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。
举例：创建二维数组
const arr = new Array(row).fill(0).map(() => new Array(col).fill(0));
举例：字符串转数字
["1","2","3"].map((x)=>{
return parseInt(x);
});
简写：
["1","2","3"].map(x=>parseInt(x));
关于map高阶函数对应的一道经典面试题
如下函数的输出结果是[1,NaN,NaN]
["1", "2", "3"].map(parseInt);
见：【JS必知必会】高阶函数详解与实战 - 掘金 (juejin.cn)
Array.prototype.sort
举例：对数字排序
[1,4,3,-1,66].sort((a, b) => a - b);
//[ -1, 1, 3, 4, 66 ]
其他
- Array.prototype.reduce：【JS必知必会】高阶函数详解与实战 - 掘金 (juejin.cn)
- Array.prototype.filter：【JS必知必会】高阶函数详解与实战 - 掘金 (juejin.cn)
防抖（Debounce）
防抖是将多次执行变为最后一次执行
青训营-Debounced - 码上掘金 (juejin.cn) 核心代码
// 2、防抖功能函数，接受传参
function debounce(fn, dur){
dur = dur || 100;
// 4、创建一个标记用来存放定时器的返回值
var timer;
return function(){
// 5、每次当用户点击/输入的时候，把前一个定时器清除
clearTimeout(timer);
// 6、然后创建一个新的 setTimeout，这样就能保证点击按钮后的 interval 间隔内，如果用户还点击了的话，就不会执行 fn 函数
timer = setTimeout(() => {
fn.apply(this, arguments);
}, dur);
}
}
// 1、获取这个按钮，并绑定事件
// 3、fun：需要进行防抖的事件处理
document.addEventListener('mousemove', debounce(fun, 100));
节流（Throttle）
节流是将多次执行变成每隔一段时间执行。 青训营-Throttle - 码上掘金 (juejin.cn) 核心代码
// 2、节流函数
function throttle(fn, time = 500){
// 4、通过闭包保存一个标记
let timer;
return function(...args){
// 判断是否被调用
if(timer == null){
// 调用
fn.apply(this, args);
// 调用完设置timer
timer = setTimeout(() => {
// 设置timer为空，可以再次调用了
timer = null;
}, time)
}
}
}
// 1、获取按钮，绑定点击事件
btn.onclick = throttle(function(e){// 3、需要节流的事件
circle.innerHTML = parseInt(circle.innerHTML) + 1;
});