在講不可變數(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賦值給其它變量還會導(dǎo)致新的問題，如：
const a = {qty:1}
const b = a;
a.qty = 10;
b.qty;//10
這時(shí)你會發(fā)現(xiàn)，修改了a，b的值也跟著改了，這其實(shí)是js采用引用賦值的方式來實(shí)現(xiàn)數(shù)據(jù)共享的，好處就是節(jié)省內(nèi)存，但缺點(diǎn)也顯而易見，稍微不注意就會導(dǎo)致改A壞B的棘手問題，在復(fù)雜的項(xiàng)目中，這種問題還不易排查，有諸多安全隱患。
之前的做法是，利用深拷貝的方式來解決這個問題，雖然問題解決了，但又會引發(fā)新的問題：浪費(fèi)內(nèi)存，還有對一些需要頻繁更新數(shù)據(jù)又有高性能要求的場景(如：React)，深拷貝實(shí)則為一個不明智的操作，于是，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)的改變往往會變成噩夢，通常的做法是復(fù)制數(shù)據(jù)來避免被修改，但這樣又造成了CPU和內(nèi)存的消耗，而Immutable利用結(jié)構(gòu)共享可以很好地解決這些問題。
不可變數(shù)據(jù)：Immutable Data
Immutable Data 是一旦創(chuàng)建，就不能再被更改的數(shù)據(jù)。對 Immutable 對象的任何修改或添加刪除操作都會返回一個新的 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: 一個用于生成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()兩個方式實(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()會深度轉(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í)不需要做每一層級的判斷是否存在，如不存在則會返回undefined(JS中如果不判空會報(bào)錯)
· 添加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) 這應(yīng)該也是實(shí)際開發(fā)中是比較常用的方法，通過判斷屬性是否存在來執(zhí)行不同的操作，如可以判斷user.id來判斷用戶是否登錄
if(state.hasIn(['user','id'])){
// 用戶已經(jīng)登錄
}else{
// 用戶未登錄
}
· 判斷兩個數(shù)據(jù)是否相等: is(imA,imB) 在JS中，不管是數(shù)據(jù)還是對象，通過==或===只能判斷兩個變量的引用地址是否為同一個對象，很難判斷兩個對象的鍵值是否相等，與JS不同，immutable是對兩個對象的hashCode和valueOf進(jìn)行比較的
· 數(shù)據(jù)合并：merge()/mergeDeep() 還有一個比較常用的操作就是合并數(shù)據(jù)了，在JS我們一般使用Object.assign()來實(shí)現(xiàn)，但Object.assign()只能做淺合并，對層級較深的數(shù)據(jù)可以使用immutable中使用mergeDeep()來實(shí)現(xiàn)，兩個方法都返回合并后的數(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)。
京公網(wǎng)安備 11010802030320號