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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了《深入理解ES6》之Set集合与Map集合相关的知识,希望对你有一定的参考价值。

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()方法来管理集合中的元素。

以上是关于《深入理解ES6》之Set集合与Map集合的主要内容,如果未能解决你的问题,请参考以下文章

理解数据结构之Set,只要5分钟!

ES6中的Set和Map集合

ES6中的Set和Map集合

ES6新特性总结Set集合Map集合

ES6新特性总结Set集合Map集合

ES6新语法(Set集合Map集合)