Set
Set是es6新提供的数据结构，类似于数组。特点：Set内成员值是惟一的，没有重复的值。
const data=new Set();
data.add(1);
data.add(2);
data.add(2);//2已经存在，不会添加重复的值。
data.add(3);
}
//data 的制值 1,2,3
Set 创建时可以接受一个数组作为参数。可以用来数组去重
var set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]
var set = new Set([1, 2, 3, 4, 4，‘2’]);//Set 内部不会发生类型转换 2.和‘-2’是不同的值.
[...set]
[1,2,3,4,'2']
var set=new Set();
set.add({});
set.add({});
//[{},{}] 对象和对象时不相等的 {}==={} 为false
Set 实例的方法。
Set结构的实例有以下属性。
Set.prototype.constructor：构造函数，默认就是Set函数。
Set.prototype.size：返回Set实例的成员总数。
Set实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。
add(value)：添加某个值，返回Set结构本身。
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
has(value)：返回一个布尔值，表示该值是否为Set的成员。
clear()：清除所有成员，没有返回值。
image.png
Set 的遍历
1：keys方法、values方法、entries方法返回的都是遍历器对象。Set 接口没有键名，只有键值。因此Keys 和Values 返回值相等。
var obj=new Set([1,2,3,4,5,3,6]);
[...obj.keys()]; //[1,2,3,4,5,3,6]
[...obj.values()];//[1,2,3,4,5,3,6]
[...obj.entries()];//[[1,1],[2,2],[3,3],[4,4],[5,5],[6,6]]
2:forEach()
let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2) )
// 2
// 4
// 6
其他遍历 for of 扩展运算符也可以使用
var obj=new Set([1,2,3,4,5,3,6]);
[...obj]
//返回是数组：[1,2,3,4,5,6]
WeakSet
1：WeakSet 成员只能是对象，并且存储的对象都是弱引用。
2：WeakSet没有size 属性，因此不可遍历。
3:有三个方法：add，delete，has。
const ws = new WeakSet()
var a = {p1:'1', p2:'2'}；
ws.has(a);//true
a=null;
ws.has(a);//false;
主要应用场景：存储DOM节点。成员是弱引用，不会担心节点被删除造成内存泄露。也可以避免全部使用强引用DOM对象，造成无法释放内存，造成内存溢出。
Map
ES6中提供了Map的数据结构,类似于对象，是键值对的集合， 与对象不同的是，对象的键值只能是字符串，而Map 可以将任意类型都可以作为键值。
（1）size属性
size属性返回Map结构的成员总数。
（2）set(key, value)
方法设置key所对应的键值，然后返回整个Map结构。如果key已经有值，则键值会被更新，否则就新生成该键。
（3）get(key) ：获取键值
（4）has(key):判断键是否存在
（5）delete（key）：删除某个键。
（6）clear（） 清除所有成员，没有返回值
var a={a:1};
map.set('q',1);
map.set('d','2').set('y','2');//可以采用链式调用
map.set(2,1); //数字类型作为键值
map.set(null,2);//null 作为键值
map.set(a,2);//对象作为键值
map.has(a);//true
map.has(null);//true
map.get(null);//2
map.deltete(null);//删除
map.has(null);//false
Map 的入参是数组:Map也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。
var map = new Map([
['a', '1'],
['b', '2']
]);
map.size // 2
map.has('a') // true
map.get('a') // "1"
map.has('b') // true
map.get('b') // "2"
Map 的遍历方法同Set。
keys（），values（），entries（），forEach()
Map与其他数据结构的转换
与数组的转换
var map = new Map([
['a', '1'],
['b', '2']
]);//数组转为Map
[...map]// [['a', '1'],['b', '2']]
Map 转变为对象
var map = new Map([
['a', '1'],
['b', '2']
]);//数组转为Map
var obj={};
for (let [key, value] of map) {
obj[key]=value
}
console.log(obj)//{a: "1", b: "2"}
WeakMap
只接受对象作为键名，键名为弱引用，不能遍历（没有size属性）
操作方法：get()、set()、has()、delete()
应用场景：
同WeakSet 一样，适合用来操作DOM。
let elem= document.getElementById('logo');
let myWeakmap = new WeakMap();
myWeakmap.set(myElement, {timesClicked: 0});
myElement.addEventListener('click', function() {
let logoData = myWeakmap.get(myElement);
logoData.timesClicked++;
}, false);
myElement是一个 DOM 节点，每当发生click事件，就更新一下状态。我们将这个状态作为键值放在 WeakMap 里，对应的键名就是myElement。一旦这个 DOM 节点删除，该状态就会自动消失，不存在内存泄漏风险。
网友评论