一、Immutable簡介
Immutable Data 就是一旦創建,就不能再被更改的數據。對 Immutable 對象的任何修改或添加刪除操作都會返回一個新的 Immutable 對象。Immutable 實現的原理是 Persistent Data Structure(持久化數據結構),也就是使用舊數據創建新數據時,要保證舊數據同時可用且不變。同時為了避免 deepCopy 把所有節點都復制一遍帶來的性能損耗。
在js中,引用類型的數據,優點在於頻繁的操作數據都是在原對象的基礎上修改,不會創建新對象,從而可以有效的利用內存,不會浪費內存,這種特性稱為mutable(可變),但恰恰它的優點也是它的缺點,太過於靈活多變在復雜數據的場景下也造成了它的不可控性,假設一個對象在多處用到,在某一處不小心修改了數據,其他地方很難預見到數據是如何改變的,針對這種問題的解決方法,一般就像剛才的例子,會想復制一個新對象,再在新對象上做修改,這無疑會造成更多的性能問題以及內存浪費。
為了解決這種問題,出現了immutable對象,每次修改immutable對象都會創建一個新的不可變對象,而老的對象不會改變。
二、Immutable注意的地方
1、約定變量命名規則:如所有 Immutable 類型對象以 $$ 開頭。
2、fromJS和toJS會深度轉換數據,隨之帶來的開銷較大,盡可能避免使用,單層數據轉換使用Map()和List()
3、js是弱類型,但Map類型的key必須是string
4、所有針對immutable變量的增刪改必須左邊有賦值,因為所有操作都不會改變原來的值,只是生成一個新的變量
5、immutable對象直接可以轉JSON.stringify(),不需要顯式手動調用toJS()轉原生
6、判斷對象是否是空可以直接用size
三、Immutable常用API
//Map() 原生object轉Map對象 (只會轉換第一層,注意和fromJS區別) immutable.Map({name:'danny', age:18}) //List() 原生array轉List對象 (只會轉換第一層,注意和fromJS區別) immutable.List([1,2,3,4,5]) //fromJS() 原生js轉immutable對象 (深度轉換,會將內部嵌套的對象和數組全部轉成immutable) immutable.fromJS([1,2,3,4,5]) //將原生array --> List immutable.fromJS({name:'danny', age:18}) //將原生object --> Map //toJS() immutable對象轉原生js (深度轉換,會將內部嵌套的Map和List全部轉換成原生js) immutableData.toJS(); //查看List或者map大小 immutableData.size 或者 immutableData.count() // is() 判斷兩個immutable對象是否相等 immutable.is(imA, imB); //merge() 對象合並 var imA = immutable.fromJS({a:1,b:2}); var imA = immutable.fromJS({c:3}); var imC = imA.merge(imB); console.log(imC.toJS()) //{a:1,b:2,c:3} //增刪改查(所有操作都會返回新的值,不會修改原來值) var immutableData = immutable.fromJS({ a:1, b:2, c:{ d:3 } }); var data1 = immutableData.get('a') // data1 = 1 var data2 = immutableData.getIn(['c', 'd']) // data2 = 3 getIn用於深層結構訪問 var data3 = immutableData.set('a' , 2); // data3中的 a = 2 var data4 = immutableData.setIn(['c', 'd'], 4); //data4中的 d = 4 var data5 = immutableData.update('a',function(x){return x+4}) //data5中的 a = 5 var data6 = immutableData.updateIn(['c', 'd'],function(x){return x+4}) //data6中的 d = 7 var data7 = immutableData.delete('a') //data7中的 a 不存在 var data8 = immutableData.deleteIn(['c', 'd']) //data8中的 d 不存在
3-1、set 設置
3-2、equals、is:比較值是否相等
3-3、push、unshift、concat
3-4、map遍歷
3-5、merge
3-6、fromJs:把js對象轉換成map,把數組轉換成List
3-7、toObject | toArray | toJS
toObject:只轉一層
toArray:轉成數組類型,同樣只轉一層
toJs:都轉
3-8、getIn | get