Functional Programming Visualization

函数式编程可视化实验室

通过 8 个交互式可视化模块，直观理解高阶函数、柯里化、不可变数据、惰性求值、函子单子、模式匹配、尾递归优化与纯函数。纯 HTML/CSS/JS + SVG，零外部依赖。

8交互模块
0外部依赖
SVG可视化引擎
MIT开源协议
MODULE 01

高阶函数 — 数据流管道

map / filter / reduce 组合形成数据流管道。函数作为一等公民，可以作为参数传递和返回值输出。观察数据如何流经每个变换阶段。

Pipeline 可视化
map · filter · reduce
6
点击 运行管道 查看数据流经 map(x => x * 2) → filter(x => x > 5) → reduce((a,b) => a + b, 0) 的完整过程。
输入元素
6
map 后
6
filter 后
—
reduce 结果
—
MODULE 02

柯里化 — 函数拆分与部分应用

将接受多个参数的函数转化为一系列接受单个参数的函数。每次应用一个参数，返回一个新函数等待剩余参数，直至所有参数就绪后求值。

Currying 过程
f(a,b,c) → f(a)(b)(c)
3
4
2
函数 f(a, b, c) = a * b + c 被柯里化为 f(a)(b)(c)。逐步应用参数，观察部分应用如何生成新的函数。
已应用参数
0 / 3
剩余参数
3
当前状态
等待
最终结果
—
MODULE 03

不可变数据 — 结构共享

持久化数据结构通过结构共享实现不可变性。修改操作不改变原数据，而是创建一个新版本，共享未变更的部分。旧版本始终保持可用。

持久化链表 — Structural Sharing
cons · shared nodes
7
每次执行 cons(v, list) 都会创建新链表版本，旧链表的节点被新链表共享。高亮节点表示结构共享的部分。
链表版本
1
总节点数
2
共享节点
0
内存节省
0%
MODULE 04

惰性求值 — Thunk 与 Stream

惰性求值延迟计算直到真正需要结果时才执行。Stream 由一个已求值的 head 和一个延迟的 tail（thunk）组成，实现无限序列与按需计算。

Lazy Stream 可视化
thunk · head/tail
1
无限自然数流 Stream(start, start+1, start+2, ...)。点击 Pull next 强制求值下一个 thunk。蓝色节点已求值，虚线节点为未求值的 thunk。
已求值
1
未求值
∞
当前值
1
求值次数
0
MODULE 05

函子与单子 — 链式调用

Functor 用 map 将函数提升到上下文中执行；Monad 用 flatMap（bind）处理嵌套上下文，实现链式组合。Applicative 介于两者之间，用 ap 应用上下文中的函数。

Functor · Applicative · Monad
map · ap · flatMap
选择类型后点击 执行下一步。观察值在上下文盒子中如何被变换：map 不脱离上下文，flatMap 处理嵌套并展平。
当前类型
Functor
链长度
0
当前值
Just(2)
嵌套层数
1
MODULE 06

模式匹配 — 代数数据类型

代数数据类型（ADT）通过 sum type 和 product type 组合数据。模式匹配对 ADT 的不同构造器进行解构绑定，实现类型安全的分支逻辑。

ADT 匹配可视化
Option · Result · List
选择 ADT 类型和构造器，点击 执行匹配。高亮显示匹配到的分支及解构绑定的变量。
总分支数
2
匹配分支
—
解构变量
—
穷尽性
✓
MODULE 07

尾递归优化 — 栈帧对比

普通递归每次调用压入新栈帧，深度过大时栈溢出。尾递归将递归调用置于函数末尾，编译器可复用当前栈帧（TCO），实现 O(1) 空间复杂度。

栈帧对比 — Normal vs TCO
stack frame · accumulator
6
计算 factorial(n)。左侧普通递归栈不断增长，右侧尾递归通过累加器保持栈帧恒定。factorial(n, acc=1) = n ≤ 0 ? acc : factorial(n-1, n*acc)。
普通栈深度
0
TCO 栈深度
0
当前步骤
0
结果
—
MODULE 08

纯函数与副作用 — 引用透明性

纯函数对相同输入始终返回相同输出，无副作用。引用透明性允许将函数调用替换为其返回值。副作用隔离将不纯操作推到系统边界。

引用透明性 — Pure vs Impure
referential transparency
纯函数 add(a,b)：相同输入必返回相同结果。非纯函数 addWithTax(a,b)：引入全局税率变量，结果依赖外部状态，破坏引用透明性。
调用次数
0
确定性
100%
副作用
0
引用透明
✓ Yes