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

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

夢幻星辰

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

原创

175人浏览过

实现不可变数据集合的核心是每次修改返回新对象。使用展开运算符可手动实现对象和数组的不可变操作，如 {...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 都会返回新的实例，原始数据不受影响。

新快购物系统

新快购物系统是集合目前网络所有购物系统为参考而开发，不管从速度还是安全我们都努力做到最好，此版虽为免费版但是功能齐全，无任何错误，特点有：专业的、全面的电子商务解决方案，使您可以轻松实现网上销售；自助式开放性的数据平台，为您提供充满个性化的设计空间；功能全面、操作简单的远程管理系统，让您在家中也可实现正常销售管理；严谨实用的全新商品数据库，便于查询搜索您的商品。

查看详情

立即学习“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]

登录后复制