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]"