在講不可變數(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賦值給其它變量還會(huì)導(dǎo)致新的問題，如：

　　const a = {qty:1}

　　const b = a;

　　a.qty = 10;

　　b.qty;//10

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

　　之前的做法是，利用深拷貝的方式來解決這個(gè)問題，雖然問題解決了，但又會(huì)引發(fā)新的問題：浪費(fèi)內(nèi)存，還有對一些需要頻繁更新數(shù)據(jù)又有高性能要求的場景(如：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ì)變成噩夢，通常的做法是復(fù)制數(shù)據(jù)來避免被修改，但這樣又造成了CPU和內(nèi)存的消耗，而Immutable利用結(jié)構(gòu)共享可以很好地解決這些問題。

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

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

　　點(diǎn)擊鏈接查看效果：

　　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()進(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，對應(yīng)于js中的數(shù)組和對象。

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

　　可通過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ù)，隨之帶來的開銷較大，盡可能避免使用，單層數(shù)據(jù)轉(zhuǎn)換應(yīng)直接使用Map()和List()進(jìn)行轉(zhuǎn)換。另外，還可以直接通過JSON.stringify()對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()獲取深層深套對象的值時(shí)不需要做每一層級的判斷是否存在，如不存在則會(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) 如開頭所說的，Immutable Data為不可變數(shù)據(jù)，所有針對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ā)中是比較常用的方法，通過判斷屬性是否存在來執(zhí)行不同的操作，如可以判斷user.id來判斷用戶是否登錄

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

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

　　}else{

　　// 用戶未登錄

　　}

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

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

　　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:'我沒見過錢，我對錢不感興趣'

　　// }

　　// }

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