ES6~ES13新特性2

Set的基本使用

Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复
- 创建Set我们需要通过Set构造函数（暂时没有字面量创建的方式）：
我们可以发现Set中存放的元素是不会重复的，那么Set有一个非常常用的功能就是给数组去重。

Set的常见方法

Set常见的属性：
- size：返回Set中元素的个数；
Set常用的方法：
- add(value)：添加某个元素，返回Set对象本身；
- delete(value)：从set中删除和这个值相等的元素，返回boolean类型；
- has(value)：判断set中是否存在某个元素，返回boolean类型；
- clear()：清空set中所有的元素，没有返回值；
- forEach(callback, [, thisArg])：通过forEach遍历set；
另外Set是支持for of的遍历的。

// 1.创建Set
 const set = new Set()
 console.log(set)

 // 2.添加元素
 set.add(10)
 set.add(22)
 set.add(35)
 set.add(22)
 console.log(set)

 const info = {}
 const obj = {name: "obj"}
 set.add(info)
 set.add(obj)
 set.add(obj)
 console.log(set)

 // 3.应用场景: 数组的去重
 const names = ["abc", "cba", "nba", "cba", "nba"]
 // const newNames = []
 // for (const item of names) {
 //   if (!newNames.includes(item)) {
 //     newNames.push(item)
 //   }
 // }
 // console.log(newNames)
 const newNamesSet = new Set(names)
 const newNames = Array.from(newNamesSet)
 console.log(newNames)

 // 4.Set的其他属性和方法
 // 属性
 console.log(set.size)
 // 方法
 // 4.1. add方法
 set.add(100)
 console.log(set)
 // 4.2. delete方法
 set.delete(obj)
 console.log(set)
 // 4.3. has方法
 console.log(set.has(info))
 // 4.4. clear方法
 // set.clear()
 // console.log(set)
 // 4.5. forEach
 set.forEach(item => console.log(item))

 // 5.set支持for...of
 for (const item of set) {
   console.log(item)
 }

WeakSet使用

和Set类似的另外一个数据结构称之为WeakSet，也是内部元素不能重复的数据结构。
那么和Set有什么区别呢？
- 区别一：WeakSet中只能存放对象类型，不能存放基本数据类型；
- 区别二：WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收；
WeakSet常见的方法：
- add(value)：添加某个元素，返回WeakSet对象本身；
- delete(value)：从WeakSet中删除和这个值相等的元素，返回boolean类型；
- has(value)：判断WeakSet中是否存在某个元素，返回boolean类型；
注意：WeakSet不能遍历
- 因为WeakSet只是对对象的弱引用，如果我们遍历获取到其中的元素，那么有可能造成对象不能正常的销毁。
- 所以存储到WeakSet中的对象是没办法获取的；
那么这个东西有什么用呢？
- 事实上这个问题并不好回答，我们来使用一个Stack Overflow上的答案；

Map的基本使用

另外一个新增的数据结构是Map，用于存储映射关系。
但是我们可能会想，在之前我们可以使用对象来存储映射关系，他们有什么区别呢？
- 事实上我们对象存储映射关系只能用字符串（ES6新增了Symbol）作为属性名（key）；
- 某些情况下我们可能希望通过其他类型作为key，比如对象，这个时候会自动将对象转成字符串来作为key；
那么我们就可以使用Map：
Map常见的属性：
- size：返回Map中元素的个数；
Map常见的方法：
- set(key, value)：在Map中添加key、value，并且返回整个Map对象；
- get(key)：根据key获取Map中的value；
- has(key)：判断是否包括某一个key，返回Boolean类型；
- delete(key)：根据key删除一个键值对，返回Boolean类型
- clear()：清空所有的元素；
- forEach(callback, [, thisArg])：通过forEach遍历Map；
Map也可以通过for of进行遍历。

const info = { name: "why" }
    const info2 = { age: 18 }

    // 1.对象类型的局限性: 不可以使用复杂类型作为key
    // const obj = {
    //   address: "北京市",
    //   [info]: "哈哈哈",
    //   [info2]: "呵呵呵"
    // }
    // console.log(obj)

    // 2.Map映射类型
    const map = new Map()
    map.set(info, "aaaa")
    map.set(info2, "bbbb")
    console.log(map)

    // 3.Map的常见属性和方法
    // console.log(map.size)
    // 3.1. set方法, 设置内容
    map.set(info, "cccc")
    console.log(map)
    // 3.2. get方法, 获取内容
    console.log(map.get(info))
    // 3.3. delete方法, 删除内容
    // map.delete(info)
    // console.log(map)
    // 3.4. has方法, 判断内容
    console.log(map.has(info2))
    // 3.5. clear方法, 清空内容
    // map.clear()
    // console.log(map)
    // 3.6. forEach方法 获取的value
    map.forEach(item => console.log(item))

    // 4.for...of遍历 获取的是key，value组成的数组
    for (const item of map) {
      const [key, value] = item
      console.log(key, value)
    }

WeakMap的使用

和Map类型的另外一个数据结构称之为WeakMap，也是以键值对的形式存在的。
那么和Map有什么区别呢？
- 区别一：WeakMap的key只能使用对象，不接受其他的类型作为key；
- 区别二：WeakMap的key对对象想的引用是弱引用，如果没有其他引用引用这个对象，那么GC可以回收该对象；
WeakMap常见的方法有四个：
- set(key, value)：在Map中添加key、value，并且返回整个Map对象；
- get(key)：根据key获取Map中的value；
- has(key)：判断是否包括某一个key，返回Boolean类型；
- delete(key)：根据key删除一个键值对，返回Boolean类型；
注意：WeakMap也是不能遍历的  没有forEach方法，也不支持通过for of的方式进行遍历；
那么我们的WeakMap有什么作用呢？（后续专门讲解）