immutable不可变对象,介绍及详细用法。

刺骨的言语ヽ痛彻心扉 2022-12-11 06:27 147阅读 0赞

## immutable介绍及用法 ##

###### Facebook 工程师使用3年时间打造，与React同期出现，但是没有被默认放到React工具集中，它内部实现了一套完整的数据持久化 里面有很多常见的数据类型Collection List Map Set等 ######

#### 里面有三种重要的数据解构 ####

Map： 键值对集合，对应于Object Es6中也有专门的Map对象  
List： 有序可以重复的列表，对应于Array  
set： 无序并且不可重复key的数组

### immutable原理 ###

Immutable 实现的原理是（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免深拷贝把所有节点都复制一遍带来的性能损耗，Immutable 使用了（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。

演示地址：[点击查看动画演示][Link 1]

#### immutable介绍 ####

Immutable Data就是一但创建，就不能在被改变的数据，对于immutabe对象的任何修改或者添加删除操作都会返回一个新的immutable对象

###### Map： 键值对集合。 ######

1、创建map集合:let xx=Map(\{key:val\})  
2、读取map集合:get("")  
3、修改map集合:set("")  
4、删除map集合：delete("")  
5、批量删除map集：deleteAll("")  
6、合并集合：merge  
7、清除集合：claer（）  
8、toJS深转换 语法：xxx.toJS  
9、toJSON深转换

### 使用： ###

1、下载：npm install --save immutable  
2、引用：let \{Map\}=require(“immutable”)

注:新建js文件复制下面代码用node运行即可在控制台查看运行结果

let {Map}=require("immutable")
    
    let a=Map({
        name:"guodong",
        age:18
    })
    
    let c=Map({
        sex:"男"
    })
    
    let b=a   //创建一个新的变量Mpa赋值给b
    console.log(a===b)//true
    
    //1、获取方式  变量名.get("xxx")
    console.log(a.get("name"))//guodong
    
    //2、修改
    let newobj=a.set("name","lalalal")
    console.log(newobj.get("name"))//lalalal
    
    //3、删除
    let newbj=a.delete("name")
    console.log(newbj.get("name"))//undefined
    console.log(a.get("name"))//guodong
    
    //4、批量删除
    let pil=a.deleteAll(["name","age"])
    console.log(pil.get("name"))//undefined
    
    //5、清除并返回新的map
    let qing=a.clear()
    console.log(qing)
    
    //6、合并并且返回新的map
    let he=a.merge(c)
    console.log(he)//{ "name": "guodong", "age": 18, "sex": "男" }

### immutable-List ###

下载：npm install --save immutable 需要用的时候引入就行：注意引入方式import \{List\} from “immutable”

1、创建List两种方式：

let {List}=require("immutable")
    let  arr=List([1,2,3,4,5,6])//[ 1, 2, 3, 4, 5, 6 ]
    let listarr=List.of(1,2,3)//[ 1, 2, 3 ]
    console.log(listarr)

2、size获取list长度 set(下标，值)用于设置指定下标的值

let {List}=require("immutable")
    let  arr=List([1,2,3,4,5,6])
    let listarr=List.of(1,2,3)
    console.log(arr.set(-1,"guo"))//[ 1, 2, 3, 4, 5, "guo" ]
    console.log(listarr.set(1,"haha"))//[ 1, "haha", 3 ]

3、delete(下标)删除指定下标 insert()用来更新指定下标的值

let {List}=require("immutable")
    let  arr=List([1,2,3,4,5,6])
    let listarr=List.of(1,2,3)
    console.log(arr.insert(2,"我被修改了"))//[ 1, 2, "我被修改了", 3, 4, 5, 6 ]
    console.log(listarr. delete(1))//[ 1, 3 ]

4、update(下标,回掉函数)用于更新指定下标的值 clear()清空并且返回一个空list

let {List}=require("immutable")
    let  arr=List([1,2,3,4,5,6])
    let listarr=List.of(1,2,3)
    let ua=arr.update(3,()=>"更新了")
    let ca=listarr.clear()
    console.log(ua)//[ 1, 2, 3, "更新了", 5, 6 ]
    console.log(ca)//" "

5、push pop unshift shift 和数组方法项功能相同 自己尝试

6、setSize（）重新设置数组长度，小于原始list会被截取 ，大于会用undefined填充

let {List}=require("immutable")
    let  arr=List([1,2,3,4,5,6])
    let aa=listarr.setSize(3)
    console.log(aa)//[ 1, 2, 3 ]

7、concat() 把多个list拼接成一个list merge()是concat()别名

let {List}=require("immutable")
    let  lista=List([1,2,3,4,5,6])
    let listb=List.of(1,2,3)
    let ca=lista.concat(listb)
    console.log(ca)//[ 1, 2, 3, 4, 5, 6, 1, 2, 3 ]
    let cb=lista.merge(listb)
    console.log(cb)//[ 1, 2, 3, 4, 5, 6, 1, 2, 3 ]

[Link 1]: https://upload-images.jianshu.io/upload_images/2165169-cebb05bca02f1772