在講不可變數(shù)據(jù)（Immutable Data）前，先說(shuō)說(shuō)可變數(shù)據(jù)（Mutable Data）,在原生js中創(chuàng)建的數(shù)據(jù)都是可變的,，如：

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

可能有小伙伴說(shuō),，可以用const啊，const對(duì)基本數(shù)據(jù)類型還行,，但對(duì)引用數(shù)據(jù)類型根本沒轍,，如

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

    a.qty;// 10

如果把對(duì)象a賦值給其它變量還會(huì)導(dǎo)致新的問(wèn)題，如：

     const a = {qty:1}
     const b = a;

    a.qty = 10;

    b.qty;//10

這時(shí)你會(huì)發(fā)現(xiàn),，修改了a,，b的值也跟著改了，這其實(shí)是js采用引用賦值的方式來(lái)實(shí)現(xiàn)數(shù)據(jù)共享的,，好處就是節(jié)省內(nèi)存,，但缺點(diǎn)也顯而易見，稍微不注意就會(huì)導(dǎo)致改A壞B的棘手問(wèn)題,，在復(fù)雜的項(xiàng)目中,，這種問(wèn)題還不易排查,，有諸多安全隱患。

之前的做法是,，利用深拷貝的方式來(lái)解決這個(gè)問(wèn)題,，雖然問(wèn)題解決了，但又會(huì)引發(fā)新的問(wèn)題：浪費(fèi)內(nèi)存,，還有對(duì)一些需要頻繁更新數(shù)據(jù)又有高性能要求的場(chǎng)景（如：React）,，深拷貝實(shí)則為一個(gè)不明智的操作，于是,，Imutable.js的出現(xiàn)就是要解決這些開發(fā)痛點(diǎn)的。

Immutable.js 由Facebook 工程師 Lee Byron 花費(fèi) 3 年時(shí)間打造,，在js中的引用賦值可以節(jié)省內(nèi)存,，但隨著應(yīng)用的不斷復(fù)雜后，狀態(tài)的改變往往會(huì)變成噩夢(mèng),，通常的做法是復(fù)制數(shù)據(jù)來(lái)避免被修改,，但這樣又造成了CPU和內(nèi)存的消耗，而Immutable利用結(jié)構(gòu)共享可以很好地解決這些問(wèn)題,。

不可變數(shù)據(jù)：Immutable Data

Immutable Data 是一旦創(chuàng)建,，就不能再被更改的數(shù)據(jù)。對(duì) Immutable 對(duì)象的任何修改或添加刪除操作都會(huì)返回一個(gè)新的 Immutable 對(duì)象,。Immutable 實(shí)現(xiàn)的原理是 Persistent Data Structure（持久化數(shù)據(jù)結(jié)構(gòu)）,，也就是對(duì)于不需要改變的數(shù)據(jù)采用結(jié)構(gòu)共享的方式，如下圖

<!-- 構(gòu)共享.webp "持久化數(shù)據(jù)結(jié)構(gòu)") -->

常用數(shù)據(jù)類型

• List: 有序索引集,，類似JS中的Array,。

• Map: 無(wú)序索引集，類似JS中的Object,。

• OrderedMap: 有序的Map,，根據(jù)數(shù)據(jù)的set()進(jìn)行排序。

• Set: 沒有重復(fù)值的集合,。

• OrderedSet: 有序的Set,，根據(jù)數(shù)據(jù)的add進(jìn)行排序。

• Stack: 有序集合,，支持使用unshift()和shift()添加和刪除,。

• Record: 一個(gè)用于生成Record實(shí)例的類。類似于JavaScript的Object,，但是只接收特定字符串為key,，具有默認(rèn)值。

• Seq: 序列,，但是可能不能由具體的數(shù)據(jù)結(jié)構(gòu)支持,。

• Collection: 是構(gòu)建所有數(shù)據(jù)結(jié)構(gòu)的基類,，不可以直接構(gòu)建。

