ES6-Set和Map数据结构学习笔记

Set和Map数据结构

Set

• 基本用法
  ES6提供了新的数据结构——Set，类似于数组，但是成员的值是唯一的，没有重复的值，Set本身是一种构造函数，用来生成Set数据结构

    var s = new Set();
    [1,2,3,4,5,2,2].map(x=> s.add(x))
         for (i of s){
             console.log(i);
         }

  上面的代码通过add方法向Set结构加入成员，但是Set方法不会添加重复的值。
  Set函数可以接受一个数组作为参数，用于初始化。

    var set = new Set([1,2,3,4,4]);
    [...set] //[1,2,3,4]      

  向Set加入值时不会发生类型转换。Set内部判断两个值是否相等是使用的类似于（===）的运算符。唯一的列外是NaN等于自身（但是精确运算符认为他不等于自身） 。

    let set = new Set();
    set.add({});
    console.log(set.size);//1
    set.add({});
    console.log(set.size);//2

  由于两个空对象不是精确相等的，所以他们被视为两个值。

• Set实例的属性和方法
  Set结构有以下属性：

  • Set.prototype.constructor: 构造函数，默认是Set函数。

  • Set.prototype.size：返回实例的成员总数。
    Set实例的方法分为两类：操作方法和遍历方法。
    操作方法：

  • add(value):添加某个值，返回Set结构本身。
  • delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
  • has(value): 返回一个布尔值，表示参数是否为Set的成员。

  • clear()：清除所有成员，没有返回值。

        let s = new Set();
        s.add(1).add(2).add(2);
        s.size;

    遍历方法：
  • keys();返回一个键名的遍历器；
  • value(); 返回一个键值的遍历器；
  • entries()：返回一个键值对的遍历器；

  • forEach(): 使用回调函数遍历每个成员。

        let set = new Set(['red', 'green', 'blue']);
        for(let item of set.keys()){
            console.log(item);
        }
        //red
        //green
        //blue
       for(let item of set.entries()){
           console.log(item);
       }
       //["red", "red"]
       //["green", "green"]
       // ["blue", "blue"]

    entries方法返回的遍历器同时包括键名和键值，所以每次输出一个数组。
    Set结构的实例默认可遍历，其默认遍历器生成函数就是他的values方法。就是说，可以省略values方法，直接用for of循环遍历Set。
    Set结构的forEach()方法用来对每个成员执行某种操作，没有返回值。

       let set = new Set([1,2,3]);
       set =new Set([...set].map(val => val*2));

WeakSet

WeakSet结构和Set结构类似，也是不重复的值的集合，但是他和Set有两个区别：WeakSet的成员只能是对象，而不能是其他类型的值；WeakSet的对象都是弱引用，即垃圾回收机制不考虑他对对象的引用。也就是如果其他成员逗不再引用改对象，那么回收机制会自动回收该对象所占的内存。不考虑该对象还存在于WeakSet中，这个特点意味着无法引用他的成员，因此WeakSet是不可遍历的。他是一个构造函数，可以使用new命令来创建WeakSet数据结构。

var ws = new WeakSet();

作为构造函数，WeakSet可以接收一个数组或者类似于数组的对象作为参数。该数组的成员都会成为WeakSet实例对象的成员。
WeakSet数据结构有3个方法：

1. WeakSet.prototype.add(value): 向实例添加新成员；
2. WeakSet.prototype.delete(value): 清除实例的指定成员；

3. WeakSet.prototype.has(value): 返回一个布尔值，表示某个值是否属于WeakSet的实例中。
   WeakSet的一个用处是储存DOM节点，而不用担心这个节点从文档移除时会产生内存泄漏。

   Map

• Map结构的目的和基本用法
  javascript的对象（Object）本质上是键值对的集合（hash结构），但是只能用字符串作为键，这给他的使用带来了很大的限制。
  Map数据结构类似于对象，也是键值对的集合，但是键的范围不限于字符串，各种类型都可以。Map数据结构提供了“值——值”的对应，是一种完美的Hash结构实现。作为构造函数，Map也可以接受数组作为参数，该数组的成员是一个个表示键值对的数组。

      var map = new Map([["name","张三"],["title","author"]]);
      map.size ;//2
      map.has("name"); //true
      map.get("name"); //张三

  Map的键实际上是和内存绑定的，只要内存的地址不一样，就视为两个键。这就解决了同名属性碰撞的问题。
  另外，虽然NaN不严格等与自身，但Map将其视为同一个键。

  size属性：返回Map数据结构的成员总数。
  set(key,value): 该方法设置key所对应的键值，然后返回整个Map结构。
  get(key): 读取key对应的键值，如果找不到key，则返回undefined。
  has(key): has方法返回一个布尔值，表示某个键是否在Map数据里面。
  delete(key): 删除某个键，返回布尔值，表示是否删除成功。
  clear(): 清除所用成员，没有返回值。

• 遍历方法
  Map原生提供3个遍历器生成函数和1个遍历方法
  - keys(): 返回键名的遍历器；
  - values(): 返回键值的遍历器；
  - entries():返回所有成员的遍历器；
  - forEach(): 遍历Map的所有成员。

结合数组的map方法、filter方法，可以实现Map的遍历和过滤（Map本身不具有这两个方法）。

     let map = new Map()
             .set(1, 'a')
             .set(2, 'b')
             .set(3, 'c');

Map 还有个forEach方法，与数组的forEach方法类似，也可以完成遍历。而且该方法还可以接受第二个参数，用于绑定this。

• Map与其他数据结构的相互转换

  • Map转为数组：最方便的方法是使用扩展运算符(...)。

       let map = new map().set(true, 7).set({foo, 3},['abc']);
       [...map];

  • 数组转为Map：将数组传入Map构造函数就可以转为Map。

  • Map转为对象：如果Map的所有键都是字符串，则可以转为对象。

        function Map(obj){
            let map = new Map();
            for (let k of Object.keys(obj)){
                map.set(k, obj[k]);
            }
            return map;
        }
        Map({yes: true, no: false});

  • 对象转为Map
  • Map转为JSON：有两种情况：一、如果Map的键名都是字符串，这时可以选择转为对象JSON；二、如果都是非字符串，可以选择转为数组JSON。

  • JSON转为Map：正常情况下，所有键名都是字符串。

    WeakMap

    WeakMap结构与Map类似，唯一的区别是它只接受对象作为键名（null）除外，而且键名所指向的对象不计入垃圾回收机制。
    该对象设计的目的在于，键名是对象的弱引用，所以其所对应的对象可能被自动回收。基本上，WeakMap的专用场合就是，他的键所对应的对象可能会在将来消失，该结构有助于防止内存泄漏。
    WeakMap与Map在API上的区别主要是两个：一是，没有遍历操作；也没有size属性；二是无法清空。WeakMap只有四个方法：get、set、has、delete。WeakMap的另一个用处是部署私有变量。

转载于:https://www.cnblogs.com/yehui-mmd/p/6290768.html