imutable.js常用增刪改查操作說明

圖靈大盜發表於2018-03-22
JS

imutable.js常用操作

參考文件

imutable

Immutable.fromJS()格式化過的js資料，裡面資料是物件的可以使用對應的Map中的方法，裡面資料是陣列的可以使用對應的List方法 。

示例

var $$state = Immutable.fromJS({a:[2,3,4]})
複製程式碼
1. 對於單層資料使用update，出現多層巢狀的資料，使用updateIn`
//設定或者修改某一項的值
$$state.update('a',list=>list.set(0,55)).toJS() // {a:[55,3,4]} 
複製程式碼
2. 新增 同陣列方法
$$state.update('a',list=>list.push(10)).toJS() // // {a:[2,3,4,10]}
複製程式碼
3. 刪除 同陣列的splice 需要傳入要刪除項的索引
$$state.update('a',list=>list.delete(0)).toJS() // {a:[3,4]}
複製程式碼
3. 清空陣列中的資料
$$state.update('a',list=>list.clear()).toJS() // {a:[]}
複製程式碼
4.刪除陣列的最後一項
$$state.update('a',list=>list.pop()).toJS() // {a:[2,3]}
複製程式碼
5. 向陣列的第一項新增資料
$$state.update('a',list=>list.unshift(20)).toJS()  // {a:[20,2,3,4]}
複製程式碼
6. 更新陣列的某一項
$$state.update('a',list=>list.update(0,list2=>list2 = 99)).toJS() // {a:[99,3,4]}
複製程式碼
7. 合併陣列 會將對應索引的項覆蓋,如果沒有對應的索引，則新增
$$state.update('a',list=>list.merge([99,4,5,10])).toJS() // {a:[99,4,5,10]}
複製程式碼
8. 注意使用keyPath [0,1] 時,對List型別不太好使,fromJS處理過的可以使用
var imArr = Immutable.fromJS([2,3,[3,4,5,[6,7,8]]])
imArr.setIn([2,0],88).toJS() //對 第3項的第一項修改
複製程式碼
var data1 = Immutable.fromJS({ a: { b: { c: 10 } } });
//mergeDeep不需要寫回撥函式，第二個引數是要修改的值
data1.mergeDeep(['a','b','c'],22).toJS()

mergeIn和updateIn的區別 mergeIn不需要寫回撥函式，第二個引數是要修改的值;updateIn需要些回撥函式，在回撥函式裡面修改引數
d.updateIn(['a','b'],abc=>abc.merge({c:666})).toJS()
複製程式碼
9. 根據一組索引刪除掉陣列中對應的資料
//eg.原生js
var arr = ['aaa','bbb','ccc','ddd'];
var indexArr = [0,3,2];
arr.filter((item2,index)=> indexArr.indexOf(index) !==-1) // ['bbb']


//eg. ImutableJS對應的方法

var data = Immutable.fromJS({a:[{a:11},{a:22},{a:33},{a:44}]})
var indexArr = [1,3];
data.updateIn('a',list=>list.filter((v,index)=> indexArr.indexOf(index) === -1)).toJS() // {a:[{a:11},{a:33}]}

複製程式碼

訪問圖靈大盜的github

相關文章