csjiabin's blog
csjiabin
2018-11-18
目录

ES6的Set和Map,以及WeakSet和WeakMap

# 一、Set

# 概念

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

const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach((x) => s.add(x));
for (let i of s) {
  console.log(i); // 2，3，5，4
}
1
2
3
4
5

上面代码，通过 add 方法向 Set 结构假如成员，输出为：2，3，5，4 Set 函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化

// 例一
const set = new Set([1, 2, 3, 4, 4]);
console.log([...set]);
// [1, 2, 3, 4]

// 例二
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
console.log(items.size); // 5

// 例三
function divs() {
  return [...document.querySelectorAll("div")];
}

const set = new Set(divs());
console.log(set.size); // 127

// 类似于
divs().forEach((div) => set.add(div));
console.log(set.size); // 127
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

上面代码，例一和二都是数组作为参数，例三是接受类似数组的对象作为参数。 去除数组重复成员的方法:

[...new Set(array)];
1

向 set 里加入值的时候，不会发生类型转化，所以 5 和“5”是两个不同的值，Set 内部判断两个值是否不同，使用的算法叫做“Same-value equality” 类似于精确相等运算符(===)，而区别是，NaN 等于自身，而精确相等运算符认为 NaN 不等于自身。此外两个对象总是不相等。

# Set 实例的属性和方法

Set 结构的实例有以下属性:

Set.prototype.constructor; // 构造函数，默认就是 Set 函数。
Set.prototype.size; // 返回 Set 实例的成员总数。
1
2

Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。

add(value)：添加某个值，返回 Set 结构本身。 delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。 has(value)：返回一个布尔值，表示该值是否为 Set 的成员。 clear()：清除所有成员，没有返回值。

下面是一个对比，判断是否包括在一个键上面，Object 结构和 Set 结构的写法不同。

// 对象的写法s
const obj = {
  width: 1,
  height: 1,
};

if (obj[someName]) {
  //....
}

// Set的写法
const obj = new Set();
obj.add("width");
obj.add("height");
if (obj.has(someName)) {
  //....
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Array.from 方法可以将 Set 结构转为数组

const items = new Set（[1,2,3,4,5]）;
const array = Array.from(items);
1
2

这也就提供了去除数组重复成员的另一种方法。

function dedupe(array) {
  return Array.from(new Set(array));
}
dedupe([1, 1, 2, 3]); //[1,2,3]
1
2
3
4

# 遍历操作

Set 结构的实例有四个遍历方法，可以用于遍历成员。 Set 的遍历顺序就是插入顺序

.keys()：返回键名的遍历器 .values()：返回键值的遍历器 .entries()：返回键值对的遍历器 .forEach()：使用回调函数遍历每个成员

遍历

let set = new Set(["red", "green", "blue"]);
for (let x of set) {
  console.log(x);
}
//red //green //blue
1
2
3
4
5

forEach()方法，用于对每个成员执行某种操作，没有返回值

let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2)); // 2 // 4 // 6
1
2

遍历的应用 扩展运算符(...)内部使用 for...of循环，所以也可以用于Set结构

let set = new Set(["red", "green", "blue"]);
let arr = [...set]; // ['red', 'green', 'blue']
1
2

扩展运算符和 Set 结构相结合，就可以去除数组的重复成员。

let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)]; // [3, 5, 2]
1
2

而且数组的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}
1
2
3
4
5

综上 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}

// 差集
let difference = new Set([...a].filter((x) => !b.has(x))); // Set {1}
1
2
3
4
5
6
7
8
9
10
11

如果像在遍历操作中，同步改变原来的 Set 结构，目前没有直接的方法，但是有两种变通方法。一种是利用原 Set 结构映射出一个新的结构，然后赋值给原来的 Set 结构；另一种是利用 Array.from 方法。

// 方法一
let set = new Set([1, 2, 3]);
set = new Set([...set].map((val) => val * 2)); // set的值是2, 4, 6

// 方法二
let set = new Set([1, 2, 3]);
set = new Set(Array.from(set, (val) => val * 2)); // set的值是2, 4, 6
1
2
3
4
5
6
7

# 二、WeakSet

# 概念

WeakSet 结构与 Set 类似，也是不重复的值的集合，但是，它与 Set 有两个区别。首先，WeakSet 的成员只能是对象，而不能是其他类型的值，其次，WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用 ** 垃圾回收机制依赖引用技术 ** WeakSet 是一个构造函数，可以使用 new 命令，创建 WeakSet 数据结构: const set = new WeakSet()

const a = [
  [1, 2],
  [3, 4],
];
const ws = new WeakSet(a); // 正确

const b = [3, 4];
const ws = new WeakSet(b); // 错误
1
2
3
4
5
6
7
8

WeakSet 结构有以下三个方法:

WeakSet.prototype.add(value); // 向 WeakSet 实例添加一个新成员。

WeakSet.prototype.delete(value); // 清除 WeakSet 实例的指定成员。

WeakSet.prototype.has(value); // 返回一个布尔值，表示某个值是否在
1
2
3
4
5

WeakSet 没有 size 属性，没有办法遍历它的成员。因此 forEach 的方法也用不了。

WeakSet 的一个用处，是储存 DOM 节点，而不用担心这些节点从文档移除时，会引发内存泄漏。

WeakSet 例子:

