# 一、fromJS
- 作用:是最最常用的将原生JS数据转换为
ImmutableJS数据的转换方法,默认将原生JS的Array转为List,Object转为Map
Immutable.fromJS({
a: {
b: [1, 2, 3],
c: 40
}
});
// 得到
Map {
"a": Map {
"b": List [1, 2, 3],
"c": 40
}
}
// 常见
const t1 = Immutable.fromJS({a: {b: [10, 20, 30]}, c: 40});
console.log(t1);
// 不常用
const t2 = Immutable.fromJS({a: {b: [10, 20, 30]}, c: 40}, function(key, value) {
// 定制转换方式,下这种就是将Array转换为List,Object转换为Map
const isIndexed = Immutable.Iterable.isIndexed(value);
return isIndexed ? value.toList() : value.toOrderedMap();
// true, "b", {b: [10, 20, 30]}
// false, "a", {a: {b: [10, 20, 30]}, c: 40}
// false, "", {"": {a: {b: [10, 20, 30]}, c: 40}}
});
console.log(t2);
@前端进阶之旅: 代码已经复制到剪贴板
# 二、toJS
- 作用:将一个
Immutable数据转换为JS类型的数据 - 用法:
value.toJS()
# 三、is
- 作用:对两个对象进行比较
- 用法:
is(map1,map2)
import { Map, is } from 'immutable'
const map1 = Map({ a: 1, b: 1, c: 1 })
const map2 = Map({ a: 1, b: 1, c: 1 })
map1 === map2 //false
Object.is(map1, map2) // false
is(map1, map2) // true 只检测值是否相等
@前端进阶之旅: 代码已经复制到剪贴板
# 四、List 和 Map
# 4.1 创建
List有序索引密集的集合,和JS中的Array很像Map无序索引集,类似JavaScript中的Object
# 4.2 判断
List.isList()和Map.isMap()判断一个数据结构是不是List/Map类型
# 4.3 长度
# 4.3.1 size 获取List/Map的长度**
// list
console.log(List([1,2,3,4]).size);// 4
console.log(List.of(1, 2, 3, 4).size);// 4
// map
console.log(Map({key: "value2", key1: "value1"}).size);// 2
console.log(Map.of({x:1}, 2, [3], 4).size);// 2
@前端进阶之旅: 代码已经复制到剪贴板
# 4.3.2 count()
// map
console.log(Immutable.fromJS({key: "value2", key1: "value1"}).count());// 4
// 可以定制条件,来确定大小
console.log(Immutable.fromJS({key: 1, key1: 34}).count((value, key, obj) => {
return value > 3;
}));// 1 value大于3的有两个
// list
console.log(Immutable.fromJS([1, 2, 5, 6]).count());// 4
// 可以制定条件,来确定 大小
console.log(Immutable.fromJS([1, 2, 5, 6]).count((value, index, array) => {
return value > 3;
}));// 2 大于3的有两个
@前端进阶之旅: 代码已经复制到剪贴板
# 4.4 数据读取
# 4.4.1 get() 、 getIn()
获取数据结构中的数据
# 4.4.2 has() 、 hasIn()
判断是否存在某一个
key
Immutable.fromJS([1,2,3,{a:4,b:5}]).has('0'); //true
Immutable.fromJS([1,2,3,{a:4,b:5}]).has('0'); //true
Immutable.fromJS([1,2,3,{a:4,b:5}]).hasIn([3,'b']) //true
@前端进阶之旅: 代码已经复制到剪贴板
# 4.4.3 includes()
判断是否存在某一个
value
Immutable.fromJS([1,2,3,{a:4,b:5}]).includes(2); //true
Immutable.fromJS([1,2,3,{a:4,b:5}]).includes('2'); //false 不包含字符2
Immutable.fromJS([1,2,3,{a:4,b:5}]).includes(5); //false
Immutable.fromJS([1,2,3,{a:4,b:5}]).includes({a:4,b:5}) //false
Immutable.fromJS([1,2,3,{a:4,b:5}]).includes(Immutable.fromJS({a:4,b:5})) //true
@前端进阶之旅: 代码已经复制到剪贴板
# 4.4.4 first() 、 last()
用来获取第一个元素或者最后一个元素,若没有则返回
undefined
Immutable.fromJS([1,2,3,{a:4,b:5}]).first()//1
Immutable.fromJS([1,2,3,{a:4,b:5}]).last()//{a:4,b:5}
Immutable.fromJS({a:1,b:2,c:{d:3,e:4}}).first() //1
Immutable.fromJS({a:1,b:2,c:{d:3,e:4}}).first() //{d:3,e:4}
@前端进阶之旅: 代码已经复制到剪贴板
# 4.5 数据修改
# 4.5.1 set()
设置第一层
key、index的值
/ Map
// 将 key 位置的元素替换为 value
const $obj1 = Map({a: {a1: 34}, b: 2, c: 3, d: 444});
console.log($obj1.set('a', 0).toJS()); // {a: 0, b: 2, c: 3, d: 444}
console.log($obj1.set('e', 99).toJS()); // {a: 1, b: 2, c: 3, d: 444, e: 99}
// List
// 将 index 位置的元素替换为 value,即使索引越界也是安全的, 空位 undefined
const $arr1 = List([1, 2, 3]);
console.log($arr1.set(-1, 0).toJS()); // [1, 2, 0] 注意-1 等效于 $arr1.set($arr1.size + -1, 0)
console.log($arr1.set(4, 0).toJS()); // [ 1, 2, 3, undefined, 0 ] 空位置为了undefined
@前端进阶之旅: 代码已经复制到剪贴板
# 4.5.2 setIn()
设置深层结构中某属性的值
// Map
console.log(Immutable.fromJS([1, 2, 3, {a: 45, b: 64}]).setIn(['3', 'a'], 1000).toJS());//[1, 2, 3, {a: 1000, b: 64}]
// List
console.log(Immutable.fromJS([1, 2, 3, {a: 45, b: 64}]).setIn(['3', 'a'], 1000).toJS());//[1, 2, 3, {a: 1000, b: 64}]
@前端进阶之旅: 代码已经复制到剪贴板
# 4.5.3 deleteIn()
用来删除深层数据,用法参考
setIn
# 4.5.4 更新 update()
对对象中的某个属性进行更新,可对原数据进行相关操作
////List
const list = List([ 'a', 'b', 'c' ])
const result = list.update(2, val => val.toUpperCase())
///Map
const aMap = Map({ key: 'value' })
const newMap = aMap.update('key', value => value + value)
@前端进阶之旅: 代码已经复制到剪贴板
# 4.5.5 clear()
清除所有数据
Map({ key: 'value' }).clear() //Map
List([ 1, 2, 3, 4 ]).clear() // List
@前端进阶之旅: 代码已经复制到剪贴板
# 4.6 List中的删除与插入
# 4.6.1 数组方法
List对应的数据结构是js中的数组,所以数组的一些方法在Immutable中也是通用的,比如push,pop,shift,unshift,insert
push():在List末尾插入一个元素pop(): 在List末尾删除一个元素unshift: 在List首部插入一个元素shift: 在List首部删除一个元素insert:在List的index处插入元素
List([ 0, 1, 2, 3, 4 ]).insert(6, 5) //List [ 0, 1, 2, 3, 4, 5 ]
List([ 1, 2, 3, 4 ]).push(5) // List [ 1, 2, 3, 4, 5 ]
List([ 1, 2, 3, 4 ]).pop() // List[ 1, 2, 3 ]
List([ 2, 3, 4]).unshift(1) // List [ 1, 2, 3, 4 ]
List([ 0, 1, 2, 3, 4 ]).shift() // List [ 1, 2, 3, 4 ]
@前端进阶之旅: 代码已经复制到剪贴板
# 4.7 关于merge
merge浅合并,新数据与旧数据对比,旧数据中不存在的属性直接添加,旧数据中已存在的属性用新数据中的覆盖mergrWith自定义浅合并,可自行设置某些属性的值mergeIn对深层数据进行浅合并mergeDeep深合并,新旧数据中同时存在的的属性为新旧数据合并之后的数据mergeDeepIn对深层数据进行深合并mergrDeepWith自定义深合并,可自行设置某些属性的值
这里用一段示例彻底搞懂
merge,此示例为Map结构,List与Map原理相同
# 4.8 序列算法
# 4.8.1 concat()
对象的拼接,用法与
js数组中的concat()相同,返回一个新的对象
const List = list1.concat(list2)
@前端进阶之旅: 代码已经复制到剪贴板
# 4.8.2 map()
遍历整个对象,对
Map/List元素进行操作,返回一个新的对象
Map({a:1,b:2}).map(val=>10*val)
//Map{a:10,b:20}
@前端进阶之旅: 代码已经复制到剪贴板