JavaScript中函数式编程指避免共享状态、不修改输入、用纯函数组合逻辑、显式串联数据流；需用扩展运算符替代push/赋值，用pipe/compose表达转换链，并将副作用显式隔离。
JavaScript 本身不是纯函数式语言，但支持函数作为一等公民、高阶函数、闭包和不可变数据操作——这意味着你可以用函数式风格写代码，但必须主动约束自己，否则很容易退化为命令式混搭。
什么是“函数式编程”在 JS 中的实际表现
它不是指用 map 或 reduce 就算函数式，而是指：避免共享状态、不修改输入（即无副作用）、用纯函数组合逻辑、把数据流显式地串起来。一旦你写 arr.push(x) 或 obj.name = 'new'，函数就不再是纯的。
- 纯函数：给定相同输入，永远返回相同输出，且不读写外部变量或 DOM
- 不可变性：用
[...arr, newItem]替代arr.push()，用{ ...obj, key: newVal }替代obj.key = newVal - 函数组合：用
pipe(f, g, h)或f(g(h(x)))表达转换链，而不是中间变量赋值
map/filter/reduce 不是银弹，滥用反而破坏可读性
它们本意是声明“我要对每个元素做 X”“我要留下满足 Y 的项”，但嵌套过深或塞进复杂逻辑时，就变成难以调试的黑盒。比如：
data
.map(item => ({ ...item, total: item.a + item.b }))
.filter(item => item.total > 100)
.reduce((acc, item) => ({ ...acc, [item.id]: item }), {})
这段代码看似函数式，但如果 total 计算逻辑变复杂，或过滤条件依赖异步结果，就会立刻崩坏。此时应拆成命名函数：
立即学习“Java免费学习笔记（深入）”；
const addTotal = item => ({ ...item, total: calculateTotal(item) });
const isHighValue = item => item.total > 100;
const toIdMap = (acc, item) => ({ ...acc, [item.id]: item });
data.map(addTotal).filter(isHighValue).reduce(toIdMap, {});
- 每个函数职责单一、可单独测试
- 错误堆栈能准确定位到
calculateTotal而非匿名箭头函数 - 后续要加日志或缓存，只需改一个函数，不碰数据流主干
用 pipe 或 compose 显式表达数据流向
比起层层嵌套调用，pipe 更贴近“数据从左往右流”的直觉。注意：JS 没有原生 pipe，需手动实现或用 lodash/fp 等库。
const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);
const normalizeName = str => str.trim().toLowerCase();
const capitalizeFirst = str => str.charAt(0).toUpperCase() + str.slice(1);
const formatUserName = pipe(normalizeName, capitalizeFirst, str => `@${str}`);
formatUserName(" JOHN "); // "@John"
- 顺序即执行顺序，无需括号嵌套，也避免了
capitalizeFirst(normalizeName(...))这种反直觉写法 - 所有函数必须单参数，所以遇到多参函数（如
String.prototype.replace）得先curry或封装 - 调试时可在任意步骤插入
x => { console.log(x); return x; }，不影响主逻辑
真正难的不是语法，而是放弃“先改这个变量，再判断那个状态，最后更新 UI”的惯性思维；函数式组织方式强迫你把变化建模为输入→输出的映射，而现实中的副作用（API 请求、DOM 更新、随机数）必须被显式隔离和标记——比如用 IO 类包装异步操作，否则所谓函数式只是披着语法糖外衣的旧套路。
