Set和Map

ES6 新增了两个数据结构，一个是 set，另外一个是 map。

1、set

在《你不知道的 JavaScript(下卷)》中是这么定义的：set 是一个值的集合，其中的值唯一（重复会被忽略）。
它类似于数组，但是每个成员的值是唯一的。

set 是一个构造函数，可以通过 new 来创建一个 set 实例。

1
2

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

上述可以看出，new Set 会自动过滤掉重复值，并返回一个集合，我们可以利用这个特性，来写出简单的数组去重。

1
2
3

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

set 通过 add()来增加成员，将新值放在集合尾部，如果新值跟原集合中的成员重复的话，会被自动过滤掉。

1
2
3
4
5
6

let set = new Set([1, 2, 3, 1, 4]);
set.add(1);
console.log(set); // {1, 2, 3, 4}
let set = new Set([1, 2, 3, 1, 4]);
set.add(0);
console.log(set); // {1, 2, 3, 4, 0}

Set 的构造函数可以接受一个具有 Iterable 接口的其他数据结构作为参数。

1
2
3
4
5
6
7
8
9

// 例1
let set = new Set("string");
console.log(set); // {"s", "t", "r", "i", "n", "g"}
// 例2
function foo(a, b) {
  let set = new Set(arguments);
  console.log(set); // {1, 2}
}
foo(1, 2);

2、set 的 API

set 的实例属性有两个：

1. Set.prototype.constructor：构造函数，默认就是 Set 函数。
2. Set.prototype.size： 返回 Set 对象中的值的个数。

实例方法分为两类，一个是操作类，一个是遍历类。
操作类：

1. Set.prototype.add(value)：在 Set 对象尾部添加一个元素。返回该 Set 对象。
2. Set.prototype.clear()：移除 Set 对象内的所有元素。
3. Set.prototype.delete(value)：移除 Set 的中与这个值相等的元素，返回 Set.prototype.has(value)在这个操作前会返回的值（即如果该元素存在，返回 true，否则返回 false）。Set.prototype.has(value)在此后会返回 false。
4. Set.prototype.has(value)：返回一个布尔值，表示该值在 Set 中存在与否。

1
2
3
4
5
6
7
8
9
10
11
12
13

// 例1
let set = new Set([1, 2, 3]);
set.clear();
console.log(set); // {}
// 例2
let set = new Set([1, 2, 3]);
let result = set.delete(1);
console.log(result); // true
console.log(set); // {2, 3}
// 例3
let set = new Set([1, 2, 3]);
let result = set.has(1);
console.log(result); // true

遍历类：

1. Set.prototype.values()：返回一个新的迭代器对象，该对象包含 Set 对象中的按插入顺序排列的所有元素的值。
2. Set.prototype.keys()：与 values()方法相同，返回一个新的迭代器对象，该对象包含 Set 对象中的按插入顺序排列的所有元素的值。
3. Set.prototype.forEach(callbackFn[, thisArg])：按照插入顺序，为 Set 对象中的每一个值调用一次 callBackFn。如果提供了 thisArg 参数，回调中的 this 会是这个参数。
4. Set.prototype.entries()：返回一个新的迭代器对象，该对象包含 Set 对象中的按插入顺序排列的所有元素的值的[value, value]数组。为了使这个方法和 Map 对象保持相似，每个值的键和值相等。

1
2
3
4
5
6
7
8

// 例1
let set = new Set([1, 2, 3]);
let keys = set.keys();
console.log(keys); // {1, 2, 3}
// 例2
let set = new Set([1, 2, 3]);
let values = set.values();
console.log(values); // {1, 2, 3}

上述两个例子，因为 Sset 没有键名，只有值，所以 keys 和 values 的结果是一样的。
Set 同样拥有 forEach 方法：

1
2
3
4
5
6
7

let set = new Set([1, 2, 3]);
set.forEach((key, value) => {
  console.log(`${key}:${value}`);
});
// 1:1
// 2:2
// 3:3

跟数组的 forEach 方法不同的是，它的回调函数的参数是其 key 值和 value 值，但是 Set 没有 key 值，所以其 key 和 value 相等。forEach 的第二个参数是 this 值，其绑定的是回调函数中的 this 值。
最后一个实例方法是 entries：

