ES6 逐点突破系列 -- Set Map，前端组件化开发框架，web开发小工具

WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别。

首先，WeakSet 的成员只能是对象，而不能是其他类型的值。

其次，WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。

用法上面也有细小的区别，WeakSet 没有size属性，没有办法遍历它的成员。

Map

---

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

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

const m = new Map();

const o = {p: ‘Hello World’};

m.set(o, ‘content’)

m.get(o) // “content”

m.has(o) // true

m.delete(o) // true

m.has(o) // false

map.clear()

map.size // 0

如果对同一个键多次赋值，后面的值将覆盖前面的值。

如果读取一个未知的键，则返回undefined。

注意，只有对同一个对象的引用，Map 结构才将其视为同一个键。这一点要非常小心。

const map = new Map();

map.set([‘a’], 555);

map.get([‘a’]) // undefined

上面代码的set和get方法，表面是针对同一个键，但实际上这是两个不同的数组实例，内存地址是不一样的，因此get方法无法读取该键，返回undefined。

同理，同样的值的两个实例，在 Map 结构中被视为两个键。

const map = new Map();

const k1 = [‘a’];

const k2 = [‘a’];

map

.set(k1, 111)

.set(k2, 222);

map.get(k1) // 111

map.get(k2) // 222

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’]]

此外，Map 还有一个forEach方法，与数组的forEach方法类似，也可以实现遍历。

map.forEach(function(value, key, map) {

console.log(“Key: %s, Value: %s”, key, value);

});

forEach方法还可以接受第二个参数，用来绑定this。

const reporter = {

report: function(key, value) {

console.log(“Key: %s, Value: %s”, key, value);

}

};

map.forEach(function(value, key, map) {

this.report(key, value);

}, reporter);

上面代码中，forEach方法的回调函数的this，就指向reporter。

weakMap

---

WeakMap与Map的区别有两点。

首先，WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。

其次，WeakMap的键名所指向的对象，不计入垃圾回收机制。

WeakMap 的用途

WeakMap 应用的典型场合就是 DOM 节点作为键名。

let myWeakmap = new WeakMap();

myWeakmap.set(

document.getElementById(‘logo’),

{timesClicked: 0})

;

document.getElementById(‘logo’).addEventListener(‘click’, function() {

let logoData = myWeakmap.get(document.getElementById(‘logo’));

logoData.timesClicked++;

}, false);

上面代码中，document.getElementById(‘logo’)是一个 DOM 节点，每当发生click事件，就更新一下状态。我们将这个状态作为键值放在 WeakMap 里，对应的键名就是这个节点对象。一旦这个 DOM 节点删除，该状态就会自动消失，不存在内存泄漏风险。

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

const wm = new WeakMap();

let key = {};

let obj = {foo: 1};

wm.set(key, obj);

obj = null;

wm.get(key)

// Object {foo: 1}

WeakMap 的另一个用处是部署私有属性。

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频**

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-xQMRIlWZ-1710770670820)]

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】