函数式编程是一种以函数为核心的编程范式，核心思想是将程序的计算过程拆分为多个纯函数的组合，纯函数的输出仅由输入决定，不会产生副作用，这让代码更容易测试和复用。在JavaScript中，函数作为一等公民，可以像普通变量一样被传递、赋值，这为函数式编程提供了天然的支持，而高阶函数就是函数式编程落地的重要载体。
什么是JS高阶函数
高阶函数的定义非常简单，满足以下两个条件之一的就可以称为高阶函数：
- 接收一个或多个函数作为参数
- 返回一个函数作为结果
JavaScript中内置的很多数组方法都属于高阶函数，比如我们常用的map、filter、reduce，这些方法都接收函数作为参数，用来处理数组中的数据，避免了手动写循环带来的冗余代码。
常见高阶函数的应用场景
1. map方法：数组元素转换
map方法会遍历原数组，对每个元素执行传入的回调函数，将回调的返回结果组成新数组返回，不会改变原数组。适合需要对数组每个元素做统一转换的场景，比如将数组中的数字都乘以2，或者提取对象数组中的某个属性。
// 将数组中的每个数字乘以2
const originalArr = [1, 2, 3, 4];
const newArr = originalArr.map((item) => {
return item * 2;
});
console.log(newArr); // 输出 [2, 4, 6, 8]
console.log(originalArr); // 输出 [1, 2, 3, 4]，原数组未被修改
// 提取对象数组中的name属性
const userList = [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 22 },
{ id: 3, name: '王五', age: 25 }
];
const userNameList = userList.map((user) => {
return user.name;
});
console.log(userNameList); // 输出 ['张三', '李四', '王五']
2. filter方法：数组筛选
filter方法会遍历数组，对每个元素执行回调函数，如果回调返回true，则将该元素保留到新数组中，最终返回筛选后的新数组，同样不会改变原数组。适合需要从数组中过滤出符合特定条件的元素的场景，比如筛选年龄大于20的用户，或者筛选数组中大于10的数字。
// 筛选年龄大于20的用户
const userList = [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 22 },
{ id: 3, name: '王五', age: 25 }
];
const adultUserList = userList.filter((user) => {
return user.age > 20;
});
console.log(adultUserList);
// 输出 [{ id: 2, name: '李四', age: 22 }, { id: 3, name: '王五', age: 25 }]
// 筛选数组中大于10的数字
const numArr = [5, 8, 12, 19, 3, 25];
const bigNumArr = numArr.filter((num) => {
return num > 10;
});
console.log(bigNumArr); // 输出 [12, 19, 25]
3. reduce方法：数组累加计算
reduce方法会遍历数组，对每个元素执行回调函数，将结果累积到一个累加器变量中，最终返回累加器的结果。适合需要做数组求和、求乘积、数组扁平化、统计元素出现次数等场景。
// 数组求和
const numArr = [1, 2, 3, 4, 5];
const sum = numArr.reduce((accumulator, current) => {
return accumulator + current;
}, 0); // 第二个参数是累加器的初始值，这里设为0
console.log(sum); // 输出 15
// 统计数组中每个元素出现的次数
const colorArr = ['红', '蓝', '红', '绿', '蓝', '红'];
const colorCount = colorArr.reduce((obj, color) => {
if (obj[color]) {
obj[color] += 1;
} else {
obj[color] = 1;
}
return obj;
}, {});
console.log(colorCount); // 输出 {红: 3, 蓝: 2, 绿: 1}
// 数组扁平化，将二维数组转为一维数组
const twoDimensionalArr = [[1, 2], [3, 4], [5, 6]];
const flatArr = twoDimensionalArr.reduce((result, currentArr) => {
return result.concat(currentArr);
}, []);
console.log(flatArr); // 输出 [1, 2, 3, 4, 5, 6]
高阶函数的组合使用
在实际开发中，我们经常会组合使用多个高阶函数，完成更复杂的逻辑。比如先筛选出年龄大于20的用户，再提取这些用户的名字，最后计算名字的总长度：
const userList = [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 22 },
{ id: 3, name: '王五', age: 25 },
{ id: 4, name: '赵六', age: 18 }
];
const totalNameLength = userList
.filter((user) => user.age > 20) // 先筛选年龄大于20的用户
.map((user) => user.name) // 提取名字
.reduce((total, name) => total + name.length, 0); // 计算总名字长度
console.log(totalNameLength); // 输出 4 + 5 = 9
这种链式调用的写法非常符合函数式编程的思想，每个步骤的逻辑都很清晰，没有多余的临时变量，代码的可读性和可维护性都更好。
高阶函数的注意事项
- 尽量使用纯函数作为高阶函数的回调，避免回调中修改外部变量，这样才能发挥函数式编程的优势。
- map、filter、reduce这些方法都会返回新数组，不会修改原数组，如果不需要使用返回的新数组，不要强行调用这些方法，避免无意义的性能消耗。
- 如果处理逻辑比较复杂，不要把所有逻辑都写在一个回调里，可以将逻辑拆分成多个小的纯函数，再组合起来使用，提升代码的复用性。