不可變資料之Immutable

在講不可變資料（Immutable Data）前，先說說可變資料（Mutable Data）,在原生js中建立的資料都是可變的，如：

var a = {qty:1}
    a.qty = 10;
           

可能有小夥伴說，可以用const啊，const對基本資料類型還行，但對引用資料類型根本沒轍，如

const a = {qty:1}
    a.qty = 10;
​
    a.qty;// 10
           

如果把對象a指派給其它變量還會導緻新的問題，如：

const a = {qty:1}
     const b = a;
​
    a.qty = 10;
​
    b.qty;//10
           

這時你會發現，修改了a，b的值也跟着改了，這其實是js采用引用指派的方式來實作資料共享的，好處就是節省記憶體，但缺點也顯而易見，稍微不注意就會導緻改A壞B的棘手問題，在複雜的項目中，這種問題還不易排查，有諸多安全隐患。

之前的做法是，利用深拷貝的方式來解決這個問題，雖然問題解決了，但又會引發新的問題：浪費記憶體，還有對一些需要頻繁更新資料又有高性能要求的場景（如：React），深拷貝實則為一個不明智的操作，于是，Imutable.js的出現就是要解決這些開發痛點的。

Immutable.js 由Facebook 工程師 Lee Byron 花費 3 年時間打造，在js中的引用指派可以節省記憶體，但随着應用的不斷複雜後，狀态的改變往往會變成噩夢，通常的做法是複制資料來避免被修改，但這樣又造成了CPU和記憶體的消耗，而Immutable利用結構共享可以很好地解決這些問題。

不可變資料：Immutable Data

Immutable Data 是一旦建立，就不能再被更改的資料。對 Immutable 對象的任何修改或添加删除操作都會傳回一個新的 Immutable 對象。Immutable 實作的原理是 Persistent Data Structure（持久化資料結構），也就是對于不需要改變的資料采用結構共享的方式，如下圖

<!--  -->

常用資料類型

• List: 有序索引集，類似JS中的Array。
• Map: 無序索引集，類似JS中的Object。
• OrderedMap: 有序的Map，根據資料的set()進行排序。
• Set: 沒有重複值的集合。
• OrderedSet: 有序的Set，根據資料的add進行排序。
• Stack: 有序集合，支援使用unshift()和shift()添加和删除。
• Record: 一個用于生成Record執行個體的類。類似于JavaScript的Object，但是隻接收特定字元串為key，具有預設值。
• Seq: 序列，但是可能不能由具體的資料結構支援。
• Collection: 是建構所有資料結構的基類，不可以直接建構。

正如你看到的，immutable.js的資料類型有很多，本文主要介紹比較常用的List和Map，對應于js中的數組和對象。

js與immutable之間的轉換

可通過fromJS()和toJS()兩個方式實作js和immuatble資料的轉換，如：

import Immutable from 'immutable';
    const goods = {name:'huawei mate30 pro',price:5998,brand:'huawei'}
​
    // js -> immutable data
    const imData = Immutable.fromJS(goods)
​
    // immutable data -> js
    imData.toJS()
           

但fromJS()和toJS()會深度轉換資料，随之帶來的開銷較大，盡可能避免使用，單層資料轉換應直接使用Map()和List()進行轉換。另外，還可以直接通過JSON.stringify()對immutable資料轉換也json字元串。

import {Map,List} from 'immutable';
​
    const initState = Map({
        breadcrumb:List([]),
        user:Map({}),
        manageMenuStatus:false
    })
           

操作immutable資料

擷取immutable中的值：get(key)/getIn(keys)

Map 和 List的通用方法，實作如下

import {Map,List} from 'immutable';
    let state = Map({
        version:'2.0',
        user:Map({
            username:'laoxie',
            age:18,
            hobby:List(['代碼','電影','唱歌'])
        }),
    })
​
    // 擷取 version
    state.get('version');// 2.0
​
    // 擷取username
    state.getIn(['user','username']);// laoxie
​
    // 擷取hobby屬性資料
    state.getIn(['user','hobby',1]) // 電影
           

注意: 和傳統的js不同，getIn()擷取深層深套對象的值時不需要做每一層級的判斷是否存在，如不存在則會傳回undefined(JS中如果不判空會報錯)

• 添加immutable中的資料：set(key,val)/setIn(keys,val)
• 删除屬性：delete(key)/deleteIn(keys)
• 更新屬性：update(key,val=>newVal)/updateIn(keys,val=>newVal) 如開頭所說的，Immutable Data為不可變資料，所有針對immutable的增删改都不會修改原資料，而是傳回一個新的值，是以需要給變量重新指派。

import {Map,List} from 'immutable';
    let state = Map({
        version:'2.0',
        user:Map({
            id:'123',
            username:'laoxie',
            age:18,
            hobby:List(['代碼','電影','唱歌'])
        }),
    })
    state.set('version','3.0');
    state.get('version');//state不被修改，是以還是傳回2.0
​
    // 正确的修改方式：修改後重新指派
    state = state.setIn(['user','age'],20);
    state.getIn(['user','age']);//20
​
    // update，delete操作同上
           

• 判斷是否存在某個屬性：has(key)/hasIn(keys) 這應該也是實際開發中是比較常用的方法，通過判斷屬性是否存在來執行不同的操作，如可以判斷user.id來判斷使用者是否登入

if(state.hasIn(['user','id'])){
        // 使用者已經登入
    }else{
        // 使用者未登入
    }
           

• 判斷兩個資料是否相等: is(imA,imB) 在JS中，不管是資料還是對象，通過==或===隻能判斷兩個變量的引用位址是否為同一個對象，很難判斷兩個對象的鍵值是否相等，與JS不同，immutable是對兩個對象的hashCode和valueOf進行比較的
• 資料合并：merge()/mergeDeep() 還有一個比較常用的操作就是合并資料了，在JS我們一般使用Object.assign()來實作，但Object.assign()隻能做淺合并，對層級較深的資料可以使用immutable中使用mergeDeep()來實作，兩個方法都傳回合并後的資料。

const imA = Map({
        username:'馬雲',
        money:150000000000,
        info:{
            married:true,
            witticism:'我沒見過錢，我對錢不感興趣'
        }
    })
    const imB = Map({
        username:'laoxie',
        gender:'男',
        info:{
            married:false,
            age:18,
        }
    })
    const newImData = imA.merge(imB);
    console.log(newImData.toJS());
    //輸出 ：
    // {
    //     username:'laoxie',
    //     gender:'男',
    //     money:150000000000,
    //     info:{
    //         married:false,
    //         age:18,
    //     }
    // }

    const newImData = imA.mergeDeep(imB);
    //輸出 ：
    // {
    //     username:'laoxie',
    //     gender:'男',
    //     money:150000000000,
    //     info:{
    //         married:false,
    //         age:18,
    //         witticism:'我沒見過錢，我對錢不感興趣'
    //     }
    // }
           

當然Immutable的方法還有很多，本文本隻涉及到一引起基本操作，如果想要了解跟多資料類型的操作，請自行檢視官網