讲师中心 微信公众号
AI工具推荐 视频效率加速

如何实现一个基于JavaScript的不可变(Immutable)数据集合?

胖磊姑娘_7446

胖磊姑娘_7446

发布时间:2025-10-01 20:23:02

|

175人浏览过

|

来源于php中文网

原创

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

Revealjs Presentations
Revealjs Presentations

创建、编辑并部署 reveal.js 演示文稿为单个 HTML 文件,可选自定义 CSS。适用于需要制作演示文稿、幻灯片或宣传材料时使用。

下载

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

关键原则总结

  • 永远不修改输入参数或内部状态
  • 所有变更方法都返回新实例
  • 使用 Object.freeze 可防止意外修改(浅冻结)
  • 深层嵌套结构需递归冻结或依赖库处理
  • 考虑性能:频繁操作大对象时,使用结构共享优化
基本上就这些。手动实现适合简单场景,复杂应用建议用 Immer 这类现代工具,开发效率和安全性更高。

热门AI工具

更多
音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
数据类型有哪几种
数据类型有哪几种

数据类型有整型、浮点型、字符型、字符串型、布尔型、数组、结构体和枚举等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2291

2023.10.31

php数据类型
php数据类型

本专题整合了php数据类型相关内容,阅读专题下面的文章了解更多详细内容。

474

2025.10.31

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

402

2026.02.12

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

5664

2023.10.24

Go语言中的运算符有哪些
Go语言中的运算符有哪些

Go语言中的运算符有:1、加法运算符;2、减法运算符;3、乘法运算符;4、除法运算符;5、取余运算符;6、比较运算符;7、位运算符;8、按位与运算符;9、按位或运算符;10、按位异或运算符等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2244

2024.02.23

php三元运算符用法
php三元运算符用法

本专题整合了php三元运算符相关教程,阅读专题下面的文章了解更多详细内容。

1552

2025.10.17

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

1878

2023.09.20

class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

3036

2024.01.03

AI视频生成软件推荐
AI视频生成软件推荐

本专题汇总了当前主流的AI视频生成软件推荐与排行榜单,涵盖seko、AniShort、剧云、Lovart、LiblibAI及立刻mv等热门工具。同时整理了各软件在文生视频、图生视频、时长限制、画质表现及免费额度等方面的差异对比,助您快速选对适合创作需求的AI视频生成工具。

160

2026.09.16

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 11.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn