JavaScript函数式编程实战：从纯函数、柯里化到工程化落地

如果你维护过一个超过两三万行的前端项目，大概率会逐渐产生一种感觉：代码不是被写崩的，而是被“改”崩的。今天加一个状态，明天补一个判断，后天修一个边界条件，最后函数之间互相影响，参数越来越多，分支越来越深，看到if嵌套就头疼。很多时候，问题本身并不复杂，复杂的是数据流在多个函数之间来回穿梭时，状态被悄悄修改，副作用散落在各处，导致调试时只能靠日志和运气。

这就是 JavaScript 函数式编程要解决的问题。它不是让你像写 Haskell 一样把每一行都变成数学表达式，也不是禁止for循环和let，而是一套可以落地的工程方法：用纯函数控制复杂度，用不可变数据减少状态混乱，用组合和柯里化替换大段命令式逻辑。这篇文章会从实际开发场景出发，解释函数式编程的核心概念，然后给出可以直接复制运行的代码示例，并说明在真实项目中哪些地方适合引入、哪些地方不要强行函数式。

读完这篇文章，你会得到一个清晰的技术判断：函数式编程适合解决什么样的问题，如何用map、filter、reduce、柯里化和函子来重构代码，以及在保持团队可维护性的前提下，渐进式引入函数式编程的正确姿势。

1. 函数式编程解决的是开发者的什么问题

很多开发者对函数式编程的第一印象是“高深”“学院派”“写起来绕”。这种印象不完全错误，但它忽略了最关键的一点：函数式编程首先是一套处理复杂性的方法论，只是恰好以函数为表达载体。

传统命令式代码的最大问题，是状态被隐式共享。举个例子，一个用户列表的过滤和分页逻辑，如果用命令式写法，通常会先声明一个let filteredUsers，然后在循环中不断修改它的值，再穿插统计、排序、格式化等操作。程序跑起来好像也没问题，但一旦需求变更，比如要在过滤逻辑中增加一个条件、或者将分页结果缓存起来，你就会发现：修改一个变量的副作用可能影响后续所有逻辑，排查问题的时候不知道是谁改了filteredUsers。

// 命令式风格：状态在过程中被反复修改 let filteredUsers = []; for (let i = 0; i < users.length; i++) { if (users[i].age >= 18) { filteredUsers.push(users[i]); } } filteredUsers.sort((a, b) => a.age - b.age); let result = {}; for (let i = 0; i < filteredUsers.length; i++) { result[filteredUsers[i].id] = filteredUsers[i].name; }

这段代码的问题不在于性能，而在于每一步都在改变共享状态。如果后续有另一个函数需要继续处理filteredUsers，它无法确定这个数组是否已经被其他地方改动过。在多人协作的场景中，这种隐式依赖是隐蔽 bug 的温床。

函数式编程换了一个思路：数据像流水一样通过函数，每个函数只负责一次变换，输入不变，输出确定，不对外部产生任何影响。同样逻辑用函数式写法，就是filter、sort、reduce的数据管道，每一步返回新值，不修改原始数据。这意味着你可以安全地复用、组合、测试每一段逻辑。

这里要强调一个观点：函数式编程不是银弹，但它确实精准地解决了 JavaScript 开发中一类高频问题——当状态和逻辑交织在一起时，代码的可预测性会急剧下降。采用函数式思维并不是为了让代码看起来“高级”，而是为了把“数据如何流动”这件事变得可见、可控、可测试。

2. JavaScript 函数式编程的核心概念

在动手写代码之前，我们先把几个高频概念理清楚。 JavaScript 开发者即使没有系统接触过函数式编程，也一定用过Array.prototype.map，这就是函数式编程在语言层面的渗透，只是很多人没有意识到。

2.1 纯函数

纯函数是函数式编程的地基。它的定义非常简单：

• 相同的输入，永远得到相同的输出。
• 执行过程中不产生任何可观察的副作用。

副作用包括但不限于：修改外部变量、调用console.log、操作 DOM、发送网络请求、写入 localStorage、修改函数参数对象。

// 非纯函数：依赖外部变量 let taxRate = 0.1; function getPriceWithTax(price) { return price + price * taxRate; }

