数组foreach和map的区别,什么时候用到map和set

在此，目录标题ES6集合1、Set集合1、操作方法2、遍历方法： 2、WeakSet集合1、概念理解2、方法： 3、WeakSet的应用场景/优点3、Map集合1、概念理解2、属性3、基本方法4、遍历遍历和过滤贴图以合并数组7、forEach ()、WeakMap集合1、概念理解2、WeakMap集合3、如何使用WeakMap集合支持4、WeakMap集合的用途

ES6的集合1、Set集合

Set集合：具有类似数组的结构，没有重复值的数据结构。 主要用于数组变重，字符串变重。

1、添加操作方法(1) add ) ) :值，返回Set结构本身

let set=new Set () set.add(1) ) 1； 控制台. log (set； Set.add(1).add (2).add (1) console.log ) /注：扩展运算符.)将Set值扩展为console.log (.set ) )

(2) delete ) :删除该值，冰返回boolean，指示删除是否成功)3) has ) :判断该值是否存在，并返回boolean

let set=new Set () set.add(1) )1).add )； leta=set.delete(1； console.log(a(a(a(Set ) /注意：扩展运算符)…)通过扩展集值来扩展console.log (set ) console.log (a ) set.delete(3) )

)3) has ) :判断该值是否存在，并返回Boolean

let set=new Set () set.add(1) )1).add )； leta=set.has(1； //trueletb=set.has(3； //falseconsole.log(a，b ) (4) clear ) ) :清除所有值。 没有返回值

let set=new Set (； set.add(1).add ) 2； set.clear (； 控制台. log (set，[.set]； //Set(0) {} [] 2，遍历方法) )1)由于set只有键值而没有键名，所以也可以说键和值相同(键、值相同且可选)，因此keys和values的返回值相同

let set=new Set (； set.add(1).add (2).add (3) for ) letIofset.keys ) )/keysconsole.log ) }for )遍历letIofset.values

(2) forEach ) ) :

let set=new Set (； set.add(Hello ).add ) ) world )； set.foreach((key，val )={console.log ) key'|'val ) ) ) ) ) ) ) )。

)3) Set可以接受数组作为参数。

let arr=[ '青年草丛'，'闪闪发光'，' yldsh '，'闪闪发光' ]； letset=newset(ARR； console.log(.set )

)4) Set实现并集和交叉：

letarr=[ 4，5，6 ]； let list=[ 5，6，7 ]； letseta=newset(ARR； let setb=newset (列表； //并集：集合a和集合b的并集aubletbj=newSet([.seta， setB] ) console.log(bj )//set结构set ) 4、5、6，)//交集：集合a和.

二、WeakSet集合1、概念理解WeakSet对象可以将弱引用对象保存在一个集合中

WeakSet 与 Set 的区别：

)1) WeakSet只能存储对象引用，不能存储值，但Set对象可以是任何一个。

)2) WeakSet对象中存储的对象的值都是弱参照。 也就是说，如果垃圾回收机制未考虑对对象应用WeakSet，并且其他变量或属性未引用该对象的值，则该对象将被垃圾收集(如果该对象仍是weakseek ) 因此，WeakSet对象包含多少成员元素取决于垃圾回收机制是否正在运行

akSet 对象是无法被遍历的（ES6 规定 WeakSet 不可遍历），也没有办法拿到它包含的所有元素

2、方法：

WeakSet 支持 add，has 和 delete 方法，但不支持 size 和 keys()，并且不可迭代。
（1）add(value)：在WeakSet 对象中添加一个元素value
（2）has(value)：判断 WeakSet 对象中是否包含value
（3）delete(value)：删除元素 value
（4）clear()：清空所有元素constructor：构造函数，任何一个具有 Iterable 接口的对象，都可以作参数

let jack = {name: "jack"}; let weakSet = new WeakSet(); weakSet.add(jack, 22); console.log( weakSet.has(jack) ); // true weakSet.delete(jack); console.log( weakSet ); // WeakSet {} 3、WeakSet 的应用场景/好处

用于存储DOM节点，而不用担心这些节点从文档移除时会引发内存泄露

三、Map集合 1、概念理解

JavaScript的对象(Object)，本质上是键值对的集合(Hash结构)，但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

为了解决这个问题，ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值(包括对象)都可以当作键。也就是说，Object结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的Hash结构实现。

ES6中的Map类型是一种储存着许多键值对的有序列表，其中的键名和对应的值支持所有的数据类型。键名的等价性判断是通过调用Object.is()方法实现的，所以数字5与字符串"5"会被判定为两种类型，可以分别作为独立的两个键出现在程序中，这一点与对象不一样，因为对象的属性名总会被强制转换成字符串类型。

注意：
（1）有一个例外，Map集合中将+0和-0视为相等，与Object.is()结果不同
（2）如果需要“键值对”的数据结构，Map比Object更合适,具有极快的查找速度

2、属性

size:返回Map中的元素个数。

3、基本方法

（1）set（）：给Map添加数据，返回添加后的Map（给已存在的键赋值会覆盖掉之前的值）
（2）get（）：获取某个key的值，返回key对应的值，没有则返回unfined
（3）has（）：检测是否存在某个key，返回布尔值
（4）delete（）：删除某个key及其对应的value，返回布尔值，成功：true；失败：false
（5）clear（）：清除所有的值，返回undefined

