2021-10-08

Set 和 Map

这是对尚硅谷的ES6新特性课程做的总结，点击学习课程

Set简介

ES6提供了新的数据结果Set（集合）。他类似于数组，但成员的值都是唯一的，集合实现了iterator接口，所以可以使用 扩展运算符[…] 和 [for … of]进行遍历，集合的属性和方法：
（1） size 返回集合的元素个数
（2） add 增加一个新元素，返回当前集合
（3） delete 删除元素，返回Boolean值
（4） has 检测集合中是否包含某个元素，返回Boolean值
（5） clear 清空集合
上述方法的代码如下：

var blackPink = new Set(['lisa','rose','jennie','jisoo'])
    // 1.元素个数
    console.log(blackPink.size)
    // 2.增加元素
    console.log(blackPink.add('tom'))
    // 3.删除元素
    blackPink.delete('lisa')
    console.log(blackPink)
    // 4.检测集合中是否含有某个元素
    console.log(blackPink.has('jisoo'))

    // 5.clear 清空集合
    blackPink.clear()
    console.log(blackPink)
    
    // 6.遍历set集合
    // （1） forEach（）
    blackPink.forEach(value=>{
      console.log(value)
    // })

    // （2） for ... of ...
    for( let v of blackPink){
      console.log(v)
    }

利用set操作数组

（1）数组去重
由于Set的成员都是唯一的，所以当把一个数组声明成一个集合的时候，集合里每个数都是唯一的，没有重复的。然后可以利用扩展运算符[…]把集合展开，作为数组返回。

// 定义数组
    let arr = [1,2,5,4,3,1,3,5 ]
    let arr2 = [4,5,6,5,7,8]
    // 1.数组去重
    let res = [...new Set(arr)]
    console.log(res)

还有另外一种数组去重的方法

var res = Array.from(new Set(arr))

(2)两个数组的交集
首先将arr 去重转为数组，利用过滤器判断arr中是否包含与arr2重复的元素。

let res = [...new Set(arr)].filter(item =>{
      let s2 = new Set(arr2)
      if(s2.has(item)){
        return true
      }else{
        return false
      }
    })

还可以简化成如下：

let res = [...new Set(arr)].filter(item => new Set(arr2).has(item))

（3） 两个数组的并集
利用扩展运算符展开两个数组arr和arr1，然后再连接

let union = new Set([...arr, ...arr2])

（4）两个数组的差集
就是对数组的并集取反

let res = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)))

Map简介

ES6提供了Map数据结构，它类似于对象，也是键值对的集合。但是‘键’的范围不限于字符串，各种类型的值（包括对象）都可以当做键。Map也实现了iterator接口，所以可以使用扩展运算符[…]和[for …of]进行遍历，Map的属性和方法：
（1） set 增加一个新元素，返回当前Map

// 声明Map
    let m = new Map()
    // 添加元素
    m.set('name','尚硅谷')
    m.set('change',function(){
      console.log('we can change you !')
    })
    let key = {
      school:'ATGUIGU'
    }
    m.set(key,['beijign','shanghai','shenzhen'])

执行的结果

（1） size 返回Map的元素个数

console.log(m.size) // 3

（3） get 返回键名对象的键值

console.log(m.get('change'))

结果是

（4） has 检测Map中是否包含某个元素，返回boolean值
（5） clear 清空集合，返回undefined

可以用for…of 遍历数组

for(let v of m){
      console.log(v)//返回的是数组 ['name', '尚硅谷']，['change', ƒ]，[{…}, Array(3)]
    }