如何在 Immutable.js 中按键合并地图列表
介绍
在本指南中，我们将学习如何使用 Immutable.js 编写不可变代码。不可变性是编写准确代码的关键方面，必须由处理大型代码库的团队实现。我们将了解不可变性如何带来好处，并了解 Immutable.js 及其 Map 数据结构。但在此之前，让我们先看看为什么有必要编写不可变代码。
突变
变异通常意味着从原始形式发生变化。如果某物是可变的，它就可以被改变。当你更改或向现有对象添加属性时，同样的原则也适用于 JavaScript。
考虑下面的例子。
const Person = { name: "John", age: 32 };
console.log("Before mutation - ", Person);
Person.age = 35;
console.log("After mutation - ", Person);
当我们在控制台中运行此代码时，我们得到以下输出：
如你所见，Person对象的 age 属性被改变了，我们无法恢复原始对象。这被称为突变。
类似地，可以在阵列上进行变异。
const languages = ["JavaScript", "PHP", "Java", "C#"];
console.log("Before mutation - ", languages);
languages.pop();
console.log("After mutation - ", languages);
不变性
如果一个对象的属性一旦初始化就无法更改，则该对象被称为不可变对象。不幸的是，JavaScript 本身没有不可变的数据结构，因此需要程序员编写不可变代码。
为了证明这一点，我将以不可变的方式重写上述代码。
const Person = { name: "John", age: 32 };
console.log(Person);
const MutatedPerson = Object.assign({}, Person, { age: 35 });
console.log(Person);
console.log(MutatedPerson);
Object.assign ()方法将两个或多个对象合并为一个对象。第一个参数是要将对象合并到的目标对象。其余参数是源对象，每个参数都会覆盖另一个源。
这样，我们就可以跟踪对象的值，并让我们自己更容易调试代码。但这种做法并不能保证其他人无法改变对象。这就是为什么使用不可变数据结构至关重要；因此，Facebook 团队创建了 Immutable.js。
Immutable.js 简介
Immutable.js是一个创建数据集合的库，一旦初始化，就无法更改或变异。
Immutable.js 是这样描述不可变数据的：
不可变数据一旦创建就无法更改，从而大大简化了应用程序开发，无需防御性复制，并且能够通过简单的逻辑实现高级记忆和变化检测技术。持久性数据提供了一种可变 API，它不会就地更新数据，而是始终产生新的更新数据。
数据集合基于 JavaScript 的Array、Map和Set对象，但有一个显著的区别，即任何变异都是在原始对象的副本上完成的。
例如，设置Map数据集合属性的set()方法实际上是创建一个新的Map集合并改变其属性，而原始Map集合保持不变。
地图
让我们更详细地了解一下Map数据结构。
不可变映射是基于 JavaScript 对象的无序键值对集合。
让我们创建一个非常基本的Map集合。
import { Map } from "immutable";
const myMap = Map();
我们从immutable导入Map构造函数，然后调用构造函数并将其分配给变量。这就是如何创建一个没有任何属性或键值对的非常基本的Map 。
为了添加属性，我们在Map()函数中传递一个键值对的对象。
import { Map } from "immutable";
const Person = Map({ name: "John", age: 32 });
为了改变属性，Map集合有一个set()方法，它将键作为第一个参数，将值作为第二个参数，并返回一个新的Map集合而不改变原始集合。
const MutatedPerson = Person.set("age", 35);
现在，如果我们控制台记录上述集合，我们可以看到两个不同的值。
console.log(Person);
console.log(MutatedPerson);
按键合并地图
合并地图的方法有多种。
merge() 方法
我们可以使用merge()方法合并Map集合。这将返回合并了剩余集合的集合副本。
import { Map, merge } from "immutable";
const Person = Map({ name: "John", age: 32 });
const MutatedPerson = merge(Person, { age: 35 });
console.log(Person);
console.log(MutatedPerson);
当我们运行上述代码时，我们得到与前面的例子相同的结果。
merge ()方法还可以用于合并Map集合。
import { Map, merge } from "immutable";
const Map1 = Map({ a: 29, b: 88, c: 56 });
const Map2 = Map({ a: 38, b: 45, z: 99 });
const MergedMap = merge(Map1, Map2);
console.log("Map1 - ", Map1);
console.log("Map2 - ", Map2);
console.log("MergedMap - ", MergedMap);
如您所见，前一个Map集合的属性被下一个集合覆盖，并且唯一的键值对被添加到合并的Map集合中。再次，原始Map集合没有发生变异，并且未受影响。
合并（）
mergeWith()函数允许我们通过传入合并函数作为第一个参数来处理现有的键值对，而不是仅仅覆盖现有的值。
例如，假设我们必须添加合并键的值。
import { Map, mergeWith } from "immutable";
const Map1 = Map({ a: 29, b: 88, c: 56 });
const Map2 = Map({ a: 38, b: 45, z: 99 });
const MergedMap = mergeWith(
(oldValue, newValue) => oldValue + newValue,
Map1,
Map2
);
console.log("Map1 - ", Map1);
console.log("Map2 - ", Map2);
console.log("MergedMap - ", MergedMap);
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~