// 非纯函数：修改了外部状态 let total = 0; function addToTotal(amount) { total += amount; return total; }

// 纯函数：不依赖外部状态，不改变外部变量 function getPriceWithTax(price, taxRate) { return price + price * taxRate; }

纯函数之所以重要，是因为它可以放心复用：调用它不需要考虑当前上下文，测试它不需要 mock 全局状态，组合它不会产生意外的联动效果。在大型项目中，纯函数比例的提升，直接意味着代码可预测性的提升。

2.2 不可变性

不可变性要求数据一旦创建就不能被修改。要更新数据时，不是直接改原对象，而是创建一个新的对象或数组。

JavaScript 中有两个容易出问题的操作：push和直接给对象属性赋值。这两个操作都修改了原数据，在函数式编程中应该尽量避免，改用concat或展开运算符创建新数据。

// 错误示范：修改了原数组 const arr = [1, 2, 3]; arr.push(4); // 正确示范：创建新数组 const arr2 = [1, 2, 3]; const newArr = [...arr2, 4];

不可变性的收益在 React 或 Vue 这类依赖状态对比的框架中体现得尤其明显，因为只有数据引用发生变化，框架才能准确判断“数据确实更新了”，从而触发视图更新。

2.3 副作用

副作用不是一个绝对禁止的东西。一个前端应用不可能不操作 DOM，不可能不发送请求，不可能不写日志。函数式编程的态度是：将副作用隔离到特定区域，让核心业务逻辑保持纯净。

理解这个边界很重要。有人说“函数式编程就是没有副作用”，这是误解。更准确的说法是：副作用应该被集中管理、显式标记，而不是散落在业务逻辑的每个角落。

3. JavaScript 为什么适合函数式编程

Haskell、Scala、Elm 是典型的函数式语言，但 JavaScript 的函数式能力常常被低估。事实上，JavaScript 是主流后端和前端语言中函数式特性最“顺手”的语言之一。

首先，函数在 JavaScript 中是一等公民。这意味着函数可以像普通值一样被赋值给变量、作为参数传递、作为返回值返回。这是高阶函数和函数组合的前提。很多后端语言直到 Java 8 才引入 Lambda 表达式，而 JavaScript 从一开始就支持。

// 函数作为参数 function double(x) { return x * 2; } const result = [1, 2, 3].map(double); // 函数作为返回值 function createMultiplier(multiplier) { return function (value) { return value * multiplier; }; } const double2 = createMultiplier(2); console.log(double2(5)); // 10

其次，JavaScript 的数组原生支持map、filter、reduce等高阶函数。这些方法本身就体现了函数式编程的核心思想：声明你要做什么，而不是一步步说明怎么做。

第三，对象展开运算符、解构赋值、箭头函数等 ES6+ 语法，让不可变更新和函数表达变得更加简洁，减少了函数式编程的样板代码。

最后，JavaScript 的生态对函数式编程非常友好。React 组件本身就是纯函数与副作用的组合；Redux 的核心概念是纯函数 reducer；Lodash/fp、Ramda 提供了大量函数式工具函数；RxJS 更是将函数式响应式编程应用到了极致。

因此，JavaScript 开发者学习函数式编程，不需要额外安装任何工具，不需要切换到一门新语言，直接在现有代码中就能逐步实践。

4. 环境准备与前置条件

本文的示例将全部使用原生 JavaScript 编写，不依赖任何框架或第三方库。

开发环境只需要满足以下条件之一：

• Node.js 环境，版本建议 14 及以上，本文示例不涉及高版本专属 API，低版本也能运行。
• 浏览器控制台，打开任意网页后按 F12，切换到 Console 标签页即可。
• 在线运行平台，比如各类支持 JavaScript 的 Playground。

由于本文重点在于函数式编程的思想和方法，所用的语法特性主要是 ES6+ 的箭头函数、展开运算符、解构赋值等。这些特性在 2022 年以后的浏览器和 Node.js 环境中都已经普遍支持。

如果你希望在本地创建一个小项目来验证示例，可以按照下面的方式初始化。

mkdir functional-demo cd functional-demo npm init -y

然后在项目根目录创建一个demo.js文件，直接使用node demo.js运行即可。这里不需要安装任何依赖。

