深入理解ES6笔记（七）Set集合和Map集合

主要知识点：Set的基本操作，Weak Set，Map的基本操作，Weak Map

《深入理解ES6》笔记 目录

ES6 的 Set

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set 本身是一个构造函数，用来生成 Set 数据结构。

创建 Set 并添加项目

let set = new Set();
set.add(5);
set.add("5");
console.log(set.size); // 2

可以使用数组来初始化一个 Set ，并且 Set 构造器会确保不重复地使用这些值:

let set = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
console.log(set.size); // 5

使用 has() 方法来测试某个值是否存在于 Set 中:

let set = new Set();
set.add(5);
set.add("5");
console.log(set.has(5)); // true
console.log(set.has(6)); // false

移除值

使用 delete() 方法来移除单个值，或调用 clear() 方法来将所有值从 Set 中移除。

let set = new Set();
set.add(5);
set.add("5");
console.log(set.has(5)); // true
set.delete(5);
console.log(set.has(5)); // false
console.log(set.size); // 1
set.clear();
console.log(set.has("5")); // false
console.log(set.size); // 0

Set 上的 forEach() 方法

forEach() 方法会被传递一个回调函数，该回调接受三个参数：

1. 元素值；
2. 元素索引；
3. 目标 Set 自身。
   Set 中的每一项键与值是相等的

let set = new Set([1, 2]);
set.forEach(function(value, key, ownerSet) {
    console.log(key + " " + value);
    console.log(ownerSet === set);
});
// 输出
1 1
true
2 2
true

将 Set 转换为数组

let set = new Set([1, 2, 3, 3, 3, 4, 5]),
array = [...set];
console.log(array); // [1,2,3,4,5]

可以用此方法进行数组去重：

function eliminateDuplicates(items) {
    return [...new Set(items)];
}
let numbers = [1, 2, 3, 3, 3, 4, 5],
noDuplicates = eliminateDuplicates(numbers);
console.log(noDuplicates); // [1,2,3,4,5]

Weak Set

Set的引用类型：对象存储在 Set 的一个实例中时，实际上相当于把对象存储在变量中。只要对于 Set 实例的引用仍然存在，所存储的对象就无法被垃圾回收机制回收，从而无法释放内存。

let set = new Set(),
key = {};
set.add(key);
console.log(set.size); // 1
// 取消原始引用
key = null;
console.log(set.size); // 1
// 重新获得原始引用
key = [...set][0];

当 JS 代码在网页中运行，同时你想保持与 DOM 元素的联系，在该元素可能被其他脚本移除的情况下，你应当不希望自己的代码保留对该 DOM 元素的最后一个引用（这种情况被称为内存泄漏）。
Weak Set
该类型只允许存储对象弱引用，而不能存储基本类型的值。对象的弱引用在它自己成为该对象的唯一引用时，不会阻止垃圾回收：
创建 Weak Set

let set = new WeakSet(),
key = {};
// 将对象加入 set
set.add(key);
console.log(set.has(key)); // true
set.delete(key);
console.log(set.has(key)); // false

和Set的区别：

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

const ws = new WeakSet();
ws.add(1)
// TypeError: Invalid value used in weak set
ws.add(Symbol())
// TypeError: invalid value used in weak set

• WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。
• Weak Set 不可迭代，因此不能被用在 for-of 循环中；
• Weak Set 无法暴露出任何迭代器（例如 keys() 与 values() 方法），因此没有任何编程手段可用于判断 Weak Set 的内容；
• Weak Set 没有 forEach() 方法；
• Weak Set 没有 size 属性。

ES6 的 Map

ES6 的 Map 类型是键值对的有序列表，而键和值都可以是任意类型。

• 基本用法：

let map = new Map();
map.set("title", "Understanding ES6");
map.set("year", 2016);
console.log(map.get("title")); // "Understanding ES6"
console.log(map.get("year")); // 2016

如果任意一个键不存在于 Map 中， 则 get() 方法就会返回特殊值 undefined

可以将对象作为键，这些键不会被强制转换成其他形式，每个对象就都被认为是唯一的

let map = new Map(),
key1 = {},
key2 = {};
map.set(key1, 5);
map.set(key2, 42);
console.log(map.get(key1)); // 5
console.log(map.get(key2)); // 42

Map 的方法

• has(key) ：判断指定的键是否存在于 Map 中；
• delete(key) ：移除 Map 中的键以及对应的值；
• clear() ：移除 Map 中所有的键与值。

属性：size

let map = new Map();
map.set("name", "Nicholas");
map.set("age", 25);
console.log(map.size); // 2
console.log(map.has("name")); // true
console.log(map.get("name")); // "Nicholas"
console.log(map.has("age")); // true
console.log(map.get("age")); // 25
map.delete("name");
console.log(map.has("name")); // false
console.log(map.get("name")); // undefined
console.log(map.size); // 1
map.clear();
console.log(map.has("name")); // false
console.log(map.get("name")); // undefined
console.log(map.has("age")); // false
console.log(map.get("age")); // undefined
console.log(map.size); // 0

Map 的初始化

将数组传递给 Map 构造器，以便使用数据来初始化一个 Map 。该数组中的每一项也必须是数组，内部数组的首个项会作为键，第二项则为对应值：

let map = new Map([["name", "Nicholas"], ["age", 25]]);
console.log(map.has("name")); // true
console.log(map.get("name")); // "Nicholas"
console.log(map.has("age")); // true
console.log(map.get("age")); // 25
console.log(map.size); // 2

便历方法

• forEach

let map = new Map([ ["name", "Nicholas"], ["age", 25]]);
map.forEach(function(value, key, ownerMap) {
    console.log(key + " " + value);
    console.log(ownerMap === map);
});
//打印：
name Nicholas
true
age 25
true