0

0

在JavaScript中,如何实现数据的不可变性(Immutability)?

狼影

狼影

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

|

727人浏览过

|

来源于php中文网

原创

使用const声明变量可防止重新赋值,但无法阻止对象内部修改,需结合扩展运算符、不可变数组方法和Object.freeze实现深层不可变,关键在于始终返回新对象而非修改原数据。

在javascript中,如何实现数据的不可变性(immutability)?

在JavaScript中,实现数据的不可变性意味着避免直接修改现有对象或数组,而是通过创建新对象来反映状态变化。虽然JavaScript本身不强制不可变性,但可以通过语言特性和良好习惯来实现。

使用const声明变量

const能防止变量被重新赋值,但它不能保证对象或数组内部不被修改。它只保护引用不变。

例如:
const user = { name: 'Alice' };
user.name = 'Bob'; // 允许:对象内容被修改
user = {};         // 错误:无法重新赋值

因此,const只是第一步,还需配合其他方法确保深层不可变。

避免直接修改数组的方法

不要使用会改变原数组的方法,如 push、pop、splice、reverse。应使用返回新数组的方法:

立即学习Java免费学习笔记(深入)”;

  • concat 替代 push:创建新数组
  • filter、map、slice:生成新数组而非修改原数组
  • 扩展运算符(...):方便组合新数组或对象
示例:
const list = [1, 2, 3];
const newList = [...list, 4]; // [1,2,3,4],原数组不变

处理对象的不可变更新

不要直接修改对象属性。使用 Object.assign扩展运算符 创建副本。

新快购物系统
新快购物系统

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

下载
推荐做法:
const state = { name: 'Alice', age: 25 };
const newState = { ...state, age: 26 };

这样不会影响原始 state 对象。

对于嵌套对象,需逐层展开以避免引用共享:

const newState = {
  ...state,
  profile: { ...state.profile, city: 'Beijing' }
};

使用Object.freeze进行深度冻结(可选)

Object.freeze 可以阻止对象属性被添加、删除或更改,适用于浅层冻结。

const user = Object.freeze({ name: 'Alice', info: { age: 25 } });
user.name = 'Bob'; // 无效(严格模式下报错)
user.info.age = 26; // 注意:嵌套对象仍可变

若需深度冻结,需递归调用 freeze:

function deepFreeze(obj) {
  Object.getOwnPropertyNames(obj).forEach(prop => {
    if (obj[prop] && typeof obj[prop] === 'object') {
      deepFreeze(obj[prop]);
    }
  });
  return Object.freeze(obj);
}

基本上就这些。通过组合使用扩展运算符、不可变方法和必要时的冻结,可以在JavaScript中有效实现不可变性,尤其在React或Redux等注重状态管理的场景中非常有用。关键是养成“不修改,只生成新值”的思维习惯。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
java基础知识汇总
java基础知识汇总

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

1499

2023.10.24

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

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

231

2024.02.23

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

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

87

2025.10.17

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

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

530

2023.09.20

golang map内存释放
golang map内存释放

本专题整合了golang map内存相关教程,阅读专题下面的文章了解更多相关内容。

75

2025.09.05

golang map相关教程
golang map相关教程

本专题整合了golang map相关教程,阅读专题下面的文章了解更多详细内容。

36

2025.11.16

golang map原理
golang map原理

本专题整合了golang map相关内容,阅读专题下面的文章了解更多详细内容。

60

2025.11.17

java判断map相关教程
java判断map相关教程

本专题整合了java判断map相关教程,阅读专题下面的文章了解更多详细内容。

40

2025.11.27

Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

10

2026.01.27

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.2万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号