javascript中函数式编程如何实践_常用高阶函数有哪些

幻影之瞳

幻影之瞳

2025-12-25

419人浏览

原创

函数式编程在javascript中强调纯函数、不可变数据和高阶函数,而非彻底抛弃命令式;核心是将函数作为一等公民,通过map/filter/reduce等实现可预测、易组合、低副作用的逻辑。

javascript中函数式编程如何实践_常用高阶函数有哪些

函数式编程在 JavaScript 中不是要完全抛弃命令式写法,而是用更可预测、更易组合、更少副作用的方式组织逻辑。核心是把函数当“一等公民”:能赋值、传参、返回、闭包封装。实践的关键不在于套概念,而在于习惯用纯函数、避免修改原数据、用高阶函数抽象重复逻辑。

从日常操作开始写纯函数

纯函数指:相同输入永远得相同输出,且不修改外部状态或参数。比如数组的 mapfilterreduce 默认不改原数组,但你自己写的函数容易“越界”。

常见反模式:
- 直接 push / splice 原数组
- 在函数里改传入的对象属性
- 依赖或修改全局变量 / Date.now() / Math.random()

改进写法示例:

// ❌ 不纯:修改了原对象
function addPrice(item) {
  item.total = item.price * item.qty;
  return item;
}
<p>// ✅ 纯:返回新对象,原数据不变
const addPrice = ({ price, qty, ...rest }) => ({
...rest,
price,
qty,
total: price * qty
});</p>

必会的 5 个高频高阶函数

高阶函数 = 接收函数作为参数,或返回函数的函数。JS 数组原型上已内置多个,用好它们能大幅减少 for 循环和临时变量。

ApiPost接口调试与文档生成工具
ApiPost接口调试与文档生成工具

ApiPost是一个支持团队协作,支持模拟POST、GET、PUT等常见请求,并可直接生成文档的API调试、管理工具,ApiPost是后台接口开发者或前端、接口测试人员的工作必备工具。快速生成、一键导出API文档。感兴趣的朋友快来下载吧。软件说明ApiPost官方版是一款十分出色的接口调试与文档生成工具,ApiPost官方版界面美观大方,功能强劲实用,支持团队协作,支持模拟POST、GET、PUT等常见请求,是后台接口开发者或前端、接口测试人员的工作必备工具。软件特色更方便支持接口调试的同时快速生成、一键

下载
  • map:对每个元素做转换,返回等长新数组。适合字段映射、格式化、创建新结构。
  • filter:返回满足条件的元素组成的新数组。注意它不改变原顺序,也不跳过空位。
  • reduce:最灵活的聚合工具。累计器(acc)初始值建议显式传入,避免隐式类型错误。
  • findfindIndex:替代 for + break 的语义化写法,找到第一个即停,不遍历全量。
  • some / every:代替手写循环判断“是否存在”或“是否全部满足”,返回布尔值,语义清晰。

组合与柯里化让逻辑更复用

直接写 arr.map(x => x * 2).filter(x => x > 10) 没问题,但业务变复杂后,把逻辑拆成小函数再组合更可控。

例如柯里化一个通用 filter 工厂:

const byField = (key, value) => item => item[key] === value;
const byStatus = byField('status', 'active');
users.filter(byStatus); // 清晰、可复用、易测试

再比如用 reduce 实现管道(pipe)简化多步转换:

const pipe = (...fns) => (x) => fns.reduce((v, f) => f(v), x);
const normalize = s => s.trim().toLowerCase();
const capitalize = s => s.charAt(0).toUpperCase() + s.slice(1);
const formatName = pipe(normalize, capitalize);
formatName("  JOHN  ") // "John"

避开陷阱:不是所有场景都适合函数式

函数式优势明显,但别硬套:

  • 频繁更新大型数组/对象时,反复生成新副本可能影响性能(可结合 Immutable.js 或结构共享库)
  • 异步流程中,Promise.then 天然函数式,但过度嵌套 .then().then().then() 可读性反而下降,此时 async/await 更直白
  • DOM 操作、Canvas 绘图、WebGL 等本身带状态和副作用,函数式只适合封装“计算部分”,而非取代整个流程

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关专题

更多
java中break的作用
java中break的作用

本专题整合了java中break的用法教程,阅读专题下面的文章了解更多详细内容。

2025.10.15

939

7

java break和continue
java break和continue

本专题整合了java break和continue的区别相关内容,阅读专题下面的文章了解更多详细内容。

2025.10.24

403

6

全局变量怎么定义
全局变量怎么定义

本专题整合了全局变量相关内容,阅读专题下面的文章了解更多详细内容。

2025.09.18

1065

12

python 全局变量
python 全局变量

本专题整合了python中全局变量定义相关教程,阅读专题下面的文章了解更多详细内容。

2025.09.18

584

13

c++ 全局变量
c++ 全局变量

本专题整合了c++全局变量的使用、定义、作用域等等内容,阅读专题下面的文章了解更多详细内容。

2026.03.17

76

17

go语言闭包相关教程大全
go语言闭包相关教程大全

本专题整合了go语言闭包相关数据,阅读专题下面的文章了解更多相关内容。

2025.07.29

1715

19

golang map内存释放
golang map内存释放

本专题整合了golang map内存相关教程,阅读专题下面的文章了解更多相关内容。

2025.09.05

130

5

golang map相关教程
golang map相关教程

本专题整合了golang map相关教程,阅读专题下面的文章了解更多详细内容。

2025.11.16

223

7

golang map原理
golang map原理

本专题整合了golang map相关内容,阅读专题下面的文章了解更多详细内容。

2025.11.17

350

20

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 11.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.1万人学习