boxmoe_header_banner_img

Hello! 欢迎来到悠悠畅享网！

POST
文章导读
前端教学

JS如何实现函数式数据结构？纯函数实现

avatar
站长 2025年8月17日 2
0 评论

在javascript中实现函数式数据结构的核心是通过不可变性和纯函数确保每次操作都返回新数据副本而不修改原数据，具体可通过原生方法如map、filter、concat、展开运算符及object.assign实现数组和对象的不可变操作，对于复杂结构可使用类或工厂函数构建自定义不可变数据结构如不可变栈或链表，这些结构遵循写时复制原则并利用结构共享优化性能，尽管存在内存和cpu开销，但其在代码可预测性、调试便利性、并发安全和测试简化方面的优势使其适用于大多数场景，开发者还可借助immutable.js或immer等第三方库提升开发效率，其中immutable.js提供真正的不可变数据结构但需学习新api，而immer通过proxy实现类似可变语法的不可变更新，更易集成且开发体验更佳，最终选择应基于项目需求、团队熟悉度和性能要求综合权衡。

JS如何实现函数式数据结构？纯函数实现

在JavaScript中实现函数式数据结构，核心在于不可变性（Immutability）和纯函数（Pure Functions）的应用。这意味着你操作数据时，不是修改原始数据，而是总是返回一个新的数据副本，且这个过程不产生任何副作用。它让你的代码更可预测、易于测试和并行处理。

解决方案

要实现函数式数据结构，我们通常会遵循“写时复制”（Copy-on-Write）的原则。JavaScript本身并没有内置真正的不可变数据结构，但它提供了很多方法和语法糖，可以帮助我们模拟或构建它们。

最直接的方法是利用JavaScript数组和对象的一些原生方法。例如，对于数组，

map

、

filter

、

reduce

、

slice

、

concat

、以及ES6的展开运算符（

...

）都是创建新数组而不是修改原数组的纯函数操作。

// 传统命令式，修改原数组 const arr1 = [1, 2, 3]; arr1.push(4); // arr1 现在是 [1, 2, 3, 4]  // 函数式方法，返回新数组 const arr2 = [1, 2, 3]; const newArr2 = arr2.concat(4); // newArr2 是 [1, 2, 3, 4]，arr2 仍然是 [1, 2, 3] const newArr3 = [...arr2, 4]; // newArr3 也是 [1, 2, 3, 4]，arr2 不变  // 对于对象，类似地使用展开运算符或 Object.assign const obj1 = { a: 1, b: 2 }; const newObj1 = { ...obj1, c: 3 }; // newObj1 是 { a: 1, b: 2, c: 3 }，obj1 不变 const newObj2 = Object.assign({}, obj1, { d: 4 }); // newObj2 是 { a: 1, b: 2, d: 4 }，obj1 不变

当你需要更复杂的数据结构，比如链表、树或栈时，也可以通过类或工厂函数来构建。关键在于，任何修改操作都必须返回一个新的实例，而不是修改当前实例。

// 示例：一个简单的函数式链表节点 class LinkedListNode {   constructor(value, next = null) {     this.value = value;     this.next = next;   }    // 添加元素到链表头部，返回新链表   prepend(value) {     return new LinkedListNode(value, this);   }    // 假设我们想“修改”某个节点的值，实际上是构建一个新的链表直到那个点   // 这会变得复杂，通常我们不会在链表中间进行“修改”，而是重建   // 或者在遍历时进行转换 }  // 创建链表 const node3 = new LinkedListNode(3); const node2 = node3.prepend(2); // node2 是 (2 -> 3) const node1 = node2.prepend(1); // node1 是 (1 -> 2 -> 3)  // 此时 node3, node2, node1 都是独立的，node3 仍然是 (3)，node2 仍然是 (2 -> 3) // 这种结构共享（Structural Sharing）是函数式数据结构性能优化的一个关键点。

为什么要在JavaScript中采用函数式数据结构？