5. 从命令式到函数式：一个完整重构示例

理论概念说再多，不如看一个实际案例。下面我们模拟一个用户管理场景：从用户列表中筛选出成年人，按年龄降序排序，并提取用户名列表。

5.1 命令式写法

const users = [ { id: 1, name: 'Alice', age: 25 }, { id: 2, name: 'Bob', age: 17 }, { id: 3, name: 'Carol', age: 20 }, { id: 4, name: 'Dave', age: 30 }, { id: 5, name: 'Eve', age: 16 } ]; // 命令式风格 const adultNames = []; for (let i = 0; i < users.length; i++) { if (users[i].age >= 18) { adultNames.push(users[i].name); } } adultNames.sort((a, b) => { const nameA = users.find(u => u.name === a); const nameB = users.find(u => u.name === b); return nameB.age - nameA.age; }); console.log(adultNames);

这段命令式代码有几个问题：

1. adultNames数组被反复修改，很难追踪每一步的状态。
2. for循环中同时做了“过滤”和“收集”两件事，逻辑不够直观。
3. 排序时需要反向查找用户对象，因为前面的逻辑把数据简化成了字符串数组，丢失了年龄信息。

5.2 函数式写法

函数式思路是：把数据看作一条流水线，每一步用一个纯函数处理。

const users = [ { id: 1, name: 'Alice', age: 25 }, { id: 2, name: 'Bob', age: 17 }, { id: 3, name: 'Carol', age: 20 }, { id: 4, name: 'Dave', age: 30 }, { id: 5, name: 'Eve', age: 16 } ]; // 函数式风格：每一步返回新数据 const adultNames = users .filter(user => user.age >= 18) // 过滤 .sort((a, b) => b.age - a.age) // 排序 .map(user => user.name); // 提取 console.log(adultNames); // 输出: [ 'Dave', 'Alice', 'Carol' ]

对比两段代码，函数式版本的优点非常明显：

• 每一步只做一件事。filter负责筛选，sort负责排序，map负责提取。
• 不修改变量。每次方法调用返回新的数组，原始users数据保持不变。
• 逻辑自上而下阅读。代码和人解决问题的思维方式一致。

在这个例子中，函数式编程的好处可能还只是“代码更简洁”。但在更复杂的业务场景中，这种数据管道式的写法会大幅降低认知负担。

6. 高阶函数：map、filter、reduce 深度解析

map、filter、reduce是 JavaScript 函数式编程中最基础、最实用的三个高阶函数。很多开发者只是“会用”，但并没有真正理解它们的设计意图。

6.1 map 与 filter

map的核心语义是“一一映射”。它对数组中的每个元素执行一个变换函数，返回一个长度相等的新数组。

const numbers = [1, 2, 3, 4]; const doubled = numbers.map(n => n * 2); console.log(doubled); // [2, 4, 6, 8]

filter的核心语义是“筛选”。它根据断言函数返回的布尔值决定每个元素去留，返回一个新数组。

const numbers = [1, 2, 3, 4, 5, 6]; const evenNumbers = numbers.filter(n => n % 2 === 0); console.log(evenNumbers); // [2, 4, 6]

这里要强调一个新手常犯的错误：map和filter都返回新数组，不会修改原数组。因此，如果后续代码还要使用处理前的结果，原数组依然可用，这是很大的一个心智优势。

6.2 reduce：比 map 和 filter 更底层的工具

reduce的语义是“归约”：将整个数组折叠成一个值（也可以是对象或新数组）。它的回调函数接收两个参数：累加器acc和当前元素current。

const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((acc, current) => acc + current, 0); console.log(sum); // 15

reduce能做的事情远不止求和。实际上，map和filter都可以用reduce实现：

// 用 reduce 实现 map function mapWithReduce(arr, fn) { return arr.reduce((acc, item) => { acc.push(fn(item)); return acc; }, []); } // 用 reduce 实现 filter function filterWithReduce(arr, fn) { return arr.reduce((acc, item) => { if (fn(item)) { acc.push(item); } return acc; }, []); } console.log(mapWithReduce([1, 2, 3], n => n * 10)); // [10, 20, 30] console.log(filterWithReduce([1, 2, 3, 4], n => n % 2 === 0)); // [2, 4]

