盒子
盒子
文章目录󰁋
  1. 一、fromJS
  2. 二、toJS
  3. 三、is
  4. 四、List 和 Map
    1. 4.1 创建
    2. 4.2 判断
    3. 4.3 长度
      1. 4.3.1 size 获取List/Map的长度**
      2. 4.3.2 count()
    4. 4.4 数据读取
      1. 4.4.1 get() 、 getIn()
      2. 4.4.2 has() 、 hasIn()
      3. 4.4.3 includes()
      4. 4.4.4 first() 、 last()
    5. 4.5 数据修改
      1. 4.5.1 set()
      2. 4.5.2 setIn()
      3. 4.5.3 deleteIn()
      4. 4.5.4 更新 update()
      5. 4.5.5 clear()
    6. 4.6 List中的删除与插入
      1. 4.6.1 数组方法
    7. 4.7 关于merge
    8. 4.8 序列算法
      1. 4.8.1 concat()
      2. 4.8.2 map()
      3. 4.8.3 mapKey()
      4. 4.8.4 mapEntries
      5. 4.8.5 filter
      6. 4.8.6 reverse
      7. 4.8.7 sort & sortBy
      8. 4.8.8 groupBy
    9. 4.9 查找数据
      1. 4.9.1 indexOf lastIndexOf
      2. 4.9.2 findIndex() 、 findLastIndex()
      3. 4.9.3 find() 、 findLast()
      4. 4.9.4 findKey() 、 findLastKey()
      5. 4.9.5 findEntry() 、 findLastEntry()
      6. 4.9.6 keyOf() lastKeyOf()
      7. 4.9.7 max() 、 maxBy()
      8. 4.9.8 min() 、 minBy()
    10. 4.10 创建子集
      1. 4.10.1 slice()
      2. 4.10.2 rest()
      3. 4.10.3butLast()
      4. 4.10.4 skip()
      5. 4.10.5 skipLast()
      6. 4.10.6 skipWhile()
      7. 4.10.7 take()
      8. 4.10.8 takeLast()
      9. 4.10.9 takeWhile()
    11. 4.11 处理数据
      1. 4.11.1 reduce()
      2. 4.11.2 reduceRight()
      3. 4.11.3 every()
      4. 4.11.4 some()
      5. 4.11.5 join()
      6. 4.11.6 isEmpty()
      7. 4.11.7 countBy()

梳理Immutable常用API

一、fromJS

  • 作用:是最最常用的将原生JS数据转换为ImmutableJS数据的转换方法,默认将原生JSArray转为ListObject转为Map
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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)
1
2
3
4
5
6
7
8
9
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的长度**

1
2
3
4
5
6
7
// 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()

1
2
3
4
5
6
7
8
9
10
11
12
13
// 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

1
2
3
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

1
2
3
4
5
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

1
2
3
4
5
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()

设置第一层keyindex的值

1
2
3
4
5
6
7
8
9
10
11
/ 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()

设置深层结构中某属性的值

1
2
3
4
5
// 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()

对对象中的某个属性进行更新,可对原数据进行相关操作

1
2
3
4
5
6
7
////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()

清除所有数据

1
2
Map({ key: 'value' }).clear()  //Map
List([ 1, 2, 3, 4 ]).clear() // List

4.6 List中的删除与插入

4.6.1 数组方法

List对应的数据结构是js中的数组,所以数组的一些方法在Immutable中也是通用的,比如pushpop,shiftunshiftinsert

  • push():在List末尾插入一个元素
  • pop(): 在List末尾删除一个元素
  • unshift: 在List首部插入一个元素
  • shift: 在List首部删除一个元素
  • insert:在Listindex处插入元素
1
2
3
4
5
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结构,ListMap原理相同

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const Map1 = Immutable.fromJS({a:111,b:222,c:{d:333,e:444}});
const Map2 = Immutable.fromJS({a:111,b:222,c:{e:444,f:555}});

const Map3 = Map1.merge(Map2);
//Map {a:111,b:222,c:{e:444,f:555}}
const Map4 = Map1.mergeDeep(Map2);
//Map {a:111,b:222,c:{d:333,e:444,f:555}}
const Map5 = Map1.mergeWith((oldData,newData,key)=>{
if(key === 'a'){
return 666;
}else{
return newData
}
},Map2);
//Map {a:666,b:222,c:{e:444,f:555}}

4.8 序列算法

4.8.1 concat()

对象的拼接,用法与js数组中的concat()相同,返回一个新的对象

1
const List = list1.concat(list2)

4.8.2 map()

遍历整个对象,对Map/List元素进行操作,返回一个新的对象

1
2
Map({a:1,b:2}).map(val=>10*val)
//Map{a:10,b:20}

4.8.3 mapKey()

Map特有的mapKey() 遍历整个对象,对Map元素的key进行操作,返回一个新的对象

1
2
Map({a:1,b:2}).mapKey(val=>val+'l')
//Map{al:10,bl:20}

