什么是高阶函数呢?
高阶函数源自于函数式编程。
编程范式: 命令式编程 / 声明式编程
编程范式: 面向对象编程(第一公民:对象) / 函数式编程 (第一公民:函数)
那么,JS作为一门“一切皆为对象”的语言,是如何拥有函数式编程的能力呢?
是因为在JS中函数是一等公民,即函数可以被赋值给变量,被变量引用,这便使得函数可以作为参数,在其他函数间相互传递。
简单来说就是函数本身需要的参数也是一个函数
看完以下案例 你就懂了:
现在有一个数组 外加3个需求,按照一般的做法是:
<script>
// 现有一个数组
const nums = [45, 78, 62, 89, 111, 33, 411, 555];
// 1.需求:取出所有小于100的数字
let newNums = []; // new 一个新的数组 然后遍历
for (let n of nums) {
if (n < 100) {
newNums.push(n); // 追加到新数组
}
}
console.log(newNums)
// 2.需求 :在1的需求之上 把每个数乘以2进行转化
let newNums2 = [];
for (let n of newNums) {
newNums2.push(n * 2);
}
console.log(newNums2)
// 3.需求 在需求二之上,把数组里的所有数相加 得出一个结果
let total = 0;
for (let n of newNums) {
total += n;
}
console.log(total);
</script>
是不是觉得很繁琐且不美观。那我们一起来学高阶函数吧
filter()
语法: array.filter(function(currentValue, indedx, arr), thisValue) 返回一个新的数组
- currentValue:必须。当前元素的值;
- index:可选。当前元素的索引值;
- arr:可选。当前元素属于的数组对象;
- thisValue:可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。
- 如果省略了 thisValue ,“this” 的值为 “undefined”。
// n为数组中的数字
nums.filter(function(n){
})
filter()中的回调函数有一个要求,必须返回一个Boolean值,
true:当返回true时 函数内部会自动把这次回调的n加入新的数组中
false:当返回false时 函数内部自动把n过滤掉。
// 1.需求:取出所有小于100的数字
let newNums = nums.filter(function (n) {
return n < 10;
})
Map()
map() 方法返回一个新数组,数组中的元素为回调函数处理后的值。
// 2.需求 :在1的需求之上 把每个数乘以2进行转化
let newNums2 = newNums.map(function (n) {
return n * 2;
})
Reduce()
作用 对数组中的所有数进行汇总。
// 3.需求 在需求二之上,把数组里的所有数相加 得出一个结果
let total = newNums2.reduce(function (preValue, n) {
return preValue + n;
}, 0)
// 参数解析:
/* preValue : 上一次回调函数返回的值
n : 当前传入的值
0 : 上一次回调函数返回的值初始值
*/
优化:
let total = nums.filter(function (n) {
return n < 100;
}).map(function (n) {
return n * 2;
}).reduce(function (preValue, n) {
return preValue + n;
}, 0)
是不是觉得方便多了,,,但是它还不止于此
配合箭头函数的最终版:
let total = nums.filter(n => n < 100).map(n => n * 1).reduce((pre, n) => pre + n);