今天小编和大家一起探讨一下引用类型中的map，在其中会有一些map与数组联合应用，还有和map类似的weakmap类型的说明，这篇文章同时也增加了一些操作数组的办法和实际应用。大家也可以关注我的微信公众号，蜗牛全栈。

一、map的声明

  1. let s = new Set([1,2,3])
  2. console.log(s) // Set(3){1,2,3}
  1. // map中的数据不会出现重复的情况，如果重复，会将重复的元素去掉。可以应用这一特性，对数组进行去重等处理
  2. let s = new Set([1,2,3,1])
  3. console.log(s) // Set(3){1,2,3}

二、向map中添加元素：使用add方法

  1. let s = new Set([1,2,3])
  2. s.add("school")
  3. console.log(s) // Set(4){1,2,3,"school"}
  1. // 可以通过链式添加，将元素添加到map中
  2. let s = new Set([1,2,3])
  3. s.add("school").add("bus")
  4. console.log(s) // Set(5){1,2,3,"school","bus"}

三、删除map中的元素：使用delete方法

  1. let s = new Set([1,2,3])
  2. s.delete(2)
  3. console.log(s) // Set(2){1,3}

四、清空map内的全部元素：调用clear方法

  1. let s = new Set([1,2,3])
  2. s.clear()
  3. console.log(s) // Set(0){}

五、判断map中是否含有某个元素：调用has方法

  1. let s = new Set([1,2,3])
  2. console.log(s.has(2)) // true

六、获取map中元素个数：调用size

  1. let s = new Set([1,2,3])
  2. console.log(s.size) // 3

七、map的遍历

  1. let s = new Set([1,2,3])
  2. s.forEach(item => console.log(item)) // 1 2 3
  3.  
  4. for(let item of s){
  5.     console.log(item) // 1 2 3
  6. }
  8. for(let item of s.keys()){
  9.     console.log(item) // 1 2 3
  10. }
  12. for(let item of s.values()){
  13.     console.log(item) // 1 2 3
  14. }
  17. // 对于map，key和value是一样的
  18. for(let item of s.entries()){
  19.     console.log(item) // [1,1] [2,2] [3,3]
  20. }

八、实际应用
1、数组去重

  1. let arr = [1,2,3,3,3,2,1]
  2. let s = new Set(arr)
  3. console.log(s) // Set(3){1,2,3}
  4. console.log([...s]) // [1,2,3]
  5. console.log(Array.from(s)) // [1,2,3]

2、数组合并后去重

  1. let arr1 = [1,2,3,4]
  2. let arr2 = [2,3,4,5,6]
  3. let s = new Set([...arr1,...arr2])
  4. console.log(s) // Set(6){1,2,3,4,5,6}
  5. console.log([...s]) // [1,2,3,4,5,6]
  6. console.log(Array.from(s)) // [1,2,3,4,5,6]

3、求两个数组的交集

  1. let arr1 = [1,2,3,4]
  2. let arr2 = [2,3,4,5,6]
  3. let s1 = new Set(arr1)
  4. let s2 = new Set(arr2)
  5. let result = new Set(arr1.filter((item) => s2.has(item)))
  6. console.log(result) // Set(3){2,3,4}

4、求两个数组差集

  1. let arr1 = [1,2,3,4]
  2. let arr2 = [2,3,4,5,6]
  3. let s1 = new Set(arr1)
  4. let s2 = new Set(arr2)
  5. let s3 = new Set(arr1.filter((item) => !s2.has(item)))
  6. let s4 = new Set(arr2.filter((item) => !s1.has(item)))
  7. console.log(s3) // Map(1){1}
  8. console.log(s4) // Map(1){5,6}
  9. console.log([...s3,...s4]) // [1,5,6]

九、WeakMap：里面只能存放Object，不能存放其他数据类型

  1. let ws = new WeakSet()
  2. // ws.add(1) // 报错:因为1不是Object类型，不能添加到WeakMap中
  3. ws.add({
  4.     name:"lilei"
  5. })
  6. ws.add({
  7.     age:12
  8. })
  9. console.log(ws) // WeakSet{{...},{...}}

1、删除对象

  1. let ws = new WeakSet()
  2. // ws.add(1) // 报错：Invalid value used in weak set
  3. ws.add({
  4.     name:"lilei"
  5. })
  6. ws.add({
  7.     age:12
  8. })
  9. ws.delete({
  10.     name:"lilei"
  11. })
  12. console.log(ws) // WeakSet{{...},{...}} 删除之后没有生效，因为对象是引用数据类型，添加对象的地址和删除元素的地址不一致，导致不能删除
  1. let ws = new WeakSet()
  2. const obj1 = {name:"lilei"}
  3. const obj2 = {age:12}
  4. ws.add(obj1)
  5. ws.add(obj2)
  6. console.log(ws) // WeakSet{{...},{...}}
  8. ws.delete(obj1)
  9. console.log(ws) // WeakSet{{...}} // 已经删除了{name:"lilei"}内容，主要就是因为对象属于引用类型，直接在delete写对象与前一个对象在堆内存中指向的不是同一个地址
  10. console.log(ws.has(obj2)) // true 判断内部是否含有obj2对象，与map相同，使用has函数

2、循环遍历：js中不能对WeakMap类型数据进行循环遍历，这个与垃圾回收（GC）有关，具体机制小编还不是很清楚，在今后的文章中会补上这一课。

  1. let ws = new WeakSet()
  2. const obj1 = {name:"lilei"}
  3. const obj2 = {age:12}
  4. ws.add(obj1)
  5. ws.add(obj2)
  6. ws.forEach(item => console.log(item)) // 报错：ws.forEach is not a function

 

版权声明：本文为feiying3995原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/feiying3995/p/14908599.html