Immutable.js介绍、Immutable的优缺点？Immutable 中常用类型Map，List？Immutable 中常用方法fromJS,toJS，is()

秦珂

2023-12-01

前言

不可变数据一旦创建就无法更改，从而使应用程序开发变得更加简单，没有防御性复制，并通过简单的逻辑实现高级记忆和更改检测技术。持久数据提供了一个可变的 API，它不会就地更新数据，而是总是产生新的更新数据。

Immutable.js提供了许多永久不可变数据结构，包括： List，Stack，Map，OrderedMap，Set，OrderedSet和Record。

这些数据结构在现代 JavaScript 虚拟机上非常高效，通过使用Clojure 和 Scala 流行的哈希映射尝试和向量尝试进行结构共享，最大限度地减少了复制或缓存数据的需要。

一、Immutable.js 介绍

引用类型的变量的优点是节约内存，我们称这样的方式是Mutable（可变的）。但是当一个项目越来越复杂的时候，Mutable带来的内存优势，消失殆尽。虽然我们可以进行deepCopy（深拷贝），但是这样会造成CPU和内存的浪费。Immutable就是来解决这样的问题的。

Immutable（不可改变的） Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。

二、Immutable的优缺点：

1.优点

减少内存的使用（深拷贝消耗内存）

并发安全

降低项目的复杂度

2.缺点

库的大小（建议使用seamless-immutable）

对现有项目入侵严重

容易与原生的对象进行混淆

三、Immutable 中常用类型(Map，List)

1.Map()

作用：复制一个对象(键值对)

参数：json对象

返回值：Map对象（经过immutable包装了的Map对象） ,该Map对象也可以使用set，get方法。但是set方法调用后会产生一个新的Map对象

Immutable.Map(json对象);

实例：
npm i --save immutable

function f(){
    //定义一个对象obj1
     var obj1 = {
        id:"007",
        name:"张三疯",
        address:{
            province:"陕西省",
            city:"西安市"
        }
    };
    //浅复制：let obj2 = obj1;  两个对象会共享同一块内存区域
    //深拷贝：两个对象的内存是独立的，
    
    //使用Immutable.Map()进行复制，相同的数据会共享。
    let obj2 = Immutable.map(obj1).toJS();
    //修改数据时，只把改动数据及其父级数据部分进行复制，其它部分不做复制，依然共享，节约了内存。
    obj1.address.province="北京";
    console.log(obj1);//obj1.address.province是北京
    console.log(obj2);//obj2.address.province是陕西
}

2.List

可重复的有序列表。对应Array

作用：复制一个数组

参数：数组

返回值：List。

是有序的索引密集集合，类似于JavaScript数组，针对List类型有set和get方法，分别表示设置和获取

实例：
function f(){
  const persons = ['芙蓉姐姐','春哥','犀利哥']
  let ipersons = Immutable.List(persons);
  
  let ipersons2 = ipersons.set( 1, '干露露');

  console.log("ipersons",ipersons);//List对象
  console.log("ipersons.toJS()",ipersons.toJS()) 

  console.log("ipersons2",ipersons2);//List对象
  cons

四、Immutable 中常用方法(fromJS,toJS，is())

1.Immutable.fromJs()

把一个js对象(数组)转化为Immutable对象。
    let map = Immutable.fromJS({ a: 1,b: 1,c: 1 });
    console.log(map);

    let list = Immutable.fromJS(['芙蓉姐姐','春哥','犀利哥']);
     console.log(list);

2.immutable对象.toJS()

把一个Immutable对象转化为js对象(数组)。

 	 let o =  map.toJS();
     console.log(o);
	 let arr2 = list.toJS();
      console.log(arr2);

3. Immutable.is()

比较两个Map（或List）的值是否相等
   var map1 = Immutable.Map({ a: 1,b: 1,c: 1 }); 
   var map2 = Immutable.Map({ a: 1,b: 1,c: 1 });
   console.log(Immutable.is(map1, map2));