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

　　var a = {qty:1}

　　a.qty = 10;

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

　　const a = {qty:1}

　　a.qty = 10;

　　a.qty;// 10

　　如果把對象a賦值給其它變量還會導致新的問題，如：

　　const a = {qty:1}

　　const b = a;

　　a.qty = 10;

　　b.qty;//10

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

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

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

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

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

　　點擊鏈接查看效果：

　　https://vdn6.vzuu.com/SD/1cbd3a64-238b-11eb-b273-3ab99130e4ee.mp4?pkey=AAWnm1nWn8WVZRmFCwNiDTrJFRVmw_dbgixavz8kuqEgJpVyPgzjcFTWoTe9lYiFQkxRTa_Xrvf58rwCMA5BkKKt&c=avc.0.0&f=mp4&pu=078babd7&bu=078babd7&expiration=1661422409&v=ks6

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

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

　　· Map: 無序索引集，類似JS中的Object。

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

　　· Set: 沒有重復值的集合。

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

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

　　· Record: 一個用于生成Record實例的類。類似于JavaScript的Object，但是只接收特定字符串為key，具有默認值。

　　· Seq: 序列，但是可能不能由具體的數(shù)據(jù)結構支持。

　　· Collection: 是構建所有數(shù)據(jù)結構的基類，不可以直接構建。

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

　　js與immutable之間的轉換

　　可通過fromJS()和toJS()兩個方式實現(xiàn)js和immuatble數(shù)據(jù)的轉換，如：

　　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()會深度轉換數(shù)據(jù)，隨之帶來的開銷較大，盡可能避免使用，單層數(shù)據(jù)轉換應直接使用Map()和List()進行轉換。另外，還可以直接通過JSON.stringify()對immutable數(shù)據(jù)轉換也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的通用方法，實現(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()獲取深層深套對象的值時不需要做每一層級的判斷是否存在，如不存在則會返回undefined(JS中如果不判空會報錯)

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

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

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

　　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) 這應該也是實際開發(fā)中是比較常用的方法，通過判斷屬性是否存在來執(zhí)行不同的操作，如可以判斷user.id來判斷用戶是否登錄

　　if(state.hasIn(['user','id'])){

　　// 用戶已經(jīng)登錄

　　}else{

　　// 用戶未登錄

　　}

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

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

　　const imA = Map({

　　username:'馬云',

　　money:150000000000,

　　info:{

　　married:true,

　　witticism:'我沒見過錢，我對錢不感興趣'

　　}

　　})

　　const imB = Map({

　　username:'laoxie',

　　gender:'男',

　　info:{