1.高阶函数
在 JavaScript 中，函数是一等公民。函数不仅可以赋值给变量，还可以作为参数传递，作为返回值返回。而高阶函数就是接收一个或多个函数作为参数，并返回一个新函数的函数。它可以抽象出公共的操作，减少重复的代码。例如，数组的 map 函数就是一个高阶函数，它接收一个函数作为参数，对数组的每个元素进行处理，并返回一个新的数组。
const arr = [1, 2, 3, 4];
const double = arr.map(num => num * 2);
console.log(double); // [2, 4, 6, 8]
以上代码中，我们将 arr 数组中的每个元素都乘以 2 ，最终得到了一个新的数组 double 。
1.1 高阶函数实现
我们可以自己实现一个高阶函数，以加深对它的理解。下面的代码演示了如何实现一个 add 函数，它接收一个函数作为参数，并返回一个新的函数，新的函数会将接收到的两个参数传递给原函数进行计算。
function add(func) {
return function(a, b) {
return func(a, b);
};
}
function sum(a, b) {
return a + b;
}
const addSum = add(sum);
console.log(addSum(2, 3)); // 5
在上面的例子中，我们先定义了一个 add 函数，它返回一个接收两个参数的函数。在这个新的函数中，我们将这两个参数传递给传入的函数 func 进行计算。最后，我们将 sum 函数作为参数传给 add 函数，得到一个新的函数 addSum 。调用 addSum 函数时，会调用 sum 函数，得到结果 5 。
1.2 柯里化
柯里化是一种将接受多个参数的函数转换为一系列只接受一个参数的函数的技术。当一个函数被柯里化了之后，它将不再直接接收多个参数，而是返回一个新的函数，由这个新的函数来接收下一个参数，直到所有参数都被接收完毕。柯里化可以让函数的调用更加灵活，也能提高函数的复用性。
1.3 柯里化实现
下面的代码演示了如何用 JavaScript 来实现一个通用的柯里化函数。我们通过递归函数来实现了将原函数不断拆分成小函数的过程。
function curry(fn) {
return function curried(...args) {
if(args.length >= fn.length) {
return fn.apply(this, args);
} else {
return function(...args2) {
return curried.apply(this, args.concat(args2));
};
}
};
}
function sum(a, b, c) {
return a + b + c;
}
const curriedSum = curry(sum);
console.log(curriedSum(1)(2)(3)); // 6
console.log(curriedSum(1,2)(3)); // 6
console.log(curriedSum(1)(2,3)); // 6
在上面的例子中，我们先定义了一个 curry 函数，它接收一个函数 fn 作为参数，并返回一个新的函数。在新函数中，我们使用递归来拆分原函数，如果接收到的参数已经等于原函数的参数个数，就调用原函数进行计算；否则就返回一个新的函数，继续等待接收参数。这样就实现了一个通用的柯里化函数。例如，我们将 sum 函数传递给 curry 函数，得到了一个新的函数 curriedSum ，调用 curriedSum 函数时，它会先返回一个新的函数，等待继续接收参数。当接收到最后一个参数时，它会调用原来的 sum 函数进行计算。
2. 实际应用
高阶函数和柯里化在实际应用中十分常见，下面我们将举几个例子来说明它们的应用。
2.1 防抖与节流
在前端开发中，我们经常需要对一些频繁触发的事件进行控制，以提高页面的性能和用户体验。防抖和节流就是应用较广的技术之一。
防抖（debounce）的原理是，在一些频繁触发的事件中，只有在事件结束后才执行，如果在一定时间内有新的事件触发，就会重新计时。例如，我们在输入框中实时搜索时，只有当用户输入完成后才触发搜索，以避免频繁请求服务器。
节流（throttle）的原理是，在一些频繁触发的事件中，以一定的时间间隔执行函数，无论事件触发的时间间隔多短，都只会执行一次。例如，我们在监听 window 的 scroll 事件时，可以通过节流函数来减少事件的触发次数，提高页面性能。
下面的代码演示了如何使用高阶函数来实现一个通用的防抖函数和节流函数。
// 防抖函数
function debounce(func, delay) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
// 节流函数
function throttle(func, delay) {
let timer = null;
return function(...args) {
if(!timer) {
timer = setTimeout(() => {
timer = null;
func.apply(this, args);
}, delay);
}
};
}
function search(value) {
console.log(`search ${value}`);
}
const debounceSearch = debounce(search, 1000);
const throttleSearch = throttle(search, 500);
debounceSearch('hello'); // 一秒后输出 "search hello"
debounceSearch('world'); // 一秒后输出 "search world"
throttleSearch('hello'); // 立即输出 "search hello"
throttleSearch('world'); // 0.5 秒后输出 "search world"
在上面的例子中，我们分别定义了 debounce 和 throttle 两个函数，它们接收一个函数和一个时间间隔作为参数，并返回一个新的函数，这个新的函数会在一定的时间间隔后，调用传入的函数进行计算。在 debounce 函数中，我们使用了 clearTimeout 和 setTimeout 函数，来实现重新计时和执行传入的函数的功能。在 throttle 函数中，我们使用了一个 timer 变量来记录上一次事件执行的时间，当 timer 为 null 时，才会执行传入的函数。
2.2 高阶组件
React 是一个非常流行的 JavaScript 框架，它提供了一些高阶组件（Higher-Order Components，简称 HOC），帮助我们更容易地实现一些逻辑复杂的功能。高阶组件是一个函数，它接受一个组件为参数，并返回一个新的组件，新组件具有了更多的功能或属性。高阶组件可以应用于很多场景，例如：鉴权、数据处理、性能优化等。
下面的代码演示了如何使用高阶组件来实现一个鉴权的功能，它将一个需要鉴权的组件作为参数，并返回一个新的组件，这个新组件会在渲染前检查用户是否已经登录，如果未登录就跳转至登录页，否则就渲染传入的组件。
import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
function requireAuth(WrappedComponent) {
return class extends Component {
state = {
isAuthenticated: false,
};
componentDidMount() {
const isAuthenticated = true; // 模拟用户已登录
this.setState({
isAuthenticated,
});
}
render() {
const { isAuthenticated } = this.state;
if(!isAuthenticated) {
return <Redirect to="/login" />;
}
return <WrappedComponent {...this.props} />;
}
};
}
class SecretPage extends Component {
render() {
return <div>这是一个需要鉴权的页面</div>;
}
}
const AuthSecretPage = requireAuth(SecretPage);
export default AuthSecretPage;
在上面的例子中，我们定义了一个 requireAuth 高阶组件，它接收一个组件 WrappedComponent 作为参数，并返回一个新的组件。在新组件中，我们定义了一个状态 isAuthenticated ，并在 componentDidMount 生命周期方法中模拟了用户已登录的状态。在 render 方法中，我们判断 isAuthenticated 的值，如果未登录就跳转至登录页，否则就渲染传入的组件 WrappedComponent 。最后，我们通过 requireAuth(SecretPage) 来生成一个新的组件 AuthSecretPage ，这个组件只有在用户已登录的情况下才可以被渲染。
2.3 函数式编程
JavaScript 中高阶函数和柯里化的应用，也使得我们更加轻松地进行函数式编程。函数式编程的目标是编写简洁、可复用、可维护的代码。它避免了状态的改变和副作用带来的风险，使得代码更加安全可靠、易于测试。
下面的代码演示了如何使用高阶函数和柯里化来实现一个函数式编程中的管道运算符。管道运算符的作用是将一个数值通过一系列函数的处理，最终得到结果。
const pipe = (...fns) => x => fns.reduce((y, f) => f(y), x);
const add = x => x + 1;
const multiply = x => x * 2;
const divide = x => x / 3;
const transform = pipe(add, multiply, divide);
console.log(transform(5)); // 3.6666...
在上面的例子中，我们定义了一个 pipe 函数，它接收多个函数作为参数，返回一个新的函数。在这个新的函数中，我们使用 reduce 函数来依次调用这些函数，并将前一个函数的结果传给下一个函数进行处理，直到所有函数处理完毕，得到最终结果。
3. 总结
在 JavaScript 中，高阶函数和柯里化是非常重要的概念。它们可以帮助我们抽象出公共的操作，减少重复的代码，并且提高代码的可复用性和可维护性。在实际应用中，我们可以使用它们来实现很多常见的功能，如防抖、节流、高阶组件、函数式编程等。