immutable不可变对象,介绍及详细用法。-蒲公英云

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

immutable介绍及用法

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

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

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

immutable原理

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

演示地址：点击查看动画演示

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 ]