编辑“︁JavaScript函数式编程实践”︁

{{DISPLAYTITLE:JavaScript函数式编程实践}}

'''JavaScript函数式编程实践'''是一种强调使用纯函数、不可变数据和函数组合的编程范式。它通过避免共享状态和可变数据来减少副作用，从而提高代码的可预测性和可维护性。本指南将逐步介绍函数式编程的核心概念，并提供实际案例帮助理解。

== 简介 ==
函数式编程（Functional Programming, FP）是一种编程范式，它将计算视为数学函数的求值，并避免改变状态和可变数据。在JavaScript中，函数是一等公民，可以像变量一样传递和返回，这使得JavaScript非常适合函数式编程。

核心原则包括：
* '''纯函数'''：相同的输入总是产生相同的输出，且无副作用。
* '''不可变性'''：数据一旦创建就不能被修改。
* '''高阶函数'''：接受或返回其他函数的函数。
* '''函数组合'''：将多个函数组合成一个新函数。

== 核心概念 ==

=== 纯函数 ===
纯函数不依赖或修改外部状态，且相同的输入总是返回相同的输出。

<syntaxhighlight lang="javascript">
// 纯函数示例
function add(a, b) {
    return a + b;
}

console.log(add(2, 3)); // 输出: 5
</syntaxhighlight>

=== 不可变性 ===
不可变性意味着数据创建后不能被修改。在JavaScript中，可以通过`const`声明和避免直接修改对象/数组来实现。

<syntaxhighlight lang="javascript">
// 不可变性示例
const originalArray = [1, 2, 3];
const newArray = [...originalArray, 4]; // 创建新数组

console.log(originalArray); // 输出: [1, 2, 3]
console.log(newArray);      // 输出: [1, 2, 3, 4]
</syntaxhighlight>

=== 高阶函数 ===
高阶函数可以接受函数作为参数或返回函数。

<syntaxhighlight lang="javascript">
// 高阶函数示例：map
const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2);

console.log(doubled); // 输出: [2, 4, 6]
</syntaxhighlight>

=== 函数组合 ===
将多个函数组合成一个新函数。

<syntaxhighlight lang="javascript">
// 函数组合示例
const add = x => x + 1;
const multiply = x => x * 2;
const compose = (f, g) => x => f(g(x));

const addThenMultiply = compose(multiply, add);
console.log(addThenMultiply(3)); // 输出: 8 ( (3 + 1) * 2 )
</syntaxhighlight>

== 实际案例 ==

=== 数据处理 ===
函数式编程非常适合数据处理任务，如过滤和转换数据。

<syntaxhighlight lang="javascript">
const users = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 },
    { name: "Charlie", age: 20 }
];

// 过滤年龄大于等于25的用户
const adults = users.filter(user => user.age >= 25);
// 提取用户名
const names = adults.map(user => user.name);

console.log(names); // 输出: ["Alice", "Bob"]
</syntaxhighlight>

=== 状态管理 ===
在React等框架中，函数式编程常用于状态管理。

<syntaxhighlight lang="javascript">
// React状态更新示例（不可变性）
const [todos, setTodos] = useState([]);

const addTodo = newTodo => {
    setTodos(prevTodos => [...prevTodos, newTodo]); // 不直接修改原状态
};
</syntaxhighlight>

== 进阶主题 ==

=== 柯里化（Currying） ===
柯里化是将多参数函数转换为一系列单参数函数的技术。

<syntaxhighlight lang="javascript">
// 柯里化示例
const multiply = a => b => a * b;
const double = multiply(2);

console.log(double(5)); // 输出: 10
</syntaxhighlight>

=== 函子（Functor）和单子（Monad） ===
函子是实现了`map`方法的容器，单子是进一步实现了`flatMap`的函子。

<syntaxhighlight lang="javascript">
// 函子示例：Array
const result = [1, 2, 3].map(x => x * 2); // [2, 4, 6]

// 单子示例：Promise
Promise.resolve(2)
    .then(x => x * 3)
    .then(console.log); // 输出: 6
</syntaxhighlight>

== 总结 ==
函数式编程通过纯函数、不可变性和高阶函数等概念，使代码更易于测试和维护。虽然需要适应新的思维方式，但其优势在复杂应用中尤为明显。通过实践和逐步应用，开发者可以充分利用JavaScript的函数式特性。

== 参见 ==
* [[JavaScript高阶函数]]
* [[不可变数据在JavaScript中的应用]]
* [[React与函数式编程]]

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript函数式编程]]