采用函数式数据结构，尤其是在JavaScript这种多范式语言中，它带来的好处远不止代码看起来“酷”那么简单。我个人觉得，最直观的感受就是状态管理的简化。当你数据是不可变的，你就不需要担心某个函数在不知不觉中修改了你正在依赖的数据。这大大减少了调试的难度，因为你可以更确信数据在某个特定时间点就是那个样子。

想象一下，在一个大型单页应用中，数据流错综复杂。如果每个组件都能随意修改全局状态或传递下来的props，那简直是噩梦。函数式数据结构强制你通过明确的转换来产生新状态，这让数据流变得清晰可见，每次状态更新都是一个可追溯的事件。

此外，并发安全也是一个重要考量。虽然JavaScript在浏览器环境中是单线程的（Web Workers除外），但在Node.js后端或将来多线程JS的场景下，不可变数据结构天生就是线程安全的，因为它们不会被并发修改。你不需要加锁或担心竞态条件。

最后，测试的便利性不容忽视。纯函数和不可变数据结构使得单元测试变得异常简单。给定相同的输入，你总是会得到相同的输出，且没有外部副作用。这意味着你的测试用例可以更少，更容易编写，并且更可靠。

JavaScript原生数据结构如何实现纯函数操作？

JavaScript的原生数据结构，如数组和对象，本身是可变的。但JavaScript生态提供了一系列方法和语法，巧妙地让它们“表现得”像函数式数据结构一样。这是一种妥协，也是一种实用主义的体现。

对于数组，我们最常用的是：

  • map()

    : 对数组的每个元素执行一个函数，并返回一个新数组，其中包含每个调用的结果。原始数组保持不变。

  • filter()

    : 创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。原始数组保持不变。

  • reduce()

    : 对数组中的所有元素执行一个reducer函数（你提供），将其结果汇总为单个返回值。它不会修改原始数组。

  • slice()

    : 返回一个数组的浅拷贝（从开始到结束，不包括结束）。原始数组不会被修改。

  • concat()

    : 用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

  • 展开运算符 ( 
    ...

    ): 这是ES6的语法糖，无论是用于数组还是对象，都能非常方便地创建新的副本。对于数组，

    [...originalArray, newItem]

    或 

    [...arr1, ...arr2]

    都是创建新数组的有效方式。

const numbers = [1, 2, 3, 4];  // map: 纯函数，返回新数组 const doubledNumbers = numbers.map(n => n * 2); // [2, 4, 6, 8] console.log(numbers); // [1, 2, 3, 4] -- 原始数组未变  // filter: 纯函数，返回新数组 const evenNumbers = numbers.filter(n => n % 2 === 0); // [2, 4] console.log(numbers); // [1, 2, 3, 4] -- 原始数组未变  // reduce: 纯函数，返回聚合值 const sum = numbers.reduce((acc, current) => acc + current, 0); // 10 console.log(numbers); // [1, 2, 3, 4] -- 原始数组未变  // slice: 纯函数，返回新数组（浅拷贝） const slicedNumbers = numbers.slice(1, 3); // [2, 3] console.log(numbers); // [1, 2, 3, 4] -- 原始数组未变  // concat: 纯函数，返回新数组 const combinedNumbers = numbers.concat([5, 6]); // [1, 2, 3, 4, 5, 6] console.log(numbers); // [1, 2, 3, 4] -- 原始数组未变  // 展开运算符: 纯函数，返回新数组 const moreNumbers = [...numbers, 5]; // [1, 2, 3, 4, 5] console.log(numbers); // [1, 2, 3, 4] -- 原始数组未变

对于对象：

  • Object.assign()

    : 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它会修改目标对象，但如果第一个参数是空对象 

    {}

    ，则可以用来创建新对象。

  • 展开运算符 ( 
    ...

    ): 这是最常用和简洁的方式。

    { ...originalObject, newProperty: value }

    会创建一个新对象，包含原对象的所有属性以及新增或覆盖的属性。