const foos = new WeakSet();
class Foo {
  constructor() {
    foos.add(this);
  }
  method() {
    if (!foos.has(this)) {
      throw new TypeError("Foo.prototype.method 只能在Foo的实例上调用");
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11

上面代码保证了 Foo 的实例方法，只能在 Foo 的实例上调用。这里使用 WeakSet 的好处是，foos 对实例的引用，不会被记入内存回收机制，所以删除实例的时候，不用考虑 foos，也不会出现内存泄露。

# 三、Map

# 概念

Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

# 方法

map 在增加成员的时候，用 set 例如：

const m = new Map();
m.set(0, "content");
m.get(0);
m.delete(0);
m.has(0);
1
2
3
4
5

map 同样接受一个数组作为参数,该数组的成员是一个个表示键值对的数组。 事实上，不仅仅是数组，任何具有 Iterator 接口的数据结构都可以当做 Map 构造函数的参数，这就是说，Set 和 Map 都可以用来生成新的 Map。

const set = new Set([
  ["foo", 1],
  ["bar", 2],
]);
const m1 = new Map(set);
m1.get("foo"); // 1
1
2
3
4
5
6

上面代码中，我们分别使用 Set 对象和 Map 对象，当作 Map 构造函数的参数，结果都生成了新的 Map 对象

# 实例的属性和操作方法

Map 结构的实例有一下属性和操作方法

size set(key,value) get(key), has(key) delete(key) clear()

遍历方法(Map 的遍历顺序就是插入的顺序) Map 结构提供三个遍历起生成函数和一个遍历方法。

keys()：返回键名的遍历器。 values()：返回键值的遍历器。 entries()：返回所有成员的遍历器。 forEach()：遍历 Map 的所有成员。

for (let key of map.keys()) {
  console.log(key);
}

for (let [key, value] of map) {
  console.log(key, value);
}

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
1
2
3
4
5
6
7
8
9
10
11

# Map 结构转为数组结构，比较快速的方法是使用扩展运算符(...)

const map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]);

[...map.keys()]
[...map.values()]
[...map.entries()]
[...map]
1
2
3
4
5
6

结合数组的 map 方法、filter 方法，可以实现 Map 的遍历和过滤(Map 本身没有 map 和 filter 方法)

const map0 = new Map().set(1, "a").set(2, "b").set(3, "c");
const map1 = new Map([...map0].filter(([k, v]) => k < 3));
// 产生 Map 结构 {1 => 'a', 2 => 'b'}
const map2 = new Map([...map0].map(([k, v]) => [k * 2, "_" + v])); // 产生 Map 结构 {2 => '_a', 4 => '_b', 6 => '_c'}
1
2
3
4

# 与其他数据结构的互相转换

# Map 转为数组

使用扩展运算符，|| Array.form
1

# 数组 转为 Map

// 将数组传入Map构造函数，就可以转为Map
new Map([
  [true, 7],
  [{ foo: 3 }, ["abc"]],
]);
1
2
3
4
5

# Map 转为对象

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);
1
2
3
4
5
6
7
8
9

# 对象转为 Map

function objToStrMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}

objToStrMap({ yes: true, no: false });
1
2
3
4
5
6
7
8
9

# Map 转为 JSON

Map 转为 JSON 要区分两种情况。一种情况是，Map 的键名都是字符串，这时可以选择转为对象 JSON。

function strMapToJson(strMap) {
  return JSON.stringify(strMapToObj(strMap));
}

let myMap = new Map().set("yes", true).set("no", false);
strMapToJson(myMap);
// '{"yes":true,"no":false}'
1
2
3
4
5
6
7

另一种情况是，Map 的键名有非字符串，这时可以选择转为数组 JSON。

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"]]]'
1
2
3
4
5
6
7

# JSON 转为 Map

JSON 转为 Map，正常情况下，所有键名都是字符串。

function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}

jsonToStrMap('{"yes": true, "no": false}');
// Map {'yes' => true, 'no' => false}
1
2
3
4
5
6

但是，有一种特殊情况，整个 JSON 就是一个数组，且每个数组成员本身，又是一个有两个成员的数组。这时，它可以一一对应地转为 Map。这往往是数组转为 JSON 的逆操作。

function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}

jsonToMap('[[true,7],[{"foo":3},["abc"]]]');
// Map(2) {true => 7, {…} => Array(1)}
1
2
3
4
5
6

# 四、WeakMap

# 概念

WeakMap 结构与 Map 结构类似，也是用于生成键值对的。

# 区别

首先，WeakMap 只接受对象作为键名（null 除外），不接受其他类型的值作为键名 其次，WeakMap 的键名所指向的对象，不计入垃圾回收机制

# WeakMap 语法

WeakMap 与 Map 在 API 上的区别主要是两个，一是没有遍历操作（即没有 key()、values()和 entries()方法），也没有 size 属性。因为没有办法列出所有键名，这个键名是否存在完全不可预测，跟垃圾回收机制是否运行相关。二是无法清空，即不支持 clear 方法。因此，WeakMap 只有四个方法可用：get()、set()、has()、delete()。

编辑 (opens new window)
#es6#js
上次更新: 2022/09/30, 11:34:22
用图标和示例解释Await和Async
JS中的内存管理

← JS中的内存管理→

最近更新
01
咖啡知识
10-13
02
documentation
09-29
03
benchmarking
09-29
更多文章>
Theme by Vdoing | Copyright © 2018-2022 csjiabin | MIT License