记录高级js学习（十四）ES6的拓展

ES6新增两种数据结构，之前只有数组和对象，现在有Set和Map，以及他们另外的形式WeakSet和WeakMap

Set

Set可以用来保存数据，类似于数组，但是跟数组的区别是每项数据唯一，可用forEach遍历

      // ES6新增 Set数据结构的使用,可以用于数组去重
      const arr = [1,2,3,4,5,6,1,2,3]
      const set = new Set(arr)
      console.log('set: ', set);  //在控制台打印想要看到set的内容需转回数组
      
      // ES6以后两种数组去重的方法
      const newArr1 = Array.from(set)   //将可迭代对象转为数组
      console.log('newArr1: ', newArr1);
      const newArr2 = [...set]
      console.log('newArr2: ', newArr2);

      // Set的各种属性方法
      console.log(set.size);
      set.add(100)  //给set加数据
      set.delete(1) //删数据
      console.log([...set]);
      console.log(set.has(2));  //判断是否有该数据
      set.clear() //清空数据
      console.log([...set]);

      var newSet = new Set(arr)
      // 支持forEach和for of 遍历
      newSet.forEach(item=>{
        console.log(item);
      })

WeakSet

WeakSet只能存对象，该对象的引用为弱引用，有add(),delete(),has()方法，WeakSet不可迭代，里面的东西拿不出来，文章结尾补充说明一下弱引用

      // WeakSet只能存放对象，该对象引用为弱引用（具体验证如下）
      // 不可迭代，只有add,delete,has方法
      let obj = {
        name:"李斯"
      }
      const set = new WeakSet()
      set.add(obj)
      obj = null
      console.log('set: ', set);
      setTimeout(()=>{  
        console.log('set: ', set); //没有delete，但此时set里的obj已经被垃圾回收了
      },10000)

Map

Map可以用来存储映射关系，类似于对象，但是他的key可以为对象类型，普通对象的不行，可forEach迭代

      // Map允许对象作为对象的键值
      const obj1 = {name:"张三"}
      const obj2 = {name:"李四"} 
      // 原始的对象
      const newObj = {
        [obj1]:"aaa",  //会将对象转为字符串[object Object]
        [obj2]:"bbb"
      }
      console.log('newObj: ', newObj);  //  只打印一个{[[object Object]]:"bbb"}

      const map = new Map([[obj1,"aaa"],[obj2,"bbb"],["a","ccc"]])  //参数存放的格式叫entries,ES8的语法
      console.log('map: ', map);
      console.log('map.size: ', map.size); //大小
      
      map.set({name:"王五"},"ddd")
      map.delete(obj1)
      console.log('map: ', map);
      console.log(map.has(obj2)); //true
      console.log(map.get(obj2)); //bbb

      // 可迭代，支持forEach和for of
      map.forEach((item,key)=>console.log(item,key))
      for(const [key,item] of map){ //返回entries结构，进行解构
        console.log(item,key)
      }

WeakMap

WeakMap的key只能存对象，该对象的引用为弱引用，有set(),get(),delete(),has()方法，WeakMap不可迭代

      // WeakMap只允许对象作为键值
      let obj1 = {name:"张三"}

      const map = new WeakMap([[obj1,"aaa"]])  //参数存放的格式叫entries,ES8的语法
      obj1 = null
      setTimeout(()=>{
        console.log('map: ', map);
      },10000)  //GC回收掉就没obj1属性了
      
      // 应用场景（简单实现Vue响应式原理）
      const Dep = new Set([reRender]) //存依赖
      const newObj = {}
      const newObjToDo = new Map(["age",Dep])  //绑定属性对应的依赖
      const Observer = new WeakMap([[newObj,newObjToDo]])  //绑定响应式对象
      const domP = document.getElementsByTagName("p")[0]
      
      let _age = ""
      Object.defineProperty(newObj,"age",{
        configurable:true,
        enumerable:true,
        set(val){
          _age = val
          const arrToDo = Observer.get(newObj).get("age");  //age改变时，通过查找age的依赖，遍历执行响应事件
          for(let item of arrToDo){
            item(domP,val)
          }
        },
        get(){
          return _age
        }
      })
      // 绑定一个点击事件
      function add(){
        newObj.age +=1;
      }
      function reRender(dom,text){
        dom.innerHTML = text
      }
      newObj.age = 18