4.8.4 mapEntries

Map特有的mapEntries() 遍历整个对象,对Map元素的keyvalue同时进行操作,返回一个新的对象。Mapmap()也可实现此功能

1
2
3
4
Map({a:1,b:2}).map((key,val)=>{
return [key+'l',val*10]
})
//Map{al:10,bl:20}

4.8.5 filter

  • 过滤 filter 返回一个新的对象,包括所有满足过滤条件的元素
  • 还有一个filterNot()方法,与此方法正好相反
1
2
3
4
Map({a:1,b:2}).filter((key,val)=>{
return val == 2
})
//Map{b:2}

4.8.6 reverse

作用:将数据的结构进行反转

1
2
3
Immutable.fromJS([1, 2, 3, 4, 5]).reverse(); // List [5,4,3,2,1]
Immutable.fromJS({a:1,b:{c:2,d:3},e:4}).recerse();
//Map {e:4,b:{c:2,d:3},a:1}

4.8.7 sort & sortBy

排序 sort & sortBy 作用:对数据结构进行排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
///List
Immutable.fromJS([4,3,5,2,6,1]).sort()
// List [1,2,3,4,5,6]
Immutable.fromJS([4,3,5,2,6,1]).sort((a,b)=>{
if (a < b) { return -1; }
if (a > b) { return 1; }
if (a === b) { return 0; }
})
// List [1,2,3,4,5,6]
Immutable.fromJS([{a:3},{a:2},{a:4},{a:1}]).sortBy((val,index,obj)=>{
return val.get('a')
},(a,b)=>{
if (a < b) { return -1; }
if (a > b) { return 1; }
if (a === b) { return 0; }
})
//List [ {a:3}, {a:2}, {a:4}, {a:1} ]

//Map

Immutable.fromJS( {b:1, a: 3, c: 2, d:5} ).sort()
//Map {b: 1, c: 2, a: 3, d: 5}
Immutable.fromJS( {b:1, a: 3, c: 2, d:5} ).sort((a,b)=>{
if (a < b) { return -1; }
if (a > b) { return 1; }
if (a === b) { return 0; }
})
//Map {b: 1, c: 2, a: 3, d: 5}
Immutable.fromJS( {b:1, a: 3, c: 2, d:5} ).sortBy((value, key, obj)=> {
return value
})
//Map {b: 1, c: 2, a: 3, d: 5}

4.8.8 groupBy

分组 groupBy 作用:对数据进行分组

1
2
3
4
5
6
7
8
9
10
11
12
13
const listOfMaps = List([
Map({ v: 0 }),
Map({ v: 1 }),
Map({ v: 1 }),
Map({ v: 0 }),
Map({ v: 2 })
])
const groupsOfMaps = listOfMaps.groupBy(x => x.get('v'))
// Map {
// 0: List [ Map{ "v": 0 }, Map { "v": 0 } ],
// 1: List [ Map{ "v": 1 }, Map { "v": 1 } ],
// 2: List [ Map{ "v": 2 } ],
// }

4.9 查找数据

4.9.1 indexOf lastIndexOf

Map不存在此方法 和js数组中的方法相同,查找第一个或者最后一个valueindex值,找不到则返回-1

1
2
Immutable.fromJS([1,2,3,4]).indexof(3) //2
Immutable.fromJS([1,2,3,4]).lastIndexof(3) //2

4.9.2 findIndex() 、 findLastIndex()

Map不存在此方法,查找满足要求的元素的index

1
2
3
4
5
6
Immutable.fromJS([1,2,3,4]).findIndex((value,index,array)=>{
return value%2 === 0;
}) // 1
Immutable.fromJS([1,2,3,4]).findLastIndex((value,index,array)=>{
return index%2 === 0;
}) // 3

4.9.3 find() 、 findLast()

查找满足条件的元素的value

1
2
3
4
5
6
7
Immutable.fromJS([1,2,3,4]).find((value,index,array)=>{
return value%2 === 0;
}) // 2

Immutable.fromJS([1,2,3,4]).findLast((value,index,array)=>{
return value%2 === 0;
}) // 4

4.9.4 findKey() 、 findLastKey()

查找满足条件的元素的key

1
2
3
4
5
6
7
Immutable.fromJS([1,2,3,4]).findKey((value,index,array)=>{
return value%2 === 0;
}) // 1

Immutable.fromJS([1,2,3,4]).findLastKey((value,index,array)=>{
return value%2 === 0;
}) // 3

4.9.5 findEntry() 、 findLastEntry()

查找满足条件的元素的键值对 key:value

1
2
3
4
5
6
7
Immutable.fromJS([1,2,3,4]).findEntry((value,index,array)=>{
return value%2 === 0;
}) // [1,2]

Immutable.fromJS([1,2,3,4]).findLastEntry((value,index,array)=>{
return value%2 === 0;
}) // [3,4]

4.9.6 keyOf() lastKeyOf()

查找某一个value对应的key

