🔆 Immutable内部实现了一套完整的数据持久化结构。 Immutale Data就是一旦创建，就不能再被更改的数据。 Immutable对象的任何修改或者添加删除操作都会返回一个新的Immutable对象。〽⚜

「优点：」

降低了Mutable带来的复杂度
届生内存空间
拥抱函数式变成
方便开发Undo/Redo, Copy/Paste

「缺点：」

容易与原生对象混

1. List

List列表是有序索引的秘密集合，很像Javascript数组。

1.创建List

注意: List是工厂方法，不能使用new初始化

const list1 = List([1, 2, 3, 4])
console.log(list1)

2. isList

判断是否是List ，返回一个布尔值

console.log(List.isList(list1)) //true
console.log(List.isList([1,2,3])) //false

3. List.of()

创建一个包含的新列表

const list2 = List.of(1,2,3,4)
console.log(list2)

4. size取得list的长度

   console.log(list1.size) //4

5. set

set方法用来设定指定的下表的值 set(下表，值)，如果index已经存在于此列表中，它将被替换。

const list3 = list1.set(2,666) //[1, 2, 666, 4]
console.log(list1.toJS())
console.log(list3.toJS())

index可能是一个负数，从列表末尾开始索引。v.set(-1, "value")设置列表中的最后一个项目。

const list4 = list1.set(-1,-111)
console.log(list4.toJS()) //[1, 2, 3, -111]

如果index大于size。

const list5 = list1.set(10, 1000);
console.log(list5.toJS()) 
//[1, 2, 3, 4, undefined, undefined, undefined, undefined, undefined, undefined, 1000]

6.delete

删除指定下标值 delete(下标)

const list6 = list1.delete(2);
console.log(list6.toJS())

index可能是一个负数，从列表末尾开始索引。v.delete(-1)删除列表中的最后一个项目。

const list2 = list1.delete(-1);
console.log(list2.toJS()) //[1,2,3]

7. insert

插入值 insert(下标，值)

const list8 = list1.insert(2,'jd.com'); 
console.log(list8.toJS()) //[1, 2, "jd.com", 3, 4]

下标是负数（从右往左数）

const list7 = list1.insert(-3,'qq.com'); 
console.log(list7.toJS()) //[1, 2, "qq.com", 3, 4]

8. update

用来更新指定下标的值（下标， callback）

const list8 = list1.update(1, x => x*100);
console.log(list8.toJS()) //[1, 200, 3, 4]

9. setIn

「用来设置指定下标的值」

如果下标小于size，则替换值

 const list1 = iList([ 0, 1, 2, List([ 3, 4 ])]) 
const list2 =  list1.setIn([3, 0], 999); 
console.log(list2) //List [ 0, 1, 2, List [ 999, 4 ] ]

如果下标大于size,则插入值

const list1 = iList([ 0, 1, 2, List([ 3, 4 ])])
const list2 =  list1.setIn([3, 3], 999);
console.log(list2.toJS()) //List [ 0, 1, 2, List [[3, 4, undefined, 999] ]

10. clear

清空并返回一个长度为0的新数组

const list10 = list1.clear();
console.log(list10.toJS()) //[]

11. setSize

重新设定数组长度，小于原数组会截断，大于原数组会用undifined进行填充

const list11 = list1.setSize(6);
console.log(list11.toJS()) //[1, 2, 3, 4, undefined, undefined]

12. setIn()用来定义嵌套结构的值

同理还有deleteIn、updateIn、insertIn

const arr1 = List([    
  List([1,2,3]),  
  List([11,22,33]), 
  List([111,222,333])
])
const arr2 = arr1.setIn([1,1],999); //下标为（1，1）的元素变为999console.log(arr2.toJS())

13. concat 连接List

merge是concat的别名。

const list2 = List([11,22,33]);
const list3 = List([44,55,66]);
const list4 = List([77,88,99]);
const list5 = list1.concat(list2, list3, list4);
console.log(list5.toJS()) //[1,2,3,4,11,22,33,44,55,66,77,88,99]

14. flatter扁平化List

List.flatten(value)