正如你看到的,，immutable.js的數(shù)據(jù)類型有很多,，本文主要介紹比較常用的List和Map，對(duì)應(yīng)于js中的數(shù)組和對(duì)象,。

js與immutable之間的轉(zhuǎn)換

可通過(guò)fromJS()和toJS()兩個(gè)方式實(shí)現(xiàn)js和immuatble數(shù)據(jù)的轉(zhuǎn)換,，如：

    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()會(huì)深度轉(zhuǎn)換數(shù)據(jù)，隨之帶來(lái)的開銷較大,，盡可能避免使用,，單層數(shù)據(jù)轉(zhuǎn)換應(yīng)直接使用Map()和List()進(jìn)行轉(zhuǎn)換。另外,，還可以直接通過(guò)JSON.stringify()對(duì)immutable數(shù)據(jù)轉(zhuǎn)換也json字符串,。

    import {Map,List} from 'immutable';

    const initState = Map({
        breadcrumb:List([]),
        user:Map({}),
        manageMenuStatus:false
    })

操作immutable數(shù)據(jù)

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

Map 和 List的通用方法，實(shí)現(xiàn)如下

    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屬性數(shù)據(jù)
    state.getIn(['user','hobby',1]) // 電影

注意: 和傳統(tǒng)的js不同,，getIn()獲取深層深套對(duì)象的值時(shí)不需要做每一層級(jí)的判斷是否存在,，如不存在則會(huì)返回undefined(JS中如果不判空會(huì)報(bào)錯(cuò))

• 添加immutable中的數(shù)據(jù)：set(key,val)/setIn(keys,val)

• 刪除屬性：delete(key)/deleteIn(keys)

• 更新屬性：update(key,val=>newVal)/updateIn(keys,val=>newVal) 如開頭所說(shuō)的，Immutable Data為不可變數(shù)據(jù),，所有針對(duì)immutable的增刪改都不會(huì)修改原數(shù)據(jù),，而是返回一個(gè)新的值，所以需要給變量重新賦值,。

    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操作同上

• 判斷是否存在某個(gè)屬性：has(key)/hasIn(keys) 這應(yīng)該也是實(shí)際開發(fā)中是比較常用的方法,，通過(guò)判斷屬性是否存在來(lái)執(zhí)行不同的操作,，如可以判斷user.id來(lái)判斷用戶是否登錄

    if(state.hasIn(['user','id'])){
        // 用戶已經(jīng)登錄
    }else{
        // 用戶未登錄
    }

• 判斷兩個(gè)數(shù)據(jù)是否相等: is(imA,imB) 在JS中，不管是數(shù)據(jù)還是對(duì)象,，通過(guò)==或===只能判斷兩個(gè)變量的引用地址是否為同一個(gè)對(duì)象,，很難判斷兩個(gè)對(duì)象的鍵值是否相等，與JS不同,，immutable是對(duì)兩個(gè)對(duì)象的hashCode和valueOf進(jìn)行比較的

• 數(shù)據(jù)合并：merge()/mergeDeep() 還有一個(gè)比較常用的操作就是合并數(shù)據(jù)了,，在JS我們一般使用Object.assign()來(lái)實(shí)現(xiàn)，但Object.assign()只能做淺合并,，對(duì)層級(jí)較深的數(shù)據(jù)可以使用immutable中使用mergeDeep()來(lái)實(shí)現(xiàn),，兩個(gè)方法都返回合并后的數(shù)據(jù)。

    const imA = Map({
        username:'馬云',
        money:150000000000,
        info:{
            married:true,
            witticism:'我沒見過(guò)錢,，我對(duì)錢不感興趣'
        }
    })
    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:'我沒見過(guò)錢,，我對(duì)錢不感興趣'
    //     }
    // }

當(dāng)然Immutable的方法還有很多，本文本只涉及到一引起基本操作,，如果想要了解跟多數(shù)據(jù)類型的操作,，請(qǐng)自行查看官網(wǎng)