1
2
Immutable.fromJS([1,2,3,4]).keyOf(2) //1
Immutable.fromJS([1,2,3,4]).lastKeyOf(2) //1

4.9.7 max() 、 maxBy()

查找最大值

1
2
3
4
5
Immutable.fromJS([1, 2, 3, 4]).max() //4

Immutable.fromJS([{a;1},{a:2},{a: 3},{a:4}]).maxBy((value,index,array)=>{
return value.get('a')
}) //{a:4}

4.9.8 min() 、 minBy()

查找最小值

1
2
3
4
5
Immutable.fromJS([1, 2, 3, 4]).min() //1

Immutable.fromJS([{a;1},{a:2},{a: 3},{a:4}]).minBy((value,index,array)=>{
return value.get('a')
}) //{a:1}

4.10 创建子集

4.10.1 slice()

和原生js中数组的slice数组一样,包含两个参数,startendstart代表开始截取的位置,end代表结束的位置,不包括第end的元素。若不包括end,则返回整个对象,若end为负数,则返回(startlength-end)对应的数据。若start只有一个并且为负数,则返回最后的end个元素

1
2
3
4
Immutable.fromJS([1, 2, 3, 4]).slice(0); //[1,2,3,4]
Immutable.fromJS([1, 2, 3, 4]).slice(0,2); //[1,2]
Immutable.fromJS([1, 2, 3, 4]).slice(-2); //[3,4]
Immutable.fromJS([1, 2, 3, 4]).slice(0,-2); //[1,2]

4.10.2 rest()

返回除第一个元素之外的所有元素

1
Immutable.fromJS([1, 2, 3, 4]).rest()//[2,3,4]

4.10.3butLast()

返回除最后一个元素之外的所有元素

1
Immutable.fromJS([1, 2, 3, 4]).rest()//[1,2,3]

4.10.4 skip()

有一个参数n, 返回截掉前n个元素之后剩下的所有元素

1
Immutable.fromJS([1, 2, 3, 4]).skip(1)//[2,3,4]

4.10.5 skipLast()

有一个参数n, 返回截掉最后n个元素之后剩下的所有元素

1
Immutable.fromJS([1, 2, 3, 4]).skip(1)//[1,2,3]

4.10.6 skipWhile()

返回从第一次返回false之后的所有元素

1
2
3
4
Immutable.fromJS([1, 2, 3, 4]).skipWhile(list.skipWhile((value,index,list)=>{
return value > 2;
}))// [1,2,3,4]
skipUntil()

4.10.7 take()

有一个参数n, 返回前n个元素

1
Immutable.fromJS([1, 2, 3, 4]).take(2)//[1,2]

4.10.8 takeLast()

有一个参数n, 返回最后n个元素

1
Immutable.fromJS([1, 2, 3, 4]).takeLast(2)//[3,4]

4.10.9 takeWhile()

返回从第一次返回false之前的所有元素

1
2
3
4
Immutable.fromJS([1, 2, 3, 4]).skipWhile(list.takeWhile((value,index,list)=>{
return value > 2;
}))// []
takeUntil()

4.11 处理数据

4.11.1 reduce()

js中数组中的reduce相同,按索引升序的顺序处理元素

1
2
3
4
5
Immutable.fromJS([1,2,3,4]).reduce((pre,next,index,arr)=>{
console.log(pre+next)
return pre+next;
})
// 3 6 10

4.11.2 reduceRight()

js中数组中的reduce相同,按索引降序的顺序处理元素

1
2
3
4
5
Immutable.fromJS([1,2,3,4]).reduceRight((pre,next,index,arr)=>{
console.log(pre+next)
return pre+next;
})
// 7 9 10

4.11.3 every()

作用:判断整个对象总中所有的元素是不是都满足某一个条件,都满足返回`true,反之返回false

1
2
3
Immutable.fromJS([1,2,3,4]).every((value,index,arr)=>{
return value > 2
}) // false

4.11.4 some()

判断整个对象总中所有的元素是不是存在满足某一个条件的元素,若存在返回true,反之返回false

1
2
3
Immutable.fromJS([1,2,3,4]).some((value,index,arr)=>{
return value > 2
}) // true

4.11.5 join()

作用:同js中数组的join方法。把转换为字符串

1
Immutable.fromJS([1,2,3,4]).join(',') //1,2,3,4

4.11.6 isEmpty()

作用:判断是否为空

1
2
3
Immutable.fromJS([]).isEmpty(); // true
Immutable.fromJS({}).isEmpty(); // true
count()

4.11.7 countBy()

count不同的是,countBy返回一个对象

1
2
3
4
5
6
7
8
9
10
const list = Immutable.fromJS([1,2,3,4]);
const map = Immutable.fromJS({a:1,b:2,c:3,d:4});

list.countBy((value,index,list)=>{
return value > 2;
} //{false: 2, true: 2}

map.countBy((value,index,list)=>{
return value > 2;
} //{false: 2, true: 2}
支持一下
扫一扫,支持poetries