value可以是数值（数值是几，表示拉平几层，Infinity表示所有都拉平），也可以写true或者false

true代表浅拉平，只拉平第一层

const arr1 = List([
List([ 1, 2, List([
'aa',
'bb',
List([
'cccc',
'ddddd'])
])
]),
List([11,22,33]), List([111,222,333]) ]) const arr2 = arr1.flatten(true);console.log(arr2.toJS())

false代表深拉平，所有的都扁平化。

const arr1 = List([
List([ 1, 2, List([
'aa',
'bb',
List([
'cccc',
'ddddd'])
])
]),
List([11,22,33]), List([111,222,333]) ]) const arr2 = arr1.flatten(false);console.log(arr2.toJS()) //[1, 2, "aa", "bb", "cccc", "ddddd", 11, 22, 33, 111, 222, 333]

15. find

find查找，返回第一个符合的结果，如果没找到，则返回undefined

 const arr1 = List(['张三','Iric','Lisa','王麻子']); 
const res = arr1.find(item => item === 'Lisa');
 console.log(res) //Lisa 
const res2 = arr1.find(item => item === 'Lisaa'); 
console.log(res2) //undefined

16. findLast

find查找，返回最后一个符合的结果，没找到返回undefined

const arr1 = List(['张三','Iric','Lisa','王麻子','张晨']);
const res = arr1.findLast(item => item.includes('张'));
console.log(res) //张晨

17. keys

返回所有下标

const arr1 = List(['张三','Iric','Lisa','王麻子','张晨']);
const keys = arr1.keys();
for(const key of keys){    
    console.log('k',key)
}

18. values

返回所有值

const arr1 = List(['张三','Iric','Lisa','王麻子','张晨']);
const values = arr1.values();
for(const value of values){ 
 console.log('values',value)
}

19. entries

返回所有entry,(key, value)形式。

const arr1 = List(['张三','Iric','Lisa','王麻子','张晨']);
const entries = arr1.entries();
for(const entry of entries){   
  console.log('entries',entry)
}

20. groupBy

分组

 const people = List([     
   Map({        
      name:'Lisa',    
      sex:'man'   
   }),    
  Map({    
     name:'Jack',   
     sex:'man'   
 }),  
  Map({      
     name:'Iric',     
     sex:'woman'  
  }),    
  Map({   
     name:'YOYO',      
     sex:'man'  
  }) 
 ]) 
 const sexLIst = people.groupBy(item => item.get('sex'));
  console.log(sexLIst.toJS())

二、 Map

Map对应原生Js的Object，它是无序的。

1. 新建Map对象

map是工厂方法，无需使用new实例化。

const m1 = Map({   name:'Iric',   age:20})
console.log('m1',m1)

2. set设定值 set(key, value)

const m2 = m1.set('sex','woman');
const m3 = m1.set(List([1]),{address:'陕西'});
console.log(m2.toJS())
console.log(m3.toJS())

3. get取值

 const age = m2.get('age');
 console.log(age) //20

4. delete删除值

delete(key)

 const m4 = m3.delete('age');
 console.log(m4.toJS())

5. deleteAll

批量删除

const names = iMap({ a: "Aaron", b: "Barry", c: "Connor" })
const res = names.deleteAll([ 'a', 'c' ])
console.log(res.toJS())

6. clear

清空Map，返回一个空Map

const names = iMap({ a: "Aaron", b: "Barry", c: "Connor" })
const cls = names.clear();
console.log('cls',cls.toJS()) //{}

7. update

update更新

update(key , callback)

const sal = Map({  name:'Iric',  count:50}) 
const sale = sal.update('count', x=> x*10);
console.log(sale.toJS()) //name: "Iric", count: 500}

8. merge

把多个Map合并称一个Map

Map.merge(map1, map2,....)

const sal = Map({    name:'Iric',    count:50}) 
const sal2 = Map({    sex:'man',    address:'陕西'})
const sale = sal.merge(sal2)console.log(sale.toJS()) 
//{name: "Iric", count: 50, sex: "man", address: "陕西"}

9. mergeWith

和merge类似，但是指定了merge的规则。