const user = { name: 'Alice', age: 30 };  // Object.assign: 可以用于创建新对象 const updatedUser1 = Object.assign({}, user, { age: 31 }); // { name: 'Alice', age: 31 } console.log(user); // { name: 'Alice', age: 30 } -- 原始对象未变  // 展开运算符: 更简洁的创建新对象 const updatedUser2 = { ...user, city: 'New York' }; // { name: 'Alice', age: 30, city: 'New York' } console.log(user); // { name: 'Alice', age: 30 } -- 原始对象未变  // 嵌套对象的更新需要注意“浅拷贝”问题，可能需要递归或结合库来深拷贝 const profile = {   id: 1,   details: {     email: 'test@example.com',     phone: '123'   } };  // 错误的“纯函数”更新：details 内部的 email 仍然是引用 const updatedProfileWrong = { ...profile, details: { ...profile.details, email: 'new@example.com' } }; // 这种方式对于 details 对象本身是纯的，但如果 details 内部还有更深层结构，就需要继续展开。

理解这些原生方法和语法的“纯函数”用法，是JS中实现函数式数据结构的基础。它们虽然不是真正的“不可变数据结构”，但提供了不可变操作的范式。

如何构建自定义的不可变数据结构？

构建自定义的不可变数据结构，其核心理念是每次操作都返回一个新的实例，而不是修改现有实例。这通常通过类（Class）或工厂函数（Factory Function）来实现。我们以一个简单的不可变栈（Immutable Stack）为例，来展示这个过程。

一个传统的栈，

push

和

pop

都会直接修改栈的内部数组。但一个不可变栈，

push

会返回一个包含新元素的新栈，

pop

会返回一个移除了顶部元素的新栈。

class ImmutableStack {   constructor(elements = []) {     // 确保内部数组是不可变的，通常通过浅拷贝或深拷贝     // 这里我们假设elements是外部传入的，且不会被外部修改     // 更严谨的做法是：this._elements = Object.freeze([...elements]);     this._elements = [...elements]; // 浅拷贝，确保传入的数组不会影响内部状态   }    // 获取栈顶元素，不修改栈   peek() {     if (this._elements.length === 0) {       return undefined;     }     return this._elements[this._elements.length - 1];   }    // 检查栈是否为空，不修改栈   isEmpty() {     return this._elements.length === 0;   }    // 获取栈的大小，不修改栈   size() {     return this._elements.length;   }    // 压入元素：返回一个包含新元素的新栈实例   push(element) {     return new ImmutableStack([...this._elements, element]);   }    // 弹出元素：返回一个移除了顶部元素的新栈实例   pop() {     if (this.isEmpty()) {       // 栈为空时，返回自身或抛出错误，取决于业务逻辑       return this;     }     const newElements = this._elements.slice(0, this._elements.length - 1);     return new ImmutableStack(newElements);   }    // 辅助方法：转换为数组（不建议直接暴露内部数组）   toArray() {     return [...this._elements];   } }  // 使用示例 const emptyStack = new ImmutableStack(); console.log('Empty Stack:', emptyStack.toArray()); // []  const stack1 = emptyStack.push(10); console.log('Stack 1 (after push 10):', stack1.toArray()); // [10] console.log('Original emptyStack:', emptyStack.toArray()); // [] -- 未变  const stack2 = stack1.push(20); console.log('Stack 2 (after push 20):', stack2.toArray()); // [10, 20] console.log('Original stack1:', stack1.toArray()); // [10] -- 未变  const stack3 = stack2.pop(); console.log('Stack 3 (after pop):', stack3.toArray()); // [10] console.log('Original stack2:', stack2.toArray()); // [10, 20] -- 未变  const stack4 = stack3.pop(); console.log('Stack 4 (after pop again):', stack4.toArray()); // []

这个

ImmutableStack

的例子清晰地展示了“写时复制”的原则。每次

push

或

pop

操作都会创建一个新的

ImmutableStack

实例，并且新实例的内部数组是基于旧实例的数组创建的副本。旧的栈实例保持不变，这使得状态变化可预测且易于追踪。

这种模式可以推广到其他复杂的数据结构，如不可变链表、树、映射等。挑战在于如何高效地进行复制，尤其是在深层嵌套或大型数据结构中。结构共享（Structural Sharing）是解决这个问题的关键，即只有被修改的部分需要复制，未修改的部分可以共享引用。Immutable.js等库就是基于这种思想实现的。

函数式数据结构对性能有什么影响？

谈到函数式数据结构，性能是个绕不开的话题，而且它确实会带来一些权衡。最直接的顾虑就是复制操作的开销。每次“修改”都意味着创建一个新的数据副本，这听起来就像是不断地分配内存和垃圾回收，尤其是在处理大型数据集或频繁更新时，可能会导致性能下降。

然而，这并非绝对。实际情况比表面复杂。

