在講不可變數據(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(持久化數據結構)，也就是對于不需要改變的數據采用結構共享的方式。
點擊鏈接查看效果：
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
常用數據類型
· 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的方法還有很多，本文本只涉及到一引起基本操作，如果想要了解跟多數據類型的操作，請自行查看官網。
京公網安備 11010802030320號