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

参考书《ECMAScript 6入门》
http://es6.ruanyifeng.com/

Set和Map数据结构

1.Set
  基本用法
    Set是一种新的数据结构，它的成员都是唯一的不重复的。
    let s1 = new Set();
    s1.add({"name":"123"});
    s1 // Set(1){{"name":"123"}}

let s2 = new Set([1,2,3,4,4,3,2,1]);
    s2 //Set(4) {1, 2, 3, 4}
    Set判断重复的方式是精准相等，同Object.is()
    NaN == NaN //false
    NaN === NaN //false
    Object.is(NaN,NaN)//true
    let s3 = new Set();
    s3.add(NaN);
    s3.add(NaN);
    s3 //Set(1) {NaN} //Set添加的成员都是不重复的
    Object.is({},{});//false 两个空对象总是不相等
    s3.add({});
    s3.add({});
    s3 //Set(3) {NaN, {}, {}}
    Set实例的属性和方法
  属性
    Set.prototype.constructor:返回set结构的构造器 ƒ Set() { [native code] }
    Set.prototype.size：返回set存储数据的大小
  方法
    add:向set结构中添加成员
    has:判断set中是否有某个成员
    delete:删除set中的某个成员
    clear:清楚set中的所有成员
    let s1 = new Set();
    s1.add({"test":"11"});
    s1.add({"test":"22"});
    s1//Set(2) {{"test":"11"}, {"test":"22"}}
    s1.has("test");//false
    s1.delete("test");//false
    s1.has({"test":"11"});//false
    s1.delete({"test":"11"});//false
    let s2 = new Set();
    s2.add("name");
    s2.has("name");//true
  对象与Set解构判断是否含有某一个key值的不同方式
    var obj = {
      name : "test",
      value : "123"
    }
    obj.name//"test"
    obj[name]//"test"
    obj.value//"123"
    obj[value]//"123"

let s4 = new Set();
    s4.add("name");
    s4.add("value");
    s4.has("name");//true
  遍历操作
    (1)数组结构，对象结构，set结构调用keys(),values(),entries()遍历比较
       数组结构
       let arr = [1,2,3,4,5];
       for(let k of arr.keys()){
         console.log(k);//0 1 2 3 4
       }
       for(let v of arr.values()){
         console.log(v);//1 2 3 4 5
       }
       for(let entry of arr.entries()){
         console.log(entry);//[0,1] [1,2] [2,3] [3,4] [4,5]
       }
   对象结构
    let  obj = {
      name : "test",
      size : 13,
      color : "red"
    }
    for(let k of Object.keys(obj)){
      console.log(k);//name size color
    }
    for(let v of Object.values(obj)){
      console.log(v);//test 13 red
    }
    for(let o of Object.entries(obj)){
      console.log(o);//["name", "test"] ["size", 13] ["color", "red"]
    }
   Set 结构:set结构没有键名，只有键值，所以keys和valus方法返回值一致，entries每次调用返回的是一个数组，数组成员是这个entry的键名和键值，所以两个数组成员是相等的
    let s = new Set();
    s.add({name : "test"});
    s.add({age : 13});
    s.add({color :"red"});
    for(let k of s.keys()){
      console.log(k);//{name: "test"}  {age: 13}  {color: "red"}
    }
    for(let v of s.values()){
      console.log(v);//{name: "test"}  {age: 13}  {color: "red"}
    }
    for(let o of s.entries()){
      console.log(o);//[{name: "test"}, {name: "test"}]  [{age: 13},{age: 13}] [{color: "red"},{color: "red"}]
    }
    for(let v of s){
      console.log(v);//{name: "test"}  {age: 13}  {color: "red"} Set结构的实例默认是可遍历的，默认遍历器是values()方法
    }
  (2)数组结构与set结构调用forEach()遍历比较
     数组结构
     let arr = [1,2,3,4,5];
     arr.forEach(function(i,v){
       v = v + 2;
       console.log(v);
     });// 2 3 4 5 6
     arr.forEach((i,v) => console.log(v*5));//0 5 10 15 20
     Set结构
     let s = new Set([1,2,3,4,5]);
       s.forEach(function(i,v){
       console.log(v - 1);
     });//0 1 2 3 4
    等同于
    s.forEach((i,v) => console.log(v - 1););//0 1 2 3 4
  遍历的应用
    扩展运算符(...)内部使用for...of循环，因此set结构也可以使用
    let s = new Set();
    s.add({name : "test"});
    s.add({age : 13});
    s.add({color :"red"});
    [...s] //[{name : "test"}, {age : 13}, {color :"red"}]
    目前可以使用扩展运算符(...)的结构:Array,Object,Set
    数组的map和filter也可以间接用在Set结构上
    let s = new Set([1,2,3,4,5]);
    s = new Set([...s].map(x => x+2));//Set(5) {3, 4, 5, 6, 7}
    s = new Set([...s].filter(x => (x%2) === 0));//Set(2) {2, 4}
    使用Set实现交集，并集，差集
    let s1 = new Set([1,2,3,4,5]);
    let s2 = new Set([3,4,5,6,7]);
    并集
    let s3 = new Set([...s1,...s2]);
    s3 //Set(7) {1, 2, 3, 4, 5, 6, 7}
    交集
    let s4 = new Set([...s1].filter(x => s2.has(x)))
    s4 //Set(3) {3, 4, 5}
    差集
    let s5 = new Set([...s1].filter(x => !s2.has(x)))
    s5 //Set(2) {1, 2}
