大家好，我是前端人，每天分享前端相关内容！今天给大家介绍一下ES6中Map、WeakMap、set、WeakSet的详细使用，以及它们的区别！本文知识点归纳如下：1.SetES6提供了一种新的数据结构Set集合，它类似于数组，但其成员的值是唯一的。合集和高中学的合集差不多，概念是一样的。集合实现了迭代器接口，因此可以使用扩展运算符扩展它们，或使用for...of遍历它们。set用法：lets=newSet(['年终奖是大事','放假是好事','放假是好事']);console.log(s)//set(2){'年终奖是大事','放假是好事'}console.log(typeofs)//objectnewSet返回的数据是一个对象，它会自动删除重复项。集合的属性和方法有：size：返回集合中元素的个数add：增加一个新元素delete：删除一个元素，返回一个布尔值h??as：检查集合是否包含元素clear：清除commonSet的应用：数组去重：letarr=[1,2,3,4,3,2,1]letres=[...newSet(arr)]console.log(res)//[1,2,3,4]取两个集合的交集letarr1=[1,2,3,4,3,2,1]letarr2=[1,2]letres=[...newSet(arr1).filter(item=>newSet(arr2).has(item))console.log(res)//[1,2]取两个集合的并集letarr1=[1,2,3,4,3,2,1]letarr2=[1,2]letres=[...newSet([...arr1,...arr2])]console.log(res)//[1,2,3,4]取差letarr1=[1,2,3,4,3,2,1]letarr2=[1,2]letres=[...newSet(arr1)].filter(item=>!newSet(arr2).has(item))console.log(res)//[3,4]Set数据遍历:lets1=newSet()s1.add("Pecon")s1.add("夏威夷If")for(letvofs1){console.log("v",v)}/*vPecanvMacadamia*/Set遍历的方式有很多种，我只介绍for...of，其余的第二，MapES6提供了一个Map数据结构，类似于一个对象，一个键值对的集合，但是key的范围是不限于字符串，各种类型的值（包括对象）都可以作为键。它还实现了iterator接口，所以你也可以使用for...of来遍历，使用展开操作符来扩展数据。Map的使用：letm=newMap()m.set("name","我是前端人")letkey={job:"前端工程师"}m.set(key,["Operation","Design"])console.log(m)运行结果如图：集合的属性和方法：size：返回集合元素个数set：向Map中添加键值对。get：从Map中提取一个值。delete：删除一个元素，返回一个布尔值h??as：检查集合是否包含元素clear：清空集合的遍历Mapletmap=newMap([['title','helloworld'],['year','2022']]);map.forEach((value,key,ownerMap)=>{console.log(value);console.log(key);});helloworldtitle2022yearMap的应用假设有一个场景，我们要存储DOM节点的属性及其值，我们可能使用Object或者Map。选择mapConstM=newMap（）constloginbtn=document.queryselector（“＃login”）m.set（loginbtn，{disabled：true}）在此处应用，当用户登录，运行时，到另一个界面，登录按钮被去掉了。正常情况下，这个DOM节点应该被垃圾回收清除，但是它被loginBtn变量引用，而loginBtn又被Map作为key引用，所以登录DOM节点会一直留在内存中，白占空间。这时就需要引入WeakMap。3.WeakMapWeakMap的key只能是Object实例化的对象或派生类的对象。否则会报错。WeakMap对象的值可以是任何类型的数据。WeakMap使用letwm=newWeakMap()wm.set({},'value')弱键：WeakMap的键是对象或派生类的对象，目的是让这个键弱持有。这些对象是弱引用，不会干扰垃圾回收。当WeakMap中的键在WeakMap之外没有引用时，该键值对将被移除。Map中的实例将Map替换为weakMap:constvm=newWeakMap()constloginBtn=document.querySelector("#login")vm.set(loginBtn,{disabled:true})因为WeakMap对象的key不会被正式引用，也就是说loginBtn变量没有被vm引用。这时候垃圾回收器可以杀掉loginBtn变量和登录DOM节点来释放内存空间。WeakMap的key不被认为是正式引用，可以随时回收清除，所以WeakMap不提供迭代功能。对于size属性和clear方法，由于需要遍历所有key才可以计算，所以不能使用size和clear。WeakMap的API与Map对象基本相同，只是没有size属性和clear方法。4.WeakSetWeakSet就是Set什么WeakMap就是Map。在存储一个对象时，实际上存储的是对该对象的引用，即Set也叫StrongSet。如果存储的对象设置为null，但是Set实例仍然存在，垃圾回收器仍然无法回收该对象，因此无法释放内存。让set=newWeakSet();让key={};set.add(key);console.log(set.has(key));//trueset.delete(key);console.log(set.has(key));//false注意：WeakSet构造函数不接受基本类型的数据，只接受对象。类似地，可迭代对象或数组可以用作构造函数参数来创建WeakSet。WeakSet的API与Set对象基本相同，只是没有size属性和clear方法。五、总结差异5.1．对于WeakSet和Set的区别：WeakSet没有size和clear。WeakSet不能公开任何迭代器。WeakSet不可迭代，因此不能使用for...of遍历WeakSet实例。弱调用add方法时，传入非对象参数，会抛出异常。将非对象参数传递给has和delete方法返回false。WeakMap和Map的区别类似于上面WeakSet和Set的区别。不再。5.2.Set和Map的共同点和区别：Set和Map都是一种数据结构，但是Set是一个没有重复的有序列表，类似于数组，而Map是一个有序的键值对集合，类似于对象。两者都会使用Object.is()方法来判断值不相等来保证Set和Map去除重复值。Set不能随机访问其中的值，只能通过has判断一个值是否存在。而Map使用get来提取任意键对应的数据。Map和Set都可以随意向实例添加数据，Set使用add，Map使用set方法。所有其他API都是相同的。
