如何实现一个基于JavaScript的不可变（Immutable）数据集合？-js教程-PHP中文网

如何实现一个基于JavaScript的不可变（Immutable）数据集合？

夢幻星辰

发布： 2025-10-01 20:23:02

原创

165人浏览过

实现不可变数据集合的核心是每次修改返回新对象。使用展开运算符可手动实现对象和数组的不可变操作，如 {...obj, key: value} 和 [...arr, item]；封装 ImmutableList 类能通过 add、remove 方法返回新实例；推荐使用 Immer 或 Immutable.js 等库处理复杂结构，Immer 允许“可变”语法生成不可变状态，Immutable.js 提供不可变 List、Map 类型；关键原则包括不修改原数据、所有变更返回新实例、用 Object.freeze 防止意外修改，并在性能敏感场景采用结构共享优化。

如何实现一个基于javascript的不可变（immutable）数据集合？

实现一个基于 JavaScript 的不可变数据集合，核心是确保每次修改都返回新对象，而不是改变原对象。虽然原生 JS 对象和数组是可变的，但可以通过一些模式和工具来构建不可变性。

使用展开运算符（Spread Operator）手动实现不可变操作

对于简单对象和数组，利用展开运算符可以避免直接修改原数据。

对象更新： 不要直接赋值，而是创建新对象。

    const originalObj = { name: 'Alice', age: 25 };<br>
    const updatedObj = { ...originalObj, age: 26 }; // 新对象

登录后复制

数组操作： 使用 filter、map、concat 等不改变原数组的方法。

    const list = ['a', 'b'];<br>
    const newList = [...list, 'c']; // 添加<br>
    const filtered = list.filter(item => item !== 'a'); // 删除

登录后复制

封装不可变集合类

你可以定义一个简单的类来封装不可变逻辑，比如一个不可变列表。

    class ImmutableList {<br>
        constructor(values = []) {<br>
          this._values = Object.freeze([...values]);<br>
        }<br><br>
        add(value) {<br>
          return new ImmutableList([...this._values, value]);<br>
        }<br><br>
        remove(index) {<br>
          const newArr = this._values.filter((_, i) => i !== index);<br>
          return new ImmutableList(newArr);<br>
        }<br><br>
        toArray() {<br>
          return this._values;<br>
        }<br>
    }

登录后复制

这样每次调用 add 或 remove 都会返回新的实例，原始数据不受影响。

Android配合WebService访问远程数据库中文WORD版

采用HttpClient向服务器端action请求数据，当然调用服务器端方法获取数据并不止这一种。WebService也可以为我们提供所需数据，那么什么是webService呢？，它是一种基于SAOP协议的远程调用标准，通过webservice可以将不同操作系统平台，不同语言，不同技术整合到一起。实现Android与服务器端数据交互，我们在PC机器java客户端中，需要一些库，比如XFire,Axis2,CXF等等来支持访问WebService，但是这些库并不适合我们资源有限的android手机客户端，

查看详情

立即学习“Java免费学习笔记（深入）”；

使用成熟的不可变库（如 Immer 或 Immutable.js）

手动维护不可变逻辑在复杂结构中容易出错。推荐使用专门的库简化操作。

Immer： 允许你用“可变”语法写代码，但生成不可变结果。

    import { produce } from 'immer';<br><br>
    const baseState = { user: { name: 'Bob' } };<br>
    const nextState = produce(baseState, draft => {<br>
      draft.user.name = 'Charlie'; // 看似可变，实际不可变<br>
    });

登录后复制

produce 内部使用代理和结构共享，高效生成新状态。

Immutable.js： 提供 List、Map、Set 等不可变数据类型。

    import { List } from 'immutable';<br><br>
    const list1 = List([1, 2]);<br>
    const list2 = list1.push(3); // 返回新 List<br>
    console.log(list1.toArray()); // [1, 2]<br>
    console.log(list2.toArray()); // [1, 2, 3]

登录后复制