2.WeakSet
  含义:WeakSet和Set一样都是不可重复的数据结构，但是WeakSet的成员只能是对象
    let s1 = new Set();
    s1.add(3);
    s1.add({name : "test"});
    s1 //Set(2) {3, {name : "test"}}
    let s2 = new WeakSet();
    s2.add({name : "test"});
    s2 //WeakSet {{name : "test"}}
    s2.add(3);//Uncaught TypeError: Invalid value used in weak set 只能接受加入对象成员
    WeakSet中的对象都是弱引用，如果其他地方没有引用这个对象，垃圾回收机制就会自动回收该对象所占用的内存，不考虑对象还存在于WeakSet中
    语法
    let w1 = new WeakSet();
    w1.add({name : "test"});
    除对象外，数组以及类数组都可以添加到weakSet结构中
    let dd = document.querySelectorAll("tr");
    w1.add(dd);
    w1.add([1,2]);  
    w1 //WeakSet {{name : "test"},NodeList(626), [1,2]}
    let a = [3,4];
    w1.add(a);//WeakSet {{name : "test"},NodeList(626), [1,2],[3,4]}
    let w2 = new WeakSet(a);
    //Uncaught TypeError: Invalid value used in weak set  
    //此处数组a的成员是单个数值,不是对象,调用WeakSet构造器生成WeakSet结构时,被加入到WeakSet中的是数组的成员，由于成员不是对象，所以报错
    WeakSet结构有三个方法add,has和delete
    WeakSet.prototype.add:向WeakSet结构中添加一个新成员
    WeakSet.prototype.has:返回一个布尔值，表示某一个值是否存在WeakSet实例当中
    WeakSet.prototype.delete:清除WeakSet实例的指定成员
    w1.add(window);
    w1.has(window);//true
    w1.delete(window);//true
    WeakSet没有size属性，不能遍历，因为它的成员都是弱引用，随时可能消失。
  数组去重的方法
    (1)Set结构与扩展运算符(...)相结合
    let arr = [1,2,3,4,3,2,'a','aa','b','a'];
    [...new Set(arr)] //[1, 2, 3, 4, "a", "aa", "b"]