  1. 内存开销与结构共享： 并不是每次复制都意味着完全的深拷贝。像前面提到的

    ImmutableStack

    ，它内部的

    _elements

    数组虽然是新的，但如果栈中的元素是对象，这些对象本身并没有被深拷贝，它们只是引用被复制了。这种“浅拷贝”结合结构共享（Structural Sharing）是函数式数据结构性能优化的关键。例如，在不可变树结构中，如果你只修改了一个叶子节点，那么从根到那个叶子节点路径上的所有节点都需要被复制，但树的其他大部分分支可以继续共享原始的内存引用。这大大减少了实际的复制量。

    // 假设一个简单的不可变树节点 class ImmutableTreeNode {   constructor(value, left = null, right = null) {     this.value = value;     this.left = left;     this.right = right;   }    // 假设我们要更新一个子节点的值   updateLeft(newValue) {     // 创建一个新的左子节点     const newLeftNode = new ImmutableTreeNode(newValue);     // 返回一个新父节点，共享右子节点，但使用新的左子节点     return new ImmutableTreeNode(this.value, newLeftNode, this.right);   } }  const originalTree = new ImmutableTreeNode('A', new ImmutableTreeNode('B'), new ImmutableTreeNode('C')); // 修改'B'为'B_new' const updatedTree = originalTree.updateLeft('B_new');  // 此时，originalTree 和 updatedTree 的 'C' 节点是共享同一个内存引用的。 // 只有 'A' 和 'B' 及其祖先路径上的节点被复制了。

    这种共享机制在很大程度上缓解了内存压力和复制开销。

  2. CPU开销： 频繁的内存分配和垃圾回收确实会消耗CPU周期。在某些极端场景下，如果你的应用对性能有毫秒级的严格要求，并且数据结构更新非常频繁且规模巨大，那么函数式数据结构的开销可能会成为瓶颈。然而，现代JS引擎的垃圾回收器已经非常高效，很多时候这种开销并没有想象中那么大。

  3. 缓存局部性： 不可变数据结构可能会影响CPU缓存的局部性。因为每次更新都可能创建新的对象，数据在内存中的布局可能不如可变数据结构紧凑，这可能导致更多的缓存未命中。

  4. 性能分析： 在决定是否使用函数式数据结构时，不应该仅仅停留在理论层面。我通常建议进行实际的性能测试和基准测试。使用Chrome DevTools的Performance面板，可以清晰地看到内存分配、垃圾回收和CPU使用情况。很多时候，真正的性能瓶颈可能在I/O、网络请求或复杂的计算逻辑上，而不是数据结构的复制开销。

总的来说，函数式数据结构在可维护性、可预测性和调试便利性上的巨大优势，通常会超过其潜在的性能劣势。对于大多数Web应用而言，这种性能开销是完全可以接受的，甚至在某些场景下，由于减少了bug和简化了并发处理，反而能提升整体开发效率和系统稳定性。只有在非常特定的、性能敏感的场景下，才需要深入考虑是否值得为了极致性能而牺牲部分函数式特性。

使用第三方库如Immutable.js或Immer的考量？

在JavaScript中实现函数式数据结构，尤其是当你的数据结构变得复杂和嵌套时，手动管理不可变性会变得非常繁琐且容易出错。这就是为什么像Immutable.js和Immer这样的第三方库会如此受欢迎。它们为我们提供了更强大、更便捷的工具来处理不可变数据。

Immutable.js

Immutable.js是Facebook（现在是Meta）开发的，它提供了一套全新的、真正不可变的数据结构，比如

List

、

map

、

Set

等。它的核心理念是：所有操作都会返回一个新的不可变数据结构实例，并且内部通过结构共享来优化性能。

优点：

