《深入理解ES6》之Set集合与Map集合

Posted 2020-10-01

Set集合　

　　Set类型是一种有序列表，其中含有一些相互独立的非重复，通过Set集合可以快速访问其中的数据，更有效地追踪各种离散值。

创建Set集合并添加元素

　　调用new Set()创建Set集合，调用add()方法向集合添加元素，访问集合的size属性可以获取集合中目前的元素数量，访问has()方法可以检测Set集合中是否存在某个值。抵用delete()方法可以移除Set集合中的某一个元素，调用clear()方法会移除集合中的所有元素。

let set=new Set();                           
set.add(5);                                  
set.add(‘5‘);                                
set.add(5);                
                  
console.log(set.size);         //   2,Set有自动去
console.log(set.has(5));          // true    

set.delete(5);                               
console.log(set.has(5));           //false   

set.clear();                                 
console.log(set.size);                //0    

Set集合的forEach()方法

　　forEach()方法的回调函数接受以下3个参数：

1）Set集合中下一次索引的位置

2）与第一个参数一样的值

3）被遍历的Set集合本身

  let set=new Set([1,2]);                          
  set.forEach(function(value,key,ownerSet){        
      console.log(key+‘‘+value);                   
      console.log(ownerSet===set);                 
      //1 1                                        
      //true                                       
      //2 2                                        
      //true                                       

将Set集合转换成数组

　　将数组转换为Set集合的过程很简单，只需给Set构造函数传入数组即可；将Set集合在转回数组的过程同样很简单，可以运用展开运算符（...）

 let set=new Set([1,2,3,3,4,5,6,6]),array=[...set];           
 console.log(set);//[1,2,3,4,5,6]                             

WeakSet集合

　　将对象存储在Set的实例与存储在变量中完全一样，只要Set实例中的引用存在，垃圾回收机制就不能释放该对象的内存空间，这是WeakSet集合可以解决问题。

　　用WeakSet构造函数可以创建WeakSet集合，集合支持三种方法：add()、has()、delete()。

let set=new WeakSet(),                     
    key={};                                
set.add(key);                              
console.log(set.has(key));//true 
          
set.delete(key);                           
console.log(set.has(key));// false         

Set与WeakSet的区别

• 在WeakSet的实例中，如果向add()、has()、delete()这三个方法传入非对象参数都会导致程序报错。
• WeakSet集合不可迭代，所以不能被用于for-of循环。
• WeakSet集合不暴露任何迭代器，所以无法通过程序本身来检测其中的内容。
• WeakSet集合不支持forEach()方法
• WeakSet集合不支持size属性。

如果只需要跟踪对象引用，优选WeakSet。

Map

　　Map类型是一种储存着许多键值对的有序列表，其中的键名和对应的值支持所有的数据类型。

创建Map集合并添加元素

　　添加新元素可以调用set()方法并分别传入键名和对应值作为两个参数；如果要从集合中获取信息，可以调用get()方法。

 let map =new Map();                                 
 map.set("title","zhelishi");                        
 map.set("year",2017);                               
                                                     
 console.log(map.get("title"));//‘zhelishi‘          
 console.log(map.get("year"));//2017                 

Map集合支持的方法、初始化方法forEach()方法

• has(key)检测指定的键名在Map集合中是否已经存在
• delete(key)从集合中移除指定键名及其对应的值
• clear()移除集合中所有的键值对

let map=new Map();                                      
map.set("name","jiaxiaonuo");                           
map.set("age",24);                                      
console.log(map.size);//2                               
                                                        
console.log(map.has("name"));//true                     
console.log(map.has("age"));//true                      
console.log(map.get("name"));//"jiaxiaonuo"             
console.log(map.get("age"));//24                        
                                                        
map.delete("name");                                     
console.log(map.has("name"));//false                    
console.log(map.get("name"));//undefined                
console.log(map.size);//1                               
                                                        
map.clear();                                            
console.log(map.size);//0                               

　　初始化Map集合

 let map=new Map([["name","jiaxiaonuo"],["age",24]]);            
 console.log(map.has("name"));//true                             
 console.log(map.get("name"));//jiaxiaonuo                       
 console.log(map.size);//2                                       

　　Map集合的forEach()方法接受三个参数：

• Map集合中下一次索引的位置
• 值对应的键名
• Map集合本身

 let map=new Map([["name","jiaxiaonuo"],["age",24]]);     
 map.forEach(function(value,key,owenMap){                 
     console.log(key+‘‘+value);                           
     console.log(owenMap===map);                          
     //name jiaxiaonuo                                    
     //true                                               
     //age 24                                             
     //true                                               
 })                                                       

WeakMpa集合

　　该集合的最大用途是保存Web页面中的DOM元素。它是一种存储着许多键值对的无序列表，列表的键名必须是非null类型的对象，键名对应的值则可以是任意类型。通过set()方法添加数据，通过get()方法获取数据。

 let map=new WeakMap(),                                
    element=document.querySelector(".element");        
 map.set(element,‘jiaxiaonuo‘);                        
 let value=map.get(element);                           
 console.log(value);                      //jiaxiaonuo             
element.parent().removeChild(element);          
element=null;      

　　该集合支持has()、delete()方法

let map=new WeakMap(),                       
    element=document.querySelector(".element"
map.set(element,"jiaxiaonuo");               
                                             
console.log(map.has(element));    //true     
console.log(map.get(element));   //jiaxiaonuo
map.delete(element);                         
console.log(map.has(element));  //false      
console.log(map.get(element));//undefined    

　　集合初始化

 let key1={},key2={},                                            
     map=new Map([[key1,"hello"],[key2,"world"]]);               
 console.log(map.has(key1)); //true                              
 console.log(map.get(key1)); //hello                             
 console.log(map.has(key2)); // true                             
 console.log(map.get(key2));//world                              
                                                                 

　　当数据再也不可访问后集中存储的相关引用和数据都会被自动回收，这有效地避免了内存泄漏的问题，从而优化了内存的使用。相对Map集合而言，Weak Map集合对用户的可见度更低，气不支持通过forEach()方法、size属性及clear()方法来管理集合中的元素。