Map与Set同为集合，但也有区别。Set常用于检查对象中是否存在key，Map集合常用于获取存储的信息。SetSet是一个有序列表，包含相互独立的唯一值。创建一个Set既然我们不知道一个Set长什么样子，它有什么价值，那么为什么不创建一个Set集合看看呢？要创建一个Set集合，可以这样做：letset=newSet();console.log(set);//浏览器控制台中的输出Set(0){}size:(...)__proto__:Set[[Entries]]:Array(0)length:0看起来像一个对象，所以现在我们在控制台打印一个对象来比较两者的区别。letobj=newObject()console.log(obj)//在控制台输出对象Object{}__proto__:从输出结果来看，Set和Object有明显区别，反正不是一回事。接下来我们来看一下Set的原型：这里主要介绍几个基本原型的作用。如果你想了解它们的全部，请到Set集合首页查看：Set.prototype.size返回Set对象的value个数。Set.prototype.add(value)在Set对象的末尾添加一个元素。返回集合对象。Set.prototype.entries()返回一个新的迭代器对象，其中包含按插入顺序排列的Set对象中所有元素的[value,value]值数组。为了使此方法与Map对象相似，每个值的键和值都相等。Set.prototype.forEach(callbackFn[,thisArg])按插入顺序为Set对象中的每个值调用一次callBackFn。如果提供了thisArg参数，则回调中的this将是此参数。Set.prototype.has(value)返回一个布尔值，指示该值是否存在于Set中。在示例中使用这些方法进行测试：letset=newSet();set.add('haha');set.add(Symbol('haha'));console.log(set.size);//2console.log(set);Set(2){"haha",Symbol(haha)}size:(...)__proto__:Set[[Entries]]:Array(2)0:"haha"1:Symbol(haha)length:2控制台。log(set.has('haha'))//true到这里你会发现Set就像是一个数组又是一个对象，但又不完全是。迭代SetSet由于它提供了条目和forEach方法，因此它是可迭代的。但是如果你用forin来迭代Set，你就不能这样做了：for(letiinsets){console.log(i);//不存在}forin遍历对象的key，set中的元素没有key，使用forof遍历：for(letvalueofsets){console.log(value);}//"哈哈"//Symbol(哈哈)//如果需要key，使用下面的方法for(let[key,value]ofsets.entries()){console.log(value,key);}//"哈哈""haha"//Symbol(haha)Symbol(haha)forEach操作Set：Set本身没有key，forEach方法中的key设置为元素本身。sets.forEach((value,key)=>{console.log(value,key);});//"haha""haha"//Symbol(haha)Symbol(haha)sets.forEach((value,key)=>{console.log(Object.is(value,key));});//truetrueSet和Array转换Set和array太相似了，Set集合的特点是没有key，没有下标，只有size和prototype和一个类数组的唯一元素的iterable。在这种情况下，我们可以将Set集合转换为数组，将数组转换为Set。//数组转换为Setconstarr=[1,2,2,'3','3']letset=newSet(arr);console.log(set)//Set(3){1,2,"3"}//Set转为数组letset=newSet();set.add(1);set.add('2');console.log(Array.from(set))//(2)[1,"2"]js面试中，一道经常考到的数组去重题，可以利用Set集合的不可重复性来解决。经测试，只有以下三种数据可以去重。constarr=[1,1,'haha','haha',null,null]letset=newSet(arr);console.log(Array.from(set))//[1,'haha',null]console.log([...set])//[1,'haha',null]WeakSet集合Set本身是强引用，只要newSet()实例化的引用存在，内存就不会释放，所以一刀切肯定不好。比如你定义了一个DOM元素的Set集合，然后在一个js中引用实例，但是当页面关闭或者跳转的时候，你想让引用马上释放内存，Set就不听话了。好吧，你也可以使用Wea??kSet语法：newWeakSet([iterable]);与Set的区别：1.WeakSet对象只能存储对象值，不能存储原始值，而Set对象可以。2.WeakSet对象中存储的对象值是弱引用的。如果没有其他变量或属性引用对象值，则对象值将被垃圾回收。正因为如此，无法枚举WeakSet对象，没有办法获取它包含的所有元素。使用：letset=newWeakSet();constclass_1={},class_2={};set.add(class_1);set.add(class_2);console.log(set)//WeakSet{Object{},Object{}}console.log(set.has(class_1))//trueconsole.log(set.has(class_2))//trueMapMap是一个有序列表存储很多key-value对，key和value支持所有数据类型。创建Map如果说Set就像一个数组，那么Map更像是一个对象。而对象中的key只支持字符串，而Map更强大，支持所有数据类型，无论是数字、字符串、符号等。//一个空的Map集合letmap=newMap()console.log(map)Map的所有原型方法：相对于Set集合的原型，Map集合的原型多了set()和get()方法，注意set()和Set集合不是一个东西。Map没有add，使用set()添加key和value，在Set集合中，使用add()添加value，没有key。letmap=newMap();map.set('name','haha');map.set('id',10);console.log(map)//输出结果Map(2){"name"=>"哈哈","id"=>10}size:(...)__proto__:Map[[Entries]]:Array(2)0:{"name"=>"haha"}1:{"id"=>10}length:2console.log(map.get('id'))//10console.log(map.get('name'))//“哈哈”使用对象作为小键map=newMap();constkey={};map.set(key,'Whoknowswhatthisis');console.log(map.get(key))//谁知道这是什么Map也可以用forEach遍历keys,valueletmap=newMap();constkey={};map.set(key,'这是什么东西');map.set('name','哈哈');map.set('id',1);map.forEach((value,key)=>{console.log(key,value)})//Object{}"Whatisthis?"//"name""haha"//"id"1otherHow要使用地图可以到地图之家学习。弱图有强图和弱鸡图。像Set要解决的问题，就是希望Map不再被引用时，自动触发垃圾回收机制。然后，您需要WeakMap。letmap=newWeakMap();constkey=document.querySelector('.header');map.set(key,'这是什么东西');map.get(key)//"这是什么东西"//移除元素key.parentNode.removeChild(key);key=null;SummarySet集合可以用来过滤数组中重复的元素，只能通过has方法检测指定值是否存在，或者通过forEach来处理每个价值。WeakSet集合存储对象的弱引用。当对象的其他强引用被清除后，集合中的弱引用会被垃圾回收机制自动回收。跟踪组中的对象是使用集合的最佳方式。Map集合通过set()添加键值对，通过get()获取键值。各种方法的使用请参考文章教程。您可以将其视为比Object更强大的对象。WeakMap集合只支持对象类型的键。所有键都是弱引用。当该对象的其他强引用被清除后，集合中的弱引用会被垃圾回收机制自动回收。分离对象是添加额外信息的好方法。记得刚开始学习JavaScript的时候，并不知道各种数据类型有什么用。如果你现在刚学过Map和Set，你也有不知道它们有什么用的想法。那么，恭喜你，他们已经开始进入你的编程了。生活，慢慢你就会熟悉它们。=>返回文章列表