1
2
3
4
5
6
7
8

let set = new Set([1, 2, 3]);
let entries = set.entries();
console.log(entries);
// {
//   [1, 1],
//   [2, 2],
//   [3, 3]
// }

enteries()返回一个遍历器，返回一个键值对，但其键值对均相等。

3、WeakSet

WeakSet 也是一个构造函数，与 Set 一直，WeakSet 和 Set 两者相似但不同，不同点主要有两个：

1. WeakSet 的成员值必须是对象（可迭代的对象），而并不像 set 一样可以是原生类型值。
2. WeakSet 持弱引用：集合中对象的引用为弱引用。如果没有其他的对 WeakSet 中对象的引用，那么这些对象会被当成垃圾回收掉。这也意味着 WeakSet 中没有存储当前对象的列表。正因为这样，WeakSet 是不可枚举的。

1
2
3
4
5

let weakSet = new WeakSet([1, 2]); // Uncaught TypeError: Invalid value used in weak set
let weakSet = new WeakSet([
  [1, 2],
  [3, 4],
]); // {[1, 2], [3, 4]}

WeakSet 有三个实例方法：

1. WeakSet.prototype.add(value)：返回构造函数即 WeakSet 本身。
2. WeakSet.prototype.delete(value)：从该 WeakSet 对象中删除 value 这个元素, 之后 WeakSet.prototype.has(value) 方法便会返回 false。
3. WeakSet.prototype.has(value)：返回一个布尔值, 表示给定的值 value 是否存在于这个 WeakSet 中。

1
2
3
4
5
6
7
8
9
10
11
12
13

var ws = new WeakSet();
var foo = {};
var bar = {};

ws.add(foo);
ws.add(bar);

ws.has(foo); // true
ws.has(bar); // true

ws.delete(foo); // 从set中删除 foo 对象
ws.has(foo); // false, foo 对象已经被删除了
ws.has(bar); // true, bar 依然存在

4、Map

在 JS 中对象是创建无序键 / 值对数据结构 [ 也称为 映射（map）] 的主要机制。但是，对象作为映射的主要缺点是不能使用非字符串值作为键。所以在 ES6 提出一个新的数据结构，Map。
Map 和对象很类似，都是键值对的形式，但是 Map 的键可以是任意类型(对象或者原始值)，NaN 也可以作为键，不再只局限于字符串。
任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构都可以当作 Map 构造函数的参数。

1
2

let map = new Map([[{ a: 1 }, 3]]);
console.log(map); // {{a:1}: 3}

在 MDN 中清晰的列出了 Map 和 Object 间的不同：

5、Map 的 API

Map 的实例属性有两个：

1. Map.prototype.constructor：返回一个函数，它创建了实例的原型。默认是 Map 函数。
2. Map.prototype.size： 返回 Map 对象的键/值对的数量。

实例方法分为两类，一个是操作类，一个是遍历类。
操作类：

1. Map.prototype.set(key, value)：设置 Map 对象中键的值。返回该 Map 对象。
2. Map.prototype.get(key)：返回键对应的值，如果不存在，则返回 undefined。
3. Map.prototype.has(key)：返回一个布尔值，表示 Map 实例是否包含键对应的值。
4. Map.prototype.delete(key)：如果 Map 对象中存在该元素，则移除它并返回 true；否则如果该元素不存在则返回 false。随后调用 Map.prototype.has(key) 将返回 false 。
5. Map.prototype.clear()：移除 Map 对象的所有键/值对。

1
2
3
4
5
6
7
8
9

let map = new Map();
let key = { name: "Jack" };
let value = "啥";
map.set(key, value); // {{name: 'Jack'}: '啥'}
map.get(key); // '啥'
map.get(a); // undefined
map.has(key); // true
map.delete(key); // true
map.clear(); // {}

遍历类：