理解这层关系后，你就能意识到：reduce是一个更底层、更通用的工具，map和filter只是它最常见的两个特化场景。

在实际项目中，我建议优先使用map和filter，因为它们语义更清晰。只有当你想把数组转换成对象，或者需要更复杂的聚合逻辑时，才直接使用reduce。

6.3 方法链与管道

将多个高阶函数串联起来的写法叫方法链。这种写法的可读性非常高，因为整个数据处理流程看起来像一条流水线。

const orders = [ { id: 1, price: 100, paid: true }, { id: 2, price: 50, paid: false }, { id: 3, price: 200, paid: true } ]; const totalPaidAmount = orders .filter(order => order.paid) // 只看已支付的订单 .map(order => order.price) // 提取价格 .reduce((acc, price) => acc + price, 0); // 求和 console.log(totalPaidAmount); // 300

需要注意，方法链对数组有效，因为每个方法都返回新数组。但在 JavaScript 中，map方法会对稀疏数组的特殊行为、以及链式调用中每个中间数组都会创建新数组的性能问题，在实际中通常不是瓶颈，在超大数组场景下才需要考虑优化，正常业务无需过度担忧。

7. 柯里化与函数组合：把函数当作积木

柯里化和函数组合是函数式编程中“组合小函数成大逻辑”的主要手段。

7.1 柯里化

柯里化是把一个多参数函数转换成一系列单参数函数的过程。例如add(a, b, c)变成add(a)(b)(c)。

// 普通函数 function add(a, b, c) { return a + b + c; } console.log(add(1, 2, 3)); // 6 // 柯里化函数 function curryAdd(a) { return function (b) { return function (c) { return a + b + c; }; }; } console.log(curryAdd(1)(2)(3)); // 6

柯里化的实际意义在于参数复用。如果你经常需要计算某个固定税率下的价格，可以把固定参数先传进去，得到一个新的专用函数。

function createTaxCalculator(taxRate) { return function (price) { return price + price * taxRate; }; } const standardTaxCalculator = createTaxCalculator(0.13); const discountTaxCalculator = createTaxCalculator(0.06); console.log(standardTaxCalculator(100)); // 113 console.log(discountTaxCalculator(100)); // 106

每次都手写嵌套函数很麻烦，我们可以封装一个通用的curry工具函数：

function curry(fn) { return function curried(...args) { if (args.length >= fn.length) { return fn.apply(this, args); } return function (...nextArgs) { return curried.apply(this, args.concat(nextArgs)); }; }; } function add(a, b, c) { return a + b + c; } const curriedAdd = curry(add); console.log(curriedAdd(1)(2)(3)); // 6 console.log(curriedAdd(1, 2)(3)); // 6 console.log(curriedAdd(1)(2, 3)); // 6

7.2 函数组合

函数组合的核心思想是：把多个函数首尾相接，让数据依次通过它们。数学上的表示是compose(f, g) = x => f(g(x))，即先执行g，再执行f。

// 组合函数：从右到左执行 function compose(...fns) { return function (initialValue) { return fns.reduceRight((acc, fn) => fn(acc), initialValue); }; } // 从左到右执行则叫 pipe，更符合阅读习惯 function pipe(...fns) { return function (initialValue) { return fns.reduce((acc, fn) => fn(acc), initialValue); }; } const addOne = x => x + 1; const double = x => x * 2; const square = x => x * x; const calculate = pipe(addOne, double, square); console.log(calculate(3)); // 先执行 addOne: 4 // 再执行 double: 8 // 最后执行 square: 64

用pipe改写前面用户列表的示例，可以让数据处理逻辑更加模块化：

const filterAdults = users => users.filter(user => user.age >= 18); const sortByAgeDesc = users => [...users].sort((a, b) => b.age - a.age); const extractNames = users => users.map(user => user.name); const getAdultNames = pipe(filterAdults, sortByAgeDesc, extractNames); const users = [ { id: 1, name: 'Alice', age: 25 }, { id: 2, name: 'Bob', age: 17 }, { id: 3, name: 'Carol', age: 20 } ]; console.log(getAdultNames(users)); // [ 'Alice', 'Carol' ]

