immutable的使用

一、什么是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