这是我参与「第四届青训营 」笔记创作活动的的第2天
昨天接触了一个新的概念，高阶函数，于是翻阅资料，学习了一下。
过程抽象
为了能够让“只执行一次”的需求覆盖不同的时间处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
什么是高阶函数？
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
JavaScript中的内置高阶函数
在JavaScript中内置了一些高阶函数，比如filter , map , sort , some , every , reduce 等等。
在这里我列举一些例子：
高阶函数作为参数
map
不使用高阶函数
const arr1 = [1,2,3,4,5];
const arr2 = [];
for(let i =0;i <arr1.length;i++){
arr2.push(arr1[i] * 2)
}
console.log(arr1)
console.log(arr2)
使用高阶函数
const arr3 = [1,2,3,4,5];
const arr4 = arr3.map(item=>item*2)
console.log(arr3)
console.log(arr4)
filter
不使用高阶函数
const arr1 = [1,2,2,3,4,5,6,6];
const arr2 = [];
for(let i =0;i<arr1.length;i++){
if( arr1[i]>3){
arr2.push(arr1[i])
}
}
console.log(arr1);
console.log(arr2);
使用高阶函数
const arr3 = [1,2,2,3,4,5,6,6];
const arr4 = arr3.filter( item => { return item>3 });
console.log(arr3)
console.log(arr4)
reduce
使用高阶函数
const arr1 = [0,1,2,3,4];
let sum = 0;
for(let i=0;i<arr1.length;i++){
sum += arr1[i]
}
console.log(sum);
console.log(arr1);
不使用高阶函数
const arr2 = [0,1,2,3,4];
const sum2 = arr1.reduce((accumulator, currentValue)=>{
return accumulator+currentValue
})
console.log(sum2);
console.log(arr2);
高阶函数作为返回值
这里就举一个无限相加的例子
function add(a){
function sum(b){ //使用一个闭包
a = a + b;
return sum;
}
sum.toString = function(){
return a;
}
return sum;
}
console.log(add(1)) //1
console.log(add(1)(2)) //3
console.log(add(1)(2)(3)) //6
高阶函数的实际运用场景
function HOF0(fn) {
return function(...args) {
return fn.apply(this, args);
}
}
操作次数限制
常用在
- 一些异步交互
- 一次性的HTTP请求
问题暴露
在这个例子中，如果我们第一次点击按钮，这个按钮所代表的li就会消失，但是由于css属性过渡需要两秒，在此期间，如果我们再点击这个按钮，那么就会报错（元素已经被删除了）。
解决方法：
节流
防抖的核心概念就是：设置延时器，短时间高频率触发只有最后一次触发成功
使用场景：节流就是设置状态锁，比如设置一个key作为状态锁，锁一开始是关闭的，即key值设置为false。当你点击时，会对key进行判断，如果key为false，未上锁，那么开始发起请求，并且给key上锁，即设置key为true。如果你继续点击，则对key进行判断，发现key上锁了，则不发起请求，点击无效。当请求完成后，key设置为false，则可以发送新一轮请求了。
案例：点击下面的按钮，每500毫秒执行一次
防抖
防抖的核心概念就是：设置延时器，在短时间内高频率触发，只有最后一次触发成功。
使用场景：比如点击提交后，设置一个定时器，间隔1s再发送请求，如果 1s内多次请求，则清除定时器，1s后重新发送请求。也就是说，在1s内无论点击提交多少次，最后一次总是会清除上一次的延迟，继而进行自身请求。
案例：鼠标移动事件
迭代器
我们都知道jQuery有隐式迭代的功能，其实在js中定义一个函数也可以实现这样的功能。
高阶函数的作用
讲了这么多，那么高阶函数的作用是什么呢？个人想法有两点：
- 增强代码的可维护性
- 增加代码的复用性
更高的维护性非常好解释，在代码更多的纯函数相较于更多的非纯函数可维护性更高。 至于复用性，举个例子： 使用之前的迭代器函数，不仅可以设置颜色，还可以干很多别的事情。比如：
const addFive = iterative((a,b)=>{
return a+b;
})
const arr = addFive([0,1,2,3,4],5);
console.log(arr)
编程范式
最后我们来聊一聊编程范式，编程范式分为命令式和声明式。
命令式的大致区别就是，命令式就是程序按照你的命令，一步一步的将某件事情做出来，而声明式就是程序只关注要做的是什么，具体的细节交给函数。
之前的很多例子，都体现了这两者的区别。比如：
这里就是命令式
const arr1 = [1,2,3,4,5];
const arr2 = [];
for(let i =0;i <arr1.length;i++){
arr2.push(arr1[i] * 2)
}
console.log(arr1)
console.log(arr2)
这里就是声明式
const arr3 = [1,2,3,4,5];
const arr4 = arr3.map(item=>item*2)
console.log(arr3)
console.log(arr4)
讲到这里，我们不难发现，高阶函数的存在，帮助程序更加偏向于声明式，而声明式的代码，一般更加的简洁可维护。
参考资料
总结
以上仅仅是我个人看法，文章如果有不正确的地方，欢迎指正，共同学习，共同进步。
若有侵权，请联系作者删除。
