0

0

JavaScript 函数式编程简介:不变性 #6

WBOY

WBOY

发布时间:2024-07-10 08:34:13

|

814人浏览过

|

来源于dev.to

转载

javascript 函数式编程简介:不变性 #6

不变性是函数式编程中的一个关键概念,对于编写可靠、可维护和可预测的代码至关重要。通过确保数据对象在创建后不会更改,不变性有助于消除副作用,并更容易推断应用程序的状态。

什么是不变性?

不变性意味着对象一旦创建就无法更改。您无需修改​​对象,而是创建一个包含所需更改的新对象。这与可变对象形成对比,可变对象可以在创建后进行修改。

不变性可以应用于各种类型的数据,包括数字、字符串、数组和对象。原始值(数字、字符串、布尔值)在 JavaScript 中本质上是不可变的,但复杂的数据结构(例如数组和对象)默认情况下是可变的。

为什么不变性很重要?

  1. 可预测性:不可变数据可确保对象不会意外更改,从而使程序的行为更加可预测且更易于理解。
  2. 调试:当数据不可变时,您可以确信一旦创建它,​​它就保持不变,这简化了调试和跟踪应用程序中的数据流。
  3. 并发:不变性有助于避免与共享数据并发修改相关的问题,这在多线程或异步环境中尤其重要。
  4. 时间旅行调试:使用不可变数据,您可以轻松实现时间旅行调试等功能,您可以在应用程序中来回查看状态更改的历史记录。

在 JavaScript 中实现不变性

虽然 JavaScript 默认情况下不强制执行不变性,但您可以使用多种技术和库来在代码中实现不变性。

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

  1. 使用 const 表示原始值

    const x = 42;
    // x = 43; // 这会导致错误,因为 x 是不可变的
    

    用 const 声明变量可以确保该变量不能被重新赋值,从而使其不可变。

  2. 不可变数组

    要实现数组的不变性,可以使用不改变原始数组的方法,例如 map、filter、concat 和 spread 运算符。

    社研通
    社研通

    文科研究生的学术加速器

    下载
    const arr = [1, 2, 3];
    
    // 使用地图
    const doubled = arr.map(x => x * 2);
    
    // 使用过滤器
    const Evens = arr.filter(x => x % 2 === 0);
    
    // 使用连接
    const 扩展 = arr.concat([4, 5]);
    
    // 使用扩展运算符
    const withNewElement = [...arr, 4];
    
    控制台.log(arr); // [1,2,3]
    控制台.log(双倍); // [2, 4, 6]
    console.log(偶数); // [2]
    控制台.log(扩展); // [1, 2, 3, 4, 5]
    console.log(withNewElement); // [1, 2, 3, 4]
    
  3. 不可变对象

    对于对象,您可以使用 Object.assign 和展开运算符来创建具有更新属性的新对象。

    const obj = { a: 1, b: 2 };
    
    // 使用对象分配
    const UpdatedObj = Object.assign({}, obj, { b: 3 });
    
    // 使用扩展运算符
    const updateObj2 = { ...obj, b: 3 };
    
    控制台.log(obj); // { a: 1, b: 2 }
    console.log(updatedObj); // { a: 1, b: 3 }
    控制台.log(updatedObj2); // { a: 1, b: 3 }
    
  4. 深度不变性

    对于深度嵌套的结构,实现不变性可能更具挑战性。 Immutable.js 和 Immer 等库提供了用于创建和管理不可变数据结构的工具。

    const { Map } = require('immutable');
    
    const obj = Map({ a: 1, b: 2 });
    const updateObj = obj.set('b', 3);
    
    console.log(obj.toObject()); // { a: 1, b: 2 }
    console.log(updatedObj.toObject()); // { a: 1, b: 3 }
    
```javascript
const Produce = require('immer'). Produce;

const obj = { a: 1, b: 2 };

const UpdatedObj = 生产(obj,草稿 => {
    草稿.b = 3;
});

控制台.log(obj); // { a: 1, b: 2 }
console.log(updatedObj); // { a: 1, b: 3 }
````
  1. Object.freeze

    您可以使用 Object.freeze 使对象不可变。然而,这是浅冻结,意味着嵌套对象仍然可以修改。

    const obj = Object.freeze({ a: 1, b: { c: 2 } });
    
    // obj.a = 3; // 这会导致错误
    obj.b.c = 3; // 这不会导致错误,因为冻结很浅
    
    控制台.log(obj); // { a: 1, b: { c: 3 } }
    

    要实现深度不变性,可以使用递归冻结:

    函数 DeepFreeze(obj) {
        Object.keys(obj).forEach(prop => {
            if (typeof obj[prop] === 'object' && obj[prop] !== null) {
                deepFreeze(obj[prop]);
            }
        });
        返回 Object.freeze(obj);
    }
    
    const obj = deepFreeze({ a: 1, b: { c: 2 } });
    
    // obj.a = 3; // 这会导致错误
    // obj.b.c = 3; // 这也会导致错误
    
    控制台.log(obj); // { a: 1, b: { c: 2 } }
    

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

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

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

1570

2023.10.24

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

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

241

2024.02.23

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

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

170

2025.10.17

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

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

565

2023.09.20

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

761

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

221

2023.09.04

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

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

1570

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

651

2023.11.24

minimax入口地址汇总
minimax入口地址汇总

本专题整合了minimax相关入口合集,阅读专题下面的文章了解更多详细地址。

2

2026.03.16

热门下载

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

精品课程

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

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