Set Map

    数据结构

    Array 数组  紧密结构 可以排序 元素可以重复 效率比较低下，增删改查效率低，
    可以根据上一个找到下一个元素
    Object 对象 松散结构，没有长度，属性不能重复，增删改查的效率很高，
    但是每个键值对之间没有任何关系，不能排序


    集合
    Set   强引用集合    类似于数组，但是这里没有下标，只存值，无序、松散结构、
    没有重复的元素，增删改查很快
    
    WeakSet 弱引用集合

    映射
    Map  强引用映射  类似于对象，存储方式都是键值对存储，松散结构，
    和对象不同的地方在于 对象中key必须是字符串或者Symbol
    Map中key可以是任意类型，对象是没有长度，无法知道对象中键值对存储的数量，
    但是Map有size可以知道存储内容的数量
    
    WeakMap  弱引用映射

Set 方法

  var s=new Set();
    // 给Set中添加元素 并且返回Set集合
    s.add(1)
    s.add(2);
    s.add(3);
    s.add(4);
    s.add(1);//重复不会添加
    s.add(2);

     s.delete(2);//删除其中的一个元素，返回布尔值，是否删除
     console.log(s.delete(2)); false
     console.log(s);// Set(3) {1, 3, 4}
     
   // 不能这样使用，因为Set没有下标
    console.log(s[0])// undefined

     // 清空集合
     s.clear();
     console.log(s) //  {size: 0}
    // 这个集合中是否有2这个元素，返回布尔值 和数组include类似
     console.log( s.has(2)) ; true
     // 就是集合内元素的数量，Set类没有length属性，有size属性，size属性是只读属性
       console.log( s.size)// 3 类似于长度 

Set 遍历集合

    forEach遍历 遍历集合
    s.forEach(function(value){
        console.log(value)
    })


    for of遍历，这种遍历用于迭代器的变量，就是将迭代器中每个值遍历
    Set这个集合就是一种迭代器
    Object对象不是迭代器
    for(var value of s){
        console.log(value)
    }

Set 改变数组的去重

     var arr=[1,2,3,1,2,5,2,3,4,1,2,6];

     var s=new Set(arr);
     arr=Array.from(s);
     console.log(arr)  
     

Set 避免数组塌陷

   var o1={a:1};
   var o2={b:2};
   var o3={c:3};
    var s=new Set();
    s.add(o1);
    s.add(o2);
    s.add(o3);
    
    var bn1=document.querySelector("#bn1");
    var bn2=document.querySelector("#bn2");
    var bn3=document.querySelector("#bn3");
    bn1.addEventListener("click",clickHandler1);
    bn2.addEventListener("click",clickHandler2);
    bn3.addEventListener("click",clickHandler3);

    function clickHandler1(e){
         s.delete(o1);
         console.log(s);
    }

    function clickHandler2(e){
         s.delete(o2);
         console.log(s)
    }

    function clickHandler3(e){
         s.delete(o3);
         console.log(s)
    }

map

    var m=new Map();
 //   set(key，value) 存储键值对
    
    m.set("name","xietian");
    m.set("age",30);
    console.log(m);//Map(2) {'name' => 'xietian', 'age' => 30}
    
    var o1={a:1};
    var o2={b:2};
    m.set(o1,o2);

  //  get(key)  根据key获取value值
    console.log( m.get("name")) //xietian
    console.log(m.get(o1)); // {b:2};
    console.log(m)

  //  m.delete(key) 根据key删除value值
    m.delete("age");
    console.log(m)
    
 // 清空map
 m.clear();
 console.log(m)

// 判断key是否存在 has(key)
 console.log(m.has(o1))

map 长度

// var o={a:1,b:2,c:3};

// 对象没有length长度，map有size长度
 console.log(m.size);
// 可以将对象中的所有字符串属性名转换为数组
console.log(Object.keys(o));['a', 'b', 'c']
console.log(Object.keys(o).length);//3 类似长度

map 遍历

 var o1={a:1};
var o2={b:2};
m.set(o1,o2);
 // map可以使用forEach遍历
     m.forEach(function(value,key){
         console.log(value,key)
     })

for of 迭代器遍历

for of遍历，这种遍历用于迭代器的变量，就是将迭代器中每个值遍历
    m.set(2, 3)
    m.set("name", "xietian");
    m.set("age", 30);
for(var item of m){
    console.log(item); //会打印数组[2,3]["name", "xietian"] ...
}

for(var [key,value] of m){
    console.log(key,value);//会把中括号去重 2，3，"name", "xietian" ...
}

获取map的key的迭代器,单独只遍历key
for(var key of m.keys()){
    console.log(key);//2,name,age
}

 获取map的value的迭代器,单独只遍历value
for(var value of m.values()){
    console.log(value);
}



var s=new Set([1,2,3,4]);
for(var value of s){
    console.log(value)//1,2,3,4
}

迭代器方法

Array arguments NodeList  HTMLCollection Set  Map全都是迭代器，可以使用for of遍历
var bns=document.querySelectorAll("button");
for(var bn of bns){
    console.log(bn)
}
对象不是迭代器，不能使用for of遍历


var obj={a:1,b:2,c:3};

var m=new Map([["a",1],["b",2],["c",3]]);
console.log(m)

Object.entries(对象) 可以将对象转换为二维数组的迭代器
console.log(Object.entries(obj))

将对象转换为map
var m=new Map(Object.entries(obj));
console.log(m)


将map转换为Object
console.log(Object.fromEntries(m))