新闻中心

JS函数式编程教程：函数组合、纯函数与高阶函数详解（2026最新版）

栏目：软件教程 日期： 作者：admin 阅读：9

本教程系统讲解 JavaScript 函数式编程（Functional Programming, FP）的核心概念、常用方法和实战应用。内容涵盖纯函数、不可变数据、高阶函数、函数组合、柯里化等，并结合具体案例演示如何在实际开发中提升代码可维护性和复用性。适合新手入门，也适合有经验的开发者提高函数式思维能力。

正文教程

一、函数式编程基础

  1. 定义：函数式编程是一种以函数为核心的编程范式，强调无副作用、数据不可变和函数复用。

  2. 核心特点：

    • 纯函数：相同输入得到相同输出，不依赖外部状态

    • 不可变数据：避免修改原数据，使用新数据返回结果

    • 高阶函数：函数可以作为参数或返回值

    • 函数组合：将小函数组合成大功能

技巧：先理解概念，再通过小案例练习，有助于快速上手。

二、纯函数示例

function add(a, b) {
    return a + b; // 无副作用
}
console.log(add(2,3)); // 输出 5

技巧：避免在函数中修改全局变量或外部对象，提高代码可预测性。

三、高阶函数（Higher-Order Function）

定义：接收函数作为参数或返回函数的函数。

function map(arr, fn) {
    const result = [];
    for(const item of arr){
        result.push(fn(item));
    }
    return result;
}

const nums = [1,2,3];
console.log(map(nums, x => x*2)); // 输出 [2,4,6]

技巧：JS内置高阶函数有 map, filter, reduce，是函数式编程的核心。

四、函数组合

定义：将多个小函数组合成大函数，减少中间变量。

const compose = (f, g) => x => f(g(x));
const add2 = x => x + 2;
const multiply3 = x => x * 3;
const combined = compose(multiply3, add2);
console.log(combined(4)); // 输出 18

技巧：函数组合提高代码可读性和复用性。

五、柯里化（Currying）

定义：将一个多参数函数拆成单参数函数链。

const curry = fn => a => b => fn(a,b);
const addCurried = curry((a,b)=>a+b);
console.log(addCurried(2)(3)); // 输出 5

技巧：方便函数部分应用（partial application），增强灵活性。

六、不可变数据操作

  1. 使用对象/数组副本：

const arr = [1,2,3];
const newArr = [...arr, 4]; // 不修改原数组

  1. 使用库：如 Immutable.js 或 Immer 保持数据不可变

技巧：不可变数据可以避免状态管理混乱，尤其适合React/Vue等框架。

七、实战案例：函数式数组操作

const users = [
  {name:'Alice', age:25},
  {name:'Bob', age:30},
  {name:'Charlie', age:28}
];

const namesOver27 = users
  .filter(u => u.age > 27)
  .map(u => u.name);
console.log(namesOver27); // 输出 ['Bob','Charlie']

技巧：链式高阶函数让数组处理逻辑更清晰，无需for循环。

八、总结

通过本教程，你可以：

  • 掌握函数式编程核心概念：纯函数、高阶函数、函数组合、柯里化

  • 用函数式方法处理数组、对象和业务逻辑

  • 编写可读、可维护、易复用的 JS 代码

  • 为大型项目和框架开发打下函数式思维基础

相关资讯