17370845950

函数式编程是以数学函数为模型、强调不可变性与无副作用的范式；JavaScript 支持其思想但需避免修改原数据、依赖可变状态等陷阱，核心是用纯函数、reduce 和值不可变替代命令式操作。

函数式编程不是“用函数写代码”就完事，它是一套以数学函数为模型、强调不可变性与无副作用的编程范式。JavaScript 本身不是纯函数式语言，但支持其核心思想——关键在于你如何组织代码、避免哪些陷阱。

什么是纯函数？为什么 Array.prototype.map 是，而 Array.prototype.push 不是

纯函数必须满足两个条件：相同输入永远返回相同输出；不修改外部状态，也不依赖外部可变数据。

• map 是纯函数：它不改变原数组，只返回新数组，且对同一数组和回调，结果恒定
• push 不是纯函数：它直接修改原数组（产生副作用），返回值是新长度而非新数组，且多次调用结果不同
• 常见误用：const arr = [1,2]; arr.push(3); —— 这破坏了不可变性，后续逻辑可能因意外修改而失效
• 替代写法：[...arr, 3] 或 arr.concat(3)，保持原数组不变

如何用 reduce 替代遍历+累加+条件判断这类“命令式惯性”

很多开发者习惯先 for 循环、再 if 判断、最后手动 sum +=，这容易混入状态和分支逻辑。而 reduce 强制你把“初始值”“累积逻辑”“输入源”显式分离。

const numbers = [1, 2, 3, 4, 5];
// 命令式（易出错、难测试）
let sumEven = 0;
for (const n of numbers) {
  if (n % 2 === 0) sumEven += n;
}

// 函数式（单表达式、无中间变量、可组合）
const sumEven = numbers
  .filter(n => n % 2 === 0)
  .reduce((acc, n) => acc + n, 0);

• reduce 的第二个参数 0 很关键：省略时，若数组为空会报 Reduce of empty array with no initial value
• 链式调用中，filter 和

  

  map 都返回新数组，不污染原始数据
• 注意性能：多次遍历（如先 filter 再 reduce）在大数据量时不如单次 reduce，但可读性通常更重要

为什么 const 不等于“不可变”，以及如何真正实现数据不可变

const 只保证绑定不重新赋值，不阻止对象/数组内部被修改。函数式编程要求的是值的不可变性（immutability），不是变量声明方式。

• 错误示范：const user = { name: 'Alice' }; user.name = 'Bob'; —— 对象内容已被篡改
• 正确做法：用展开语法或函数式工具库（如 immer）生成新对象：{ ...user, name: 'Bob' }
• 嵌套结构要小心：{ ...user, profile: { ...user.profile, age: 30 } }，漏掉一层就会产生隐式共享
• 深层冻结（Object.freeze）仅浅层有效，且无法冻结已有可变引用，实际项目中很少直接使用

真正难点不在语法，而在思维切换：每次想“改一下这个对象”时，得本能地停下来问自己——我能不能构造一个新值？这个操作会不会让其他函数的行为变得不确定？