immutable.js基礎

在線測試 http://jsbin.com/desaxetubu/edit?html,js,console

從 JavaScript 數據生成不可變對象(支持數據嵌套):

Immutable.fromJS([1,2])
Immutable.fromJS({a: 1})

 

從 JavaScript 數據生成不可變對象(不支持數據嵌套):

Immutable.List([1,2]})
Immutable.Map({a: 1})

 

從不可變數據生成 JavaScript 對象

immutableData.toJS()

 

判斷兩個數據結構是否相等:

Immutable.is(immutableA, immutableB)

 

判斷兩個數據引用是否一致(shallow equal):

immutableA.is(immutableB) 

 

 

List

Immutable.List() # 空 List
Immutable.List([1,2])
Immutable.fromJS([1,2])

 

查看 List 的大小:

immutableA.size
immutableA.count()

 

判斷是不是 List:

Immutable.List.isList(x)

 

React 組件 propTypes 判斷是不是 List:

React.PropTypes.instanceOf(Immutable.List).isRequired

 

獲取 List 索引的元素(負數也是能運行的):

immutableData.get(0)
immutableData.get(-1) #反向索引

 

經過 getIn 訪問嵌套數組當中的數據:

immutableData.getIn [1, 2]

 

List 更新操做, 也就是建立一個新的 List 數據:

immutableA = Immutable.fromJS([0, 0, [1, 2]])
immutableB = immutableA.set 1, 1
immutableC = immutableB.update 1, (x) -> x + 1
immutableC = immutableB.updateIn [2, 1], (x) -> x + 1

 

排序, 有 sort 和 sortBy:

immutableData.sort (a, b) ->
 if a < b then return -1
 if a > b then return 1
 return 0
immutableData.sortBy (x) ->
  x

 

遍歷(返回 false 會終止遍歷):

immutableData.forEach (a, b) ->
  console.log a, b
  return true

 

查找, find 返回第一個匹配值, filter 返回 List:

immutableData.find (x) ->
  x > 1
immutableData.filter (x) ->
  x > 1
immutableData.filterNot (x) ->
  x <= 1

 

 

Map

Immutable.Map() # 空 Map
Immutable.Map({a: 1})
Immutable.fromJS({a: 1})

 

判斷 Map 的寫法和 List 判斷相似:

Immutable.Map.isMap(x)

 

得到 Map 中的數據:

immutableData.get('a')

 

經過 getIn 訪問嵌套的 Map 中的樹上:

immutableData.getIn ['a', 'b']

 

更新對象和嵌套的對象:

immutableB = immutableA.set ('a', 1)
immutableB = immutableA.setIn (['a', 'b'], 1)
immutableB = immutableA.update('a', (x) => x + 1)
immutableB = immutableA.updateIn (['a', 'b'], (x) => x + 1)

合併對象

immutableB = immutableA.merge(immutableC)
var arr1 = Immutable.fromJS([{name:'ada',age:16},{name:'xiaoai',age:17}])
var arr2 = Immutable.fromJS({name:'bxhw',age:22})
var arr3 = [...arr1,arr2]
var arr4 = arr1.setIn([0,'name'],'趙麗穎')

判斷屬性是否存在(undefined 也是存在的):

immutableData = Immutable.fromJS({key: null})
immutableData.has('key')

 

Map 的 filter 和 List 神似, 返回值 Map:

data = Immutable.fromJS({a: 1, b: 2})
data.filter (value, key) ->
 value is 1
# => Map {a: 1}

 

一樣 Map 也能夠作一些 reduce 操做, 以及其餘的方法, 相似 List:

immutableA.reduce (acc, value, key) ->
   acc.set key, value
, immutable.Map()

 

獲取 key 和 value 的數組形式:

immutableData.keySeq()
immutableData.valueSeq()

 

更多

從 JavaScript JSON Object 遷移主要用這兩個數據結構
然而文檔中提供的數據結構很是多, 記得本身看文檔, 咱們還有大量未探索的

fromJS()，用來建立immutable對象

<script src="immutable.min.js"></script>

var foo = Immutable.fromJS({a: {b: {c: 2}}});

getIn()，用來給immutable對象取值或賦值(當沒有對應key時能夠賦值，當有對應key時賦值無效)

get({x:1,y:2},'x') // 1  get不能獲取嵌套的數據
getIn({ x: { y: { z: 123 }}}, ['x', 'y', 'z']) // 123  getIn 能夠獲取嵌套的數據
getIn({ x: { y: { z: 123 }}}, ['x', 'q', 'p'], 'ifNotSet') // 'ifNotSet'

// 變量賦值的寫法
var foo = Immutable.fromJS({a: {b: {c: 2}}});
console.log(foo.getIn(['a', 'b', 'c']));  // 2
console.log(foo.getIn(['a', 'd', 'e'], 'hello')); // 'hello'

setIn()，用來給immutable對象賦值

const original = { x: { y: { z: 123 }}}
setIn(original, ['x', 'y', 'z'], 456) // { x: { y: { z: 456 }}}
console.log(original) // { x: { y: { z: 123 }}}

// 變量賦值的寫法，注意setIn()後要賦值給一個變量，這裏是bar
var foo = Immutable.fromJS({a: {b: {c: 2}}});
var bar = foo.setIn(['a', 'b', 'c'], 456)
console.log(bar.getIn(['a', 'b', 'c']) ) // 456

is()，用來比較兩個immutable對象

const map1 = Immutable.fromJS({ a: 1, b: 1, c: 1 })
const map2 = Immutable.fromJS({ a: 1, b: 1, c: 1 })
console.log(map1 === map2) // false
console.log(Immutable.is(map1, map2)) // true

 merge()，用來合併2個對象(重複的key會被覆蓋)

var original = Immutable.fromJS({ x: 123, y: 456 })
var original2 = original.merge({ y: 789, z: 'abc' }) // { x: 123, y: 789, z: 'abc' }
console.log(original.getIn(['y'])) // 456
console.log(original.getIn(['z'])) // undefind
console.log(original2.getIn(['y'])) // 789
console.log(original2.getIn(['z'])) // 'abc'

toJS()，用來將immutable對象深轉換爲js原生數組

const type = (type) => Object.prototype.toString.call(type)
const foo = Immutable.fromJS([1,2,3,4,5,6]);
const newFoo = foo.toJS()
console.log(type(foo))   // "[object Object]"
console.log(type(newFoo))  // "[object Array]"