在线测试 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() # 空 ListImmutable.List([1,2])Immutable.fromJS([1,2])
查看 List 的大小:
immutableA.sizeimmutableA.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, 1immutableC = immutableB.update 1, (x) -> x + 1immutableC = 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 0immutableData.sortBy (x) -> x
遍历(返回 false 会终止遍历):
immutableData.forEach (a, b) -> console.log a, b return true
查找, find 返回第一个匹配值, filter 返回 List:
immutableData.find (x) -> x > 1immutableData.filter (x) -> x > 1immutableData.filterNot (x) -> x <= 1
Map
Immutable.Map() # 空 MapImmutable.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对象
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) // falseconsole.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]"