let map = new Map();map.set("name","houchai");map.set("age",25);console.log(map.size); //2;llllllllllllllllllllll;llllllconsole.log(map.has("name"));//true；;；；；；；；；；；；console.log(map.get("name"));//"huochai"console.log(map.has("age"));//trueconsole.log(map.get("age"));//25map.delete("name");console.log(map.has("name"));//falseconsole.log(map.get("name"));//undefinedconsole.log(map.size);//1map.clear();console.log(map.has("name")); // falseconsole.log(map.get("name")); // undefinedconsole.log(map.has("age")); // falseconsole.log(map.get("age")); // undefinedconsole.log(map.size); // 0 4、遍历方法

注意
Map的遍历顺序就是插入顺序
（1）keys（）：获取Map的所有key
（2）values（）：获取 Map的所有值
（3）entries（）：获取Map的所有成员
（4）forEach（）：遍历Map 的所有成员

const map = new Map([ ['F','no'], ['T','yes']]);for(let key of map.keys()){ console.log(key);// "F" "T"}for(let val of map.values()){ console.log(val);//"no" "yes"}for(let item of map.entries()){ console.log(item[0],item[1]);//"F""no" "T""yes"}//或者for(let [key,value] of map.entries()){ console.log(key,value);//"F""no" "T""yes"}//等同于使用map.entries()for (let [key, value] of map) { console.log(key,value);//"F""no" "T""yes"} 5、转为数组

Map结构转为数字结构，比较快速的 方法是使用扩展运算符（…）

const map = new Map( [ [1,'one'], [2,'two'], [3,'three'] ]);[...map.keys()]; // [1,2,3][...map.values()];//['one','two','three'][...map.entries()];//[[1,'one'],[2,'two'],[3,'three']][...map]//[[1,'one'],[2,'two'],[3,'three']] 6、结合数组的map方法、filter方法，可以实现 Map 的遍历和过滤 const map0 = new Map().set(1,'a').set(2,'b').set(3,'c');const map1 = new Map( [...map0].filter(([k,v])=>k<3));//产生Map结构{1=>'a',2=>'b'}const map2 = new Map( [...map0].map(([k,v]) => [k*2,'_'+v]));//产生 Map 结构 {2 => '_a', 4 => '_b', 6 => '_c'} 7、forEach(） const map = new Map([ [1,'one'], [2,'two'], [3,'three']]);map.forEach((value,key,map)=>{ console.log(value,key,map);})

四、WeakMap集合 1、概念理解

WeakMap 对象是一组键值对的集合，其中的键是弱引用，其中，键必须是对象，而值可以是任意。

注意：WeakMap 弱引用的只是键名，而不是键值。键值依然是正常引用。

WeakSet 中，每个键对自己所引用对象的引用都是弱引用，在没有其他引用和该键引用同一对象，这个对象将会被垃圾回收（相应的key则变成无效的），所以，WeakSet 的 key 是不可枚举的。

2、使用WeakMap集合

ES6中的WeakMap类型是一种存储着许多键值对的无序列表，列表的键名必须是非null类型的对象，键名对应的值则可以是任意类型。

WeakMap的接口与Map非常相似，通过set()方法添加数据，通过get()方法获取数据

let map = new WeakMap(),element = document.querySelector(".element");map.set(element, "Original");let value = map.get(element);console.log(value); // "Original"element.parentNode.removeChild(element); // 移除元素element = null; // 该WeakMap在此处为空

WeakMap集合不支持size属性，从而无法验证集合是否为空；

3、WeakMap集合支持的方法

（1）has（）：检测给定的键在集合中 是否存在
（2）delete（）：可移除指定的键值对

let map = new WeakMap(),element = document.querySelector(".element");map.set(element, "Original");console.log(map.has(element)); // trueconsole.log(map.get(element)); // "Original"map.delete(element);console.log(map.has(element)); // falseconsole.log(map.get(element)); // undefined 4、WeakMap集合的用途

（1）储存DOM元素

let myElement = document.getElementById('btn');let myWeakmap = new WeakMap();myWeakmap.set(myElement, {timesClicked: 0});myElement.addEventListener('click', function() {let logoData = myWeakmap.get(myElement);logoData.timesClicked++;console.log(logoData.timesClicked)}, false);

代码中，myElement是一个DOM节点，每当发生click事件，就更新一下状态。我们将这个状态作为键值放在WeakMap里，对应的键名就是myElement。一旦这个DOM节点删除，该状态就会自动消失，不存在内存泄漏风险
（2）注册监听事件的listener对象，就很和使用WeakMap实现

const listener = new WeakMap(); listener.set(element1, handler1);listener.set(element2, handler2); element1.addEventListener('click', listener.get(element1), false);element2.addEventListener('click', listener.get(element2), false);

监听函数放在WeakMap里面。一旦 DOM 对象消失，跟它绑定的监听函数也会自动消失
（3）部署私有属性
我们创建对象的时候，通常写一个构造函数

function Person(name) { this._name = name; }Person.prototype.getName = function() { return this._name;};

但这时，创建一个Person 对象的时候，我们可以直接访问name 属性：

const person = new Person("sam")console.log(persn.name)

我们不想让用户直接访问name属性， 直接使用下面的方法将name包装成私有属性

let Person = (function() { let privateData = new WeakMap(); function Person(name) { privateData.set(this, { name: name });}Person.prototype.getName = function() { return privateData.get(this).name;};return Person;}());const person = new Person('json');console.log(person.getName())