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 ]