1. Map.prototype.entries()：返回一个新的 Iterator 对象，它按插入顺序包含了 Map 对象中每个元素的 [key, value] 数组。
2. Map.prototype.forEach(callbackFn[, thisArg])：按插入顺序，为 Map 对象里的每一键值对调用一次 callbackFn 函数。如果为 forEach 提供了 thisArg，它将在每次回调中作为 this 值。
3. Map.prototype.keys()：返回一个新的 Iterator 对象， 它按插入顺序包含了 Map 对象中每个元素的键 。
4. Map.prototype.values()：返回一个新的 Iterator 对象，它按插入顺序包含了 Map 对象中每个元素的值 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

let map = new Map([
  ["name", "Jack"],
  [{ age: 25 }, "啥"],
]);
map.entries(); // MapIterator {"name" => "Jack", {age: 25} => "啥"}
for (let item of map.entries()) {
  console.log(item); // ["name", "Jack"] [{age: 25}, "啥"]
}
map.forEach((value, key, map) => {
  console.log(value, key, map); // Jack name Map(2) {"name" => "Jack", {age: 25} => "啥"}
  //"啥"{age: 25} Map(2) {"name" => "Jack", {age: 25} => "啥"}
});
map.keys(); // MapIterator {"name", {age: 25}}
for (let item of map.keys()) {
  console.log(item); // "name" {age: 25}
}
map.values(); // MapIterator {"Jack", "啥"}
for (let item of map.values()) {
  console.log(item); // "Jack" "啥"
}

6、Map 和其他数据结构的转换

6.1、Map 转数组

ES6 给出一个最简单的方式，扩展运算符。

1
2
3
4
5

let map = new Map([
  ["name", "Jack"],
  [{ age: 25 }, "啥"],
]);
console.log([...map]); // [['name', 'Jack'], [{age: 25}, '啥']]

除此之外还可以用 Array.from()。

1
2
3
4
5

let map = new Map([
  ["name", "Jack"],
  [{ age: 25 }, "啥"],
]);
console.log(Array.from(map)); // [['name', 'Jack'], [{age: 25}, '啥']]

6.2、Map 转对象

如果所有 Map 的键都是字符串，它可以无损地转为对象。

1
2
3
4
5
6
7
8
9
10
11

function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k, v] of strMap) {
    obj[k] = v;
  }
  return obj;
}

const myMap = new Map().set("yes", true).set("no", false);
strMapToObj(myMap);
// { yes: true, no: false }

6.3 Map 转 JSON

Map 转 JSON 有两个形式，第一种是键名都是字符串的类型的，第二种是键名中包含非字符串类型。
第一种的话直接将 map 转为对象，然后再用 JSON.Stringfy()进行转换。
第二种的话可以转成数组 JSON。

1
2
3
4
5
6
7

function mapToArrayJson(map) {
  return JSON.stringify([...map]);
}

let myMap = new Map().set(true, 7).set({ foo: 3 }, ["abc"]);
mapToArrayJson(myMap);
// '[[true,7],[{"foo":3},["abc"]]]'

7、WeakMap

WeakMap 和 WeakSet 有些类似，都是弱引用，并且成员值的键必须是对象。

1
2

let weakMap = new WeakMap([[1, 3]]); // Uncaught TypeError: Invalid value used as weak map key
let weakMap = new WeakMap([[{ name: "Jack" }, 3]]); // {{name: 'Jack'}: 3}

WeakMap 有四个实例方法：

1. WeakMap.prototype.delete(key)：移除 key 的关联对象。执行后 WeakMap.prototype.has(key)返回 false。
2. WeakMap.prototype.get(key)：返回 key 关联对象, 或者 undefined(没有 key 关联对象时)。
3. WeakMap.prototype.has(key)：根据是否有 key 关联对象返回一个 Boolean 值。
4. WeakMap.prototype.set(key, value)：在 WeakMap 中设置一组 key 关联对象，返回这个 WeakMap 对象。

1
2
3
4
5
6

let weakMap = new WeakMap();
let obj = { name: "Jack" };
weakMap.set(obj, 3); // {{name: 'Jack': 3}}
weakMap.get(obj); // 3
weakMap.has(obj); // true
weakMap.delete(obj); // true

参考：

Set 和 Map 数据结构