immutable的使用

红太狼 2021-12-24 09:13 472阅读 0赞

一、什么是immutable

immutable是一种持久化数据结构，immutable数据就是一旦创建，就不能更改的数据，每当对immutable对象进行修改的时候，就会返回一个新的immutable对象，以此来保证数据的不可变。

二、immutable的几种数据类型

List: 有序索引集，类似JavaScript中的Array。

Map: 无序索引集，类似JavaScript中的Object。

OrderedMap: 有序的Map，根据数据的set()进行排序。

Set: 没有重复值的集合。

OrderedSet: 有序的Set，根据数据的add进行排序。

Stack: 有序集合，支持使用unshift（）和shift（）添加和删除。

Range(): 返回一个Seq.Indexed类型的集合，这个方法有三个参数，start表示开始值，默认值为0，end表示结束值，默认为无穷大，step代表每次增大的数值，默认为1.如果start = end,则返回空集 合。

Repeat(): 返回一个vSeq.Indexe类型的集合，这个方法有两个参数，value代表需要重复的值，times代表要重复的次数，默认为无穷大。

Record: 一个用于生成Record实例的类。类似于JavaScript的Object，但是只接收特定字符串为key， 具有默认值。

Seq: 序列，但是可能不能由具体的数据结构支持。

Collection: 是构建所有数据结构的基类，不可以直接构建。

在工作中用的最多的就是LIst和Map，本篇文章主要介绍这两种数据类型的API。

三、immutable的使用

首先cnpm install immutable -S下载依赖

引入immutable

const immutable = require("immutable")

1、创建Map数据结构

const immutable = require("immutable")
    //创建Map数据结构
    //第一种方式
    const map = immutable.fromJS({
        a:1,
        b:2,
        c:3,
        d:{
            f : 4
        }
    })
    console.log(map)//Map { "a": 1, "b": 2, "c": 3, "d": Map { "f": 4 } }
    //第二种方式
    const map = immutable.Map({
        a : 1,
        b : 2,
        c : {
            f : 5
        }
    })
    console.log(map)//Map { "a": 1, "b": 2, "c": 3, "d": Map { "f": 4 } }
    //两种方式的不同在于map list只能创建一层的immutable对象结构  如果使用fromJS可以进行深层次的immutable数据转换

2、创建List数据结构

//第一种
    const List = immutable.fromJS([
        1,2,3,4,[1,2]
    ])
    console.log(List)//List [ 1, 2, 3, undefined, List [ 1, 2 ] 
    const list = immutable.List(
        [1,2,3,4,[1,2]]
    )
    console.log(list)//List [ 1, 2, 3, 4, 1,2 ]

3转换数据类型

const list = immutable.fromJS([
        1,2,3,4,[1,2]
    ])
    console.log(list.toJS())//[ 1, 2, 3, 4, [ 1, 2 ] ]
    const map = immutable.fromJS({
        a:1,
        b:2,
        c:3,
        d : {
            f : 4
        }
    })
    console.log(map.toJS())//{ a: 1, b: 2, c: 3, d: { f: 4 } }
    //toJS()将Map和List数据类型转换为原生的js对象
    var obj = {
        a : 1,
        b : 2,
        c : [1,2,3]
    }
    
    console.log(obj)//{ a: 1, b: 2, c: [ 1, 2, 3 ] }
    console.log(immutable.fromJS(obj))//Map { "a": 1, "b": 2, "c": List [ 1, 2, 3 ] }
    //fromJS() 将原生的JS对象转为Map和List的数据结构

4比较2个immutable对象是否相同

const map = immutable.Map({a : 1,b : 2});
    const map1 = map.update("a",()=>x=10);
    console.log(immutable.is(map1,map))//false
    //对比两个immutable如果相同返回true，不同则返回false

5immutable的增删改查

//增
    const map = immutable.fromJS({
        a : 1,
        b : 2,
        c : [1,2,3]
    })
    console.log(map)//Map { "a": 1, "b": 2, "c": List [ 1, 2, 3 ] }
    console.log(map.set("d",10));//Map { "a": 1, "b": 2, "c": List [ 1, 2, 3 ], "d": 10 }
    console.log(map.setIn(["d" , "sex"],"男"))//Map { "a": 1, "b": 2, "c": List [ 1, 2, 3 ], "d": Map { "sex": "男" } }
    //set和setIn都可以增加，但是setIn可以增加多层
    
    //删
    const map = immutable.fromJS({
        a : 1,
        b : 2,
        c : [1,2,3]
    })
    console.log(map)//Map { "a": 1, "b": 2, "c": List [ 1, 2, 3 ] }
    console.log(map.delete("a"))//Map { "c": List [ 1, 2, 3 ], "b": 2 }
    console.log(map.deleteIn(["c",0]))//Map { "a": 1, "b": 2, "c": List [ 2, 3 ] }
    //delete和deleteIn都可以删除，但是deleteIn可以删除多层中的属性。
    //改
    const map = immutable.fromJS({
        a : 1,
        b : 2,
        c : [1,2,3]
    })
    console.log(map)//Map { "a": 1, "b": 2, "c": List [ 1, 2, 3 ] }
    console.log(map.update("a",(x)=>x=3))//Map { "a": 3, "b": 2, "c": List [ 1, 2, 3 ] }
    console.log(map.updateIn(["c",0],(x)=>x=10))//Map { "a": 1, "b": 2, "c": List [ 10, 2, 3 ] }
    //update和updateIn都可以进行修改数据，但是updateIn可以修改多层数据中的数据。
    //查
    const map = immutable.fromJS({
        a : 1,
        b : 2,
        c : [4,2,3]
    })
    console.log(map)//Map { "a": 1, "b": 2, "c": List [ 4, 2, 3 ] }
    
    console.log(map.get("a"))//1
    console.log(map.getIn(["c",0]))//4
    //同样get和getIn都可以查看immutable中的数据，但是getIn可以查看多层对象中的数据。

6，遍历

const map = immutable.fromJS({
        a : 1,
        b : 2,
        c : [4,2,3]
    })
    
    map.map((item,index)=>{
            console.log(item)//1
                            //2
                            //List [ 4, 2, 3 ]
    })

7,合并/查看对象长度

/合并
    const list1 = immutable.fromJS([1,2,[1,2]]);
    const list2 = immutable.fromJS([7,8,[1,3]]);
    const newList =list1.merge(list2)
    console.log(newList)//List [ 1, 2, List [ 1, 2 ], 7, 8, List [ 1, 3 ] ]
    const list1 = immutable.fromJS([1,2,[1,2]]);
    const list2 = immutable.fromJS([7,8,[1,3]]);
    const newList =list1.merge(list2)
    const map = immutable.fromJS({a:1,b:2})
    //查看长度
    console.log(map.size)//2
    console.log(newList.count())//6

转载于:https://www.cnblogs.com/PrayLs/p/10506886.html