JavaScript高阶函数
高阶函数（Higher-Order Function） 是指能够接收函数作为参数或返回函数作为结果的函数。高阶函数是函数式编程的核心概念之一，JavaScript 中的许多内置方法（如 map、filter、reduce）都是高阶函数。
1. 高阶函数的特点
(1) 接收函数作为参数：
- 可以将函数作为参数传递给另一个函数。 (2) 返回函数作为结果：
- 可以从函数中返回一个新的函数。
2. 高阶函数的应用场景
(1) 接收函数作为参数
- 将函数作为参数传递给另一个函数，实现灵活的逻辑。
示例：
function operateOnArray(arr, operation) {
return arr.map(operation);
}
const numbers = [1, 2, 3];
const doubled = operateOnArray(numbers, x => x * 2);
console.log(doubled); // 输出：[2, 4, 6]
(2) 返回函数作为结果
- 通过函数生成新的函数，实现逻辑的复用。
示例：
function createMultiplier(multiplier) {
return function(x) {
return x * multiplier;
};
}
const double = createMultiplier(2);
const triple = createMultiplier(3);
console.log(double(5)); // 输出：10
console.log(triple(5)); // 输出：15
3. JavaScript 内置高阶函数
(1) map
- 对数组中的每个元素执行指定操作，并返回新数组。
示例：
const numbers = [1, 2, 3];
const squared = numbers.map(x => x * x);
console.log(squared); // 输出：[1, 4, 9]
(2) filter
- 过滤数组中满足条件的元素，并返回新数组。
示例：
const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(x => x % 2 === 0);
console.log(evens); // 输出：[2, 4]
(3) reduce
- 对数组中的元素进行累积计算，返回一个值。
示例：
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((total, x) => total + x, 0);
console.log(sum); // 输出：10
(4) forEach
- 对数组中的每个元素执行指定操作，无返回值。
示例：
const numbers = [1, 2, 3];
numbers.forEach(x => console.log(x)); // 输出：1 2 3
4. 高阶函数的优势
- 代码复用：通过将逻辑抽象为函数，减少重复代码。
- 灵活性：通过传递不同的函数，实现不同的行为。
- 可读性：高阶函数使代码更简洁、更易理解。
5. 自定义高阶函数示例
(1) 函数组合
- 将多个函数组合成一个新的函数。
示例：
function compose(f, g) {
return function(x) {
return f(g(x));
};
}
const add1 = x => x + 1;
const multiply2 = x => x * 2;
const addThenMultiply = compose(multiply2, add1);
console.log(addThenMultiply(5)); // 输出：12
(2) 延迟执行
- 返回一个函数，延迟执行某些操作。
示例：
function delay(ms, func) {
return function() {
setTimeout(func, ms);
};
}
const delayedLog = delay(1000, () => console.log('1 秒后执行'));
delayedLog(); // 1 秒后输出：1 秒后执行
总结
| 特性 | 描述 | 示例 |
|---|---|---|
| 接收函数 | 将函数作为参数传递 | arr.map(x => x * 2) |
| 返回函数 | 从函数中返回新的函数 | function createMultiplier() { ... } |
| 内置方法 | map、filter、reduce 等 | numbers.filter(x => x % 2 === 0) |
| 优势 | 代码复用、灵活性、可读性 | 减少重复代码，提升代码质量 |
高阶函数是 JavaScript 中强大的工具，合理使用可以显著提升代码的复用性和可读性。
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
