ES6 逐点突破系列 -- Set Map

// red

// green

// blue

for (let item of set.entries()) {

console.log(item);

}

// [“red”, “red”]

// [“green”, “green”]

// [“blue”, “blue”]

Set 结构的实例默认可遍历，它的默认遍历器生成函数就是它的values方法。

Set.prototype[Symbol.iterator] === Set.prototype.values

// true

这意味着，可以省略values方法，直接用for…of循环遍历 Set。

数组的map和filter方法也可以间接用于 Set 了。

let set = new Set([1, 2, 3]);

set = new Set([…set].map(x => x * 2));

// 返回Set结构：{2, 4, 6}

let set = new Set([1, 2, 3, 4, 5]);

set = new Set([…set].filter(x => (x % 2) == 0));

// 返回Set结构：{2, 4}

因此使用 Set 可以很容易地实现并集（Union）、交集（Intersect）和差集（Difference）。

let a = new Set([1, 2, 3]);

let b = new Set([4, 3, 2]);

// 并集

let union = new Set([…a, …b]);

// Set {1, 2, 3, 4}

// 交集

let intersect = new Set([…a].filter(x => b.has(x)));

// set {2, 3}

// （a 相对于 b 的）差集

let difference = new Set([…a].filter(x => !b.has(x)));

// Set {1}

WeakSet

---

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 节点删除，该状态就会自动消失，不存在内存泄漏风险。

最后

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

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
2NtgzykU-1714854225124)]

[外链图片转存中…(img-qQo7JfaP-1714854225125)]

[外链图片转存中…(img-GImvWVYi-1714854225125)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

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