const sal = Map({  name:'Iric',  count:50}) 
const sal2 = Map({  sex:'man',  address:'陕西',  count: 15})
//表示如果有一样的属性，取sal2的count值，并且*20
const merge = sal.mergeWith((oldValue, newValue)=> {return newValue *20},sal2);
console.log(merge.toJS()) //{name: "Iric", count: 300, sex: "man", address: "陕西"}

10. setIn对于嵌套结构来进行设置值

setIn([层次1key, 层次2key, ...], value)

「同样操作的还有deleteIn、mergeIn、updateIn」

const deepMap = Map({  
  lev1: Map({        
   lev2: Map({         
     lev3: Map({         
       lev4: 'haha'        
      })     
    })   
  })
})
const setIn2 = deepMap.setIn(['lev1','lev2','lev3','lev4'],'嘿嘿')
console.log(setIn2.toJS())

11.toJS()

把Map转换成原生object, 深转换

const map1 = Map({  name:'Iric',  age: 20})
console.log(map1.toJS()) //{name: "Iric", age: 20}

12. toJSON()

把Map转换成原生object, 浅转换

const map1 = Map({  name:'Iric',  age: 20,  address: Map({    add:'陕西'  })})
console.log(map1.toJSON())

13. toArray()

转化为原生数组

//浅转换
const person = Map({    sex:'man',    address:'shanxi',    count: 15,    name:'Iric',});
const person2 = person.toArray();console.log(person2) //["man", "shanxi", 15, "Iric"]

14. toObject

转化为原生object

const person = Map({    sex:'man',    address:'shanxi',    count: 15,    name:'Iric',});
const person2 = person.toObject();
console.log(person2) //{sex: "man", address: "shanxi", count: 15, name: "Iric"}

15. equels

判断2个map是否相等

 const person1 = Map({    sex:'man',    address:'shanxi',    count: 15,    name:'Iric',});
const person2 = Map({    sex:'man',    address:'shanxi',    count: 15,    name:'Iric',});
console.log('===', person1=== person2) //false
console.log('equals', person1.equals(person2)) //true

16. find

 const person1 = Map({    sex:'man',    address:'shanxi',    count: 15,    name:'Iric',});
const name = person1.find((value, key) => value === 'Iric')
console.log(name) //Iric

17. has

判断是否含有指定的key

 const person = Map({    sex:'man',    address:'shanxi',    count: 15,    name:'Iric',});
const person2 = person.has('name');
console.log(person2) //true

18. includes

是否含有指定的value

const person = Map({    sex:'man',    address:'shanxi',    count: 15,    name:'Iric',});
const person2 = person.includes('Iric');
console.log(person2) //true

三、 Set

Set可以理解为value唯一的数组，即数组中不允许出现重复的值

1.新建Set

 set是工厂方法，不允许new来实例化


const set = Set([1,2,3,5,2,3]);
console.log(set.toJS()) //[1, 2, 3, 5]

2. add添加值

const set2 = set.add('66');
console.log(set2.toJS()) //[1, 2, 3, 5, "66"]

3. delete删除之

set.delete(index)

const set3 = set.delete(1);
console.log(set3.toJS()) //[5, 2, 3]  无序的

4. clear清空并且返回一个空的set

const set4 = set.clear();
console.log(set4.toJS()) 
//[]
const set1 = Set([1,2,3,5,2,3]);
const set2 = Set(['aa','bb',2,3]);

5. union 把多个Set合并成一个Set

const union = set1.union(set2);
console.log(union.toJS()) //[1, 2, 3, 5, "aa", "bb"]

6. intersect 取N个Set的交集

const intersect = set1.intersect(set2);
console.log(intersect.toJS()) //[3, 2]

7.substract 从Set中去除一些值

const substract = set1.subtract([1,2,3])
console.log(substract.toJS()) //[5]

8.forEach

set1.forEach((key, value) => {    
   console.log(key, value)
})

参考文档：

cloud.tencent.com/developer/s…

immutable-js.github.io/immutable-j…

希望看到这里朋友可以动动手点个赞👍哦，你们的支持就是对我最大的鼓励💪！！！

不要让Immutable成为你的绊脚石✨