3.Map
  含义:Map是一种键值对构成的数据结构，不同于对象，map的键可以是任何简单值或者对象。
  基本用法
    set:set(key,value) 向Map结构中添加键值对。返回值map因此可以链式调用
    get:get(key) 读取Map结构中键值为key所对应的value值
    has:has(key) 判断Map结构中是否含有键值为key的键值对，返回值是布尔类型
    delete:delete(key) 删除Map结构中键值为key所对应的键值对
    clear:map.clear() 清除map结构实例的所有成员
  生成Map实例的方法
    (1)先用new Map构造器的方式生成map结构，再使用基本方法将数据添加到Map结构中
    let m1 = new Map();
    m1.set(0,"t1");
    m1.set({name : "maptest"},"test2");
    m1.set("color",2);
    m1.get({name : "maptest"});//undefined  
    //{name : "maptest"} == {name : "maptest"} false     {name : "maptest"} === {name : "maptest"} false   Object.is({name : "maptest"},{name : "maptest"})
    //虽然看起来值相同，但是{name : "maptest"} == {name : "maptest"} 左右两个对象是不同的内存地址，所以是两个对象
    //'color' === 'color' true   ['color'] === ['color'] false
    let obj = {name : "maptest"};
    m1.set(obj,"t3");
    m1.get(obj);// "t3"
    m1.has(0);//true
    m1.delete('color');//true
    m1.has('color');//false
    (2)使用new Map构造器创建map实例时，
    将有iterator迭代器接口的数据结构，并且此结构成员是一个双成员的数组，传入构造器中做参数
    有iterator迭代器接口的结构如数组，类数组对象，set,map
    数组
    let m2 = new Map([["name","value"]]);
    m2 //Map(1) {"name" => "value"}
    m2.get("name");//"value"
  类数组对象
    let divArr = document.querySelectorAll("tr");
    let arr = [];
    function test(){
      [...divArr].forEach(function(value,index){
        arr.push([index,value]);     
      });
    }
    test();
    arr //[[0, NodeList(69)]]
    let m3 = new Map(arr);
    m3.get(0);//NodeList(69) [n1,n2,n3......]
  Set数据结构
    let s1 = new Set([[1,10],[2,20]]);
    let m4 = new Map(s1);
    m4.get(1);//10
    m4.has(2);//true
  Map数据结构
    let m5 = new Map([["run","fast"]]);
    let m6 = new Map(m5);
    m6.get("run");//"fast"
    如果针对同一个键重复赋值，则后赋的值会代替先赋的值
    m6.set("run","slow");
    m6.get("run");//"slow"
    Map的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个值。
    'a' === 'a' true 简单值严格相等，map视为同一个值
    ['a'] === ['a'] false 内存地址不同，map视为不同的值
  实例的属性和操作方法
  属性
  size:返回Map结构的成员总数
  方法
  set/get/has/delete/clear
  遍历方法
    keys()/values()/entries()/forEach()用法同set,遍历顺序即插入顺序。
    let m = new Map();
    m.set(name,"test");
    m.set(age,13);
    m.set(color,"red");
    for(let k of m.keys()){
      console.log(k);//name age  color
    }
    for(let v of m.values()){
      console.log(v);//test  13  red
    }
    for(let o of m.entries()){
      console.log(o);//["name": "test"] ["age": 13] ["color": "red"]
    }
    for(let v of m){
      console.log(v);//["name": "test"] ["age": 13] ["color": "red"] map结构的实例默认是可遍历的，默认遍历器是entries()方法
    }
    m.forEach(function(v,i){
     console.log("key : "+i+",value : "+v);
    });
    //key : name,value : test
    //key : age,value : 13
    //key : color,value : red
    m.forEach(function(v,i){
      console.log(navigator.userAgent);
    },navigator);
    //3 Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
    //forEach除了回调函数还可以传第二个参数，可以用来绑定对象
  Map与其他数据结构互相转换
     let m = new Map();
     m.set(name,"test");
     m.set(age,13);
     m.set(color,"red");
    (1)Map与数组互相转换
       a.(...)扩展运算符可以将map转换成数组
         console.log([...m]);//[["name": "test"],["age": 13],["color": "red"]]
       b.通过将符合标准的数组传入map构造器中生成map实例，可以实现数组转换成map结构
       let arr = [[0,'a'],[1,'b'],[2,'c']];
       let m = new Map(arr);
       m //Map(3) {0 => "a", 1 => "b", 2 => "c"}
    (2)Map与对象互相转换
     a.通过循环遍历将map的key值赋值给对象的属性名，value值赋值给对象的属性值，可以实现map转换成对象。
     let m = new Map([[{color : "black"},"22"]]).set(0,'test').set(1,'a');
     m //Map(3) {{color: "black"} => "22", 0 => "test", 1 => "a"}
     let obj = {};
     for(let [k,v] of m){
       obj[k] = v;
     }
     obj //{0: "test", 1: "a", [object Object]: "22"}
        //{color: "black"} 这个键名是非字符串的，所以被转化成了[oject object]
     b.对象转换成map 遍历对象，将对象的属性名设置成map的key值，将对象的属性值设置成map的value值
     let obj = {0: "test", 1: "a", 2: "22"}
     let m = new Map(Object.entries(obj));
     m //Map(3) {"0" => "test", "1" => "a", "2" => "22"}
    (3)Map与JSON互相转换
       a.可以通过map-->Array-->json或map-->Object-->json的两种方式实现map转换成json
       let m = new Map([[{color : "black"},"22"]]).set(0,'test').set(1,'a');
       m //Map(3) {{color: "black"} => "22", 0 => "test", 1 => "a"}
       JSON.stringify([...m]);//'[[{"color":"black"},"22"],[0,"test"],[1,"a"]]'
       
       let m = new Map([[2,"22"]]).set(0,'test').set(1,'a');
       m //Map(3) {2 => "22", 0 => "test", 1 => "a"}
       let obj = {};
       for(let [k,v] of m){
           obj[k] = v;
       }
       obj //{0: "test", 1: "a", 2: "22"}
       JSON.stringify(obj);//'{"0":"test","1":"a","2":"22"}'
       b.可以通过json-->Array-->map或json-->Object-->map的两种方式实现map转换成json
       let j1 = '[[{"color":"black"},"22"],[0,"test"],[1,"a"]]';
       let m = new Map(JSON.parse(j1));
       m //Map(3) {{"color":"black"} => "22", 0 => "test", 1 => "a"}
       
       let j1 = '{"0":"test","1":"a","2":"22"}';
       let obj = JSON.parse(j1);
       let m = new Map(Object.entries(obj));
       m //Map(3) {"0" => "test", "1" => "a", "2" => "22"}
4.WeakMap
  含义:用于生成键值对的集合，但是键名只能是对象或者null，而且WeakMap键名所引用的对象是弱引用。
  语法:可以通过set来向WeakMap添加结构，也可以使用向WeakMap构造器中传参数的方式生成WeakMap结构
    set/get/has/delete
    let w1 = new WeakMap();
    w1.set({name : "test"},"12");
    w1.has({name : "test"});//false {name : "test"} === {name : "test"} 内存地址不同，WeakMap视为不同的值
    let obj = {name : "test1"};
    w1.set(obj,"0");
    w1.has(obj);//true
    w1.set(window,'window');
    w1.has(window);//true
    w1.delete(window);//true

let a1 = [1,2,3],a2 = [4,5,6];
    let w2 = new WeakMap([[a1,'abc'],[a2,'def']]);
    w2 //WeakMap {Array(3) => "def", Array(3) => "abc"}
    w2.has(a2);//true
特点:同WeakSet,WeakMap键名指向的对象，不计入垃圾回收机制。
        因此，只要WeakMap键名所引用的对象的其他引用都被清除，垃圾回收机制就会释放该对象所占用的内存。