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

关注

原创最新推荐文章于 2026-11-09 14:27:30 发布 1k 阅读 AI 写同款· GEO 优化 ›

SpringBoot+Vue家具商城系统开发实践现代电商系统开发中，前后端分离架构已成为主流技术方案。SpringBoot作为Java领域的主流框架，通过自动配置和起步依赖显著提升后端开发效率；Vue.js则凭借其响应式数据绑定和组件化体系，成为前端开发的首选。这种技术组合特别适合需要快速迭代的电商场景，如家具商城这类涉及复杂商品展示和定制化需求的系统。通过Redis实现分布式缓存和锁机制，能有效应对高并发秒杀场景；而Three.js等3D渲染技术的集成，则为家具类商品提供了更直观的展示方式。在实际开发中，合理运用MyBatis-Plus、Element 阅读详情

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前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。