这里有一个细节：sortByAgeDesc内部使用了[...users].sort(...)，因为sort是原地操作，会修改原数组。在函数式编程中，尽量避免修改输入参数，所以先复制再排序是一个好习惯。

7.3 函数组合与传统链式调用的差异

你可能觉得函数组合和方法链很像，核心区别在于：

• 方法链是对象方法的串联，数据隐式地存在于this中。
• 函数组合是独立函数的串联，数据作为参数显式传递。

函数组合复用性更强，因为每个单函数都可以独立导入和使用。方法链则更局限于某个特定类型的数组或对象。在大型项目中，将业务逻辑拆成独立的纯函数并用pipe组合，往往比层层嵌套的方法链更易维护。

8. 函子与 Maybe：用函数式方式处理空值和错误

前端业务中，空值和异常处理是非常频繁出现的痛点。函数式编程提供了一种优雅的解决思路：函子。

8.1 什么是函子

简单理解，函子是一个容器，它内部包装了一个值，并实现了map方法。map方法接收一个函数，对这个容器内的值进行变换，然后返回一个新的函子容器。

class Box { constructor(value) { this.value = value; } // map 接收一个函数，对容器内的值进行变换 map(fn) { return new Box(fn(this.value)); } // 取出容器内的值 getValue() { return this.value; } } const box = new Box(5); const result = box.map(x => x + 1).map(x => x * 2); console.log(result.getValue()); // 12

这里的关键是：你不需要取出来再操作，而是让函数在容器内部自动应用。这种模式给“流程控制”提供了极大的灵活性。

8.2 Maybe 函子：解决空值问题

在日常开发中，我们经常遇到这样的代码：

const user = getUser(); let city = '未知'; if (user !== null && user !== undefined) { const address = user.address; if (address !== null && address !== undefined) { city = address.city; } }

这是一种防御式编程，但嵌套层级一多，可读性会很差。Maybe 函子可以优雅地解决这个问题。

Maybe 函子有两个子类：Just表示容器中有值，Nothing表示容器为空。任何变换作用于Nothing时都直接返回Nothing，不会报错。

class Maybe { static of(value) { if (value === null || value === undefined) { return new Nothing(); } return new Just(value); } } class Just extends Maybe { constructor(value) { super(); this.value = value; } map(fn) { return Maybe.of(fn(this.value)); } getValueOr(defaultValue) { return this.value; } } class Nothing extends Maybe { constructor() { super(); } map(fn) { return this; // 空值继续传播，不执行 fn } getValueOr(defaultValue) { return defaultValue; } }

使用示例：

const user = { name: 'Alice', address: { city: 'Beijing' } }; const city = Maybe.of(user) .map(u => u.address) .map(address => address.city) .getValueOr('未知'); console.log(city); // Beijing // 如果 user 没有 address const user2 = { name: 'Bob' }; const city2 = Maybe.of(user2) .map(u => u.address) .map(address => address.city) .getValueOr('未知'); console.log(city2); // 未知，不会抛 TypeError

相比传统if判断，Maybe 函子将“空值判断”从业务逻辑中剥离出来，让链式操作看起来更像是正常的数据流动。如果你的团队已经使用lodash的_.get或可选链?.，思想上是相通的，但是函子提供了一种更统一、更可组合的方式。

8.3 Either 函子：处理错误分支

与 Maybe 类似，Either 函子有Left和Right两个子类。通常Right表示正常值，Left表示错误信息。这种设计比try...catch更优雅的功能在于：错误信息可以像普通值一样在数据管道中传递，而不是打断程序执行。

class Either { static right(value) { return new Right(value); } static left(value) { return new Left(value); } } class Right extends Either { constructor(value) { super(); this.value = value; } map(fn) { return Either.right(fn(this.value)); } fold(leftFn, rightFn) { return rightFn(this.value); } } class Left extends Either { constructor(value) { super(); this.value = value; } map(fn) { return this; // 错误分支直接跳过 } fold(leftFn, rightFn) { return leftFn(this.value); } } function parseJSON(jsonString) { try { return Either.right(JSON.parse(jsonString)); } catch (e) { return Either.left({ message: 'JSON 解析失败', detail: e.message }); } } const result1 = parseJSON('{"name":"Alice"}') .map(data => data.name) .fold( error => `错误: ${error.message}`, name => `姓名: ${name}` ); const result2 = parseJSON('invalid json') .map(data => data.name) .fold( error => `错误: ${error.message}`, name => `姓名: ${name}` ); console.log(result1); // 姓名: Alice console.log(result2); // 错误: JSON 解析失败

9. 在真实 JavaScript 项目中落地函数式编程

概念学会了，代码也能跑通了，接下来最重要的问题是：在真实项目中，函数式编程应该怎么落地？哪些地方适合用，哪些地方不要强行用？

9.1 适合函数式编程的场景

• 数据处理管道：列表筛选、排序、分组、聚合、转换。这类逻辑最容易用map、filter、reduce和pipe抽象。
• 状态管理：Redux 的 reducer 必须是纯函数，这本身就是函数式编程思想的应用。
• 工具函数库：专为复用而生的工具函数，非常适合写成纯函数，便于测试和组合。
• 格式化逻辑：日期格式化、金额格式化、字符串处理等，输入输出明确，是纯函数的最佳应用场景。
• 复杂表单校验：校验逻辑可以拆成一个个小谓词函数，再组合成完整的校验规则。

9.2 不适合或者需要谨慎使用的场景

• IO 密集操作：不能简单地把fetch、文件读写包装成纯函数，因为网络请求天然有副作用。但这不等于“不能用函数式思路”，而是要把副作用隔离到边界层。
• 性能极端敏感的代码：不可变数据的频繁销毁和创建会带来一定的内存和 GC 开销。在大量渲染或高频计算场景中，需要先做性能测试再决定是否使用不可变模式。
• 团队中没有函数式编程共识的模块：如果你在代码库中引入了一种只有自己熟悉的风格，会显著增加团队协作成本。渐进式引入比一刀切改造更实际。

9.3 渐进式落地策略

比较稳妥的落地方式是反向推进：

1. 先从工具函数开始：把项目中明显的纯逻辑抽取成独立函数。
2. 在数据分析模块中引入map、filter、reduce。
3. 对空值判断较多的地方，引入 Maybe/可选链，两者并不冲突。
4. 再在 reducer 或表单校验逻辑中使用管道组合。

这样做的理由是：函数式编程是思维方式，不是“全有或全无”的技术栈。即使只使用了map和纯函数，你的代码也已经变得更容易测试和维护了。

9.4 与 React/Vue 框架的关系

React 本身和函数式编程关系紧密。函数组件是纯函数：接收 props 返回 JSX。副作用（事件处理、请求）被放在useEffect或事件回调中。这种设计天然把纯函数和副作用分离了。

Vue 3 的 Composition API 也鼓励将业务逻辑拆分为独立的组合式函数，这些函数同样可以遵循纯函数原则。虽然不像 React 那样彻底函数式，但思想是通用的。

如果理解了这个，你就会发现函数式编程不是独立于框架之外的知识，而是理解现代前端框架设计的重要辅助工具。

10. 常见问题与排查思路

10.1 常见问题列表

10.2 this 指向问题

函数式编程中大量使用回调函数和独立函数，this的指向问题会被放大。一个经典的错误是：

const calculator = { base: 10, add: function (numbers) { return numbers.map(function (n) { return this.base + n; // this 指向 window / undefined }); } }; console.log(calculator.add([1, 2, 3])); // 浏览器环境会报错：Cannot read properties of undefined (reading 'base')

解决方案很简单：使用箭头函数，它不绑定自己的this，而是继承外层作用域的this：

const calculator = { base: 10, add: function (numbers) { return numbers.map(n => this.base + n); } }; console.log(calculator.add([1, 2, 3])); // [11, 12, 13]

如果你正在阅读旧代码，可能会看到var self = this或者.bind(this)的写法，现代代码推荐直接用箭头函数。

10.3 调试建议

函数式代码的调试有一个天然的劣势：管道中的每一步都产生新数据，如果想观察中间值，传统方式可能需要在代码中插入console.log。这在管道中麻烦一些，但也有对应的技巧。

可以临时在管道中插入一个“偷看”函数：

const trace = label => value => { console.log(`${label}:`, value); return value; }; const result = [1, 2, 3] .map(x => x * 2) .map(trace('乘以2之后')) .filter(x => x > 2) .map(trace('过滤之后')) .reduce((acc, x) => acc + x, 0); console.log('最终结果:', result);

这里的trace函数是一个纯函数，因为它返回输入值不变，只是打印步骤增加可观测性。调试完成后移除即可。

11. 最佳实践与工程建议

结合现实项目经验，我给出下面这些具体建议，它们是踩过坑之后沉淀下来的判断，可以作为团队代码评审时的参考标准。

11.1 尽量使用纯函数，但不要强迫所有函数都纯

业务开发中，总会遇到需要读取当前时间、生成随机数、调用 API 的场景。这些函数不可能纯。正确的做法是：将不纯的来源集中在边界层。比如在点击事件回调中调用 API 获取数据，拿到数据后交给纯函数处理，再交给渲染函数展示。这样核心业务逻辑保持可测试，唯一需要 mock 的是边界层。

11.2 优先选择不可变数据

在修改数组时，优先使用：

• map、filter、reduce代替for循环加push。
• 展开运算符代替concat。
• 对象展开代替Object.assign。
• 对于深层嵌套数据，考虑使用immer这类库辅助。

注意：数组的sort方法会原地修改数组，在函数式封装中务必先复制再排序，避免“纯函数污染了输入数据”的 bug。

11.3 命名要体现函数式意图

纯函数命名建议使用动词或动词短语，比如filterAdults、formatDate、calculateTotal。当函数接收的数据类型固定时，可以在命名中体现处理方向。从旧代码中抽取纯函数时，不要保留原来的process、handle这类模糊命名，那是命令式思维的习惯，会让后续使用者无法判断函数是否有副作用。

11.4 组合优于继承，组合优于大函数

如果发现一个函数超过 50 行，并且内部有多段相对独立的逻辑，就可以考虑拆分成若干小函数，再用pipe组合。拆分后的每个小函数都能独立测试。这是函数式编程对代码可维护性的最直接贡献。

11.5 写测试，纯函数是最好测的代码

纯函数不用 mock，不用准备复杂环境，只要给定输入就能断言输出。建议把纯函数集中在utils或services目录，并用单元测试覆盖边界条件。测试框架使用 Jest 或 Vitest 都可以。

// utils/tax.js export function calculateTax(price, rate) { if (price < 0) return 0; if (rate < 0 || rate > 1) throw new Error('Invalid tax rate'); return Number((price * rate).toFixed(2)); } // __tests__/tax.test.js import { calculateTax } from '../utils/tax'; test('计算正常税率', () => { expect(calculateTax(100, 0.13)).toBe(13); }); test('价格为负数时返回 0', () => { expect(calculateTax(-10, 0.13)).toBe(0); });

11.6 不要过度设计

函数式编程工具库（Ramda、lodash/fp）提供了大量工具函数，但并不是用得越多越好。一个判断标准是：如果你引入柯里化、函子等概念后，团队其他成员需要看文档才能理解这段代码，就说明已经过度设计了。学习函数式编程的根本目的是让代码更简单，而不是更抽象。

12. 写在最后

JavaScript 函数式编程并不是一个高不可攀的理论体系，它就在map、filter、reduce这些常用方法里，在 React 组件的函数签名里，在每一次“不修改传入参数”的编码习惯里。真正重要的是理解它背后的思维转变：从“如何一步步修改状态”到“数据如何经过函数流动”。

对于刚接触函数式编程的开发者，我的建议是先从今天这篇文章中的小技巧开始：写纯函数，用map和filter替换for，在返回值中显式表达数据转换。这些改变不需要引入任何库，不会影响项目构建，却能让你逐渐建立起函数式编程的直觉。等这些成为习惯后，再去学习函子、Monad 等更抽象的概念，会轻松很多。

函数式编程不会让代码瞬间变得完美，但它提供了一套经过验证的复杂度治理方法论，值得每个 JavaScript 开发者认真实践。如果你在阅读过程中有疑问，或者在实际项目中遇到了函数式编程相关的坑，欢迎在评论区留言讨论。