  • 真正的不可变性： 它强制你以不可变的方式操作数据，任何操作都不会修改原始数据。
  • 性能优化： 通过结构共享，Immutable.js在处理大型数据结构时，能显著减少内存分配和GC压力，通常比手动深拷贝性能更好。
  • API丰富： 提供了一套与原生JS数组/对象类似但更强大的API，例如 
    getIn

    、

    setIn

    用于深层嵌套数据的操作。

  • 简化 
    shouldComponentUpdate

    ： 在React等框架中，可以直接通过引用比较来判断组件是否需要更新，因为数据变了引用就会变，这极大地优化了渲染性能。

缺点：

  • 学习曲线： 你需要学习一套全新的API，而不是直接使用原生的JS对象和数组方法。这可能需要一些时间来适应。
  • 与原生JS的互操作性： Immutable.js的数据结构不是原生的JS对象或数组，这意味着你可能需要频繁地在Immutable对象和原生JS对象之间进行转换（ 
    toJS()

    ），这本身也有性能开销。

  • 库大小： 引入Immutable.js会增加你的打包文件大小。

Immer

Immer是另一个流行的库，它采取了不同的策略。它允许你以可变的方式操作数据，但内部通过Proxy对象和写时复制的机制，在背后悄悄地为你生成不可变的新状态。

优点：

  • 直观易用： 你可以像操作普通JavaScript对象和数组一样编写代码，不需要学习新的API。这极大地降低了上手难度和心智负担。
  • 性能良好： 它也使用了结构共享，并且只复制你实际修改的部分。
  • 与原生JS无缝集成： 返回的结果是原生的JS对象和数组，这意味着你可以直接将它们传递给任何期望原生JS数据的库或API，无需转换。
  • 非常适合Redux等状态管理： 在Redux reducer中，使用Immer可以让你以非常简洁的方式编写复杂的不可变更新逻辑。

缺点：

  • 依赖Proxy： Immer依赖于ES6的Proxy特性，这意味着它在一些老旧的浏览器环境（如IE）中可能需要Polyfill，或者根本无法工作。
  • 调试可能略复杂： 由于Proxy的介入，在某些调试场景下，你看到的内部结构可能不如直接的JS对象那么直观。

如何选择？

  • 如果你追求极致的不可变性，并且不介意学习一套新的API，或者你的项目对性能有非常高的要求且数据结构极其复杂，那么Immutable.js可能是一个不错的选择。 它强制你以函数式思维去构建和操作数据。
  • 如果你希望在保持不可变性的同时，尽量减少学习成本，并且能以最“JavaScript原生”的方式编写代码，那么Immer会是更优的选择。 它在开发者体验和性能之间找到了一个很好的平衡点，特别适合现有项目渐进式地引入不可变性。

我个人在大多数现代前端项目中，更倾向于使用Immer。它的开发体验实在太棒了，让你几乎感觉不到自己在处理不可变数据，但又实实在在地享受着不可变性带来的好处。它让那些过去写起来很痛苦的深层嵌套数据更新，变得异常简洁和直观。当然，最终的选择还是取决于你的项目需求、团队熟悉度以及对性能和兼容性的具体考量。

ai bug chrome chrome devtools class copy es6 facebook Filter function JavaScript JS map Object red 为什么 事件 垃圾回收器 多线程 对象 工具 并发 性能优化 数据结构 栈 浏览器 线程 运算符

评论（已关闭）

评论已关闭