1、Set

基本用法

  • ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。
    Set 本身是一个构造函数,用来生成 Set 数据结构。
    const s = new Set();

    const set = new Set([1, 2, 3, 4, 4]); [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

    for (let i of s) {
    console.log(i);
    }
    // 2 3 5 4
    [...new Set('ababbc')].join('')
    // \"abc\"

Set 实例的属性和方法

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

  • Set.prototype.constructor :构造函数,默认就是 Set 函数。
  • Set.prototype.size :返回 Set 实例的成员总数。
    Set 实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。下面先介绍四个操作方法。
  • add(value) :添加某个值,返回 Set 结构本身。
  • delete(value) :删除某个值,返回一个布尔值,表示删除是否成功。
  • has(value) :返回一个布尔值,表示该值是否为 Set 的成员。
  • clear() :清除所有成员,没有返回值。

    遍历操作
    Set 结构的实例有四个遍历方法,可以用于遍历成员。

  • keys() :返回键名的遍历器
  • values() :返回键值的遍历器
  • entries() :返回键值对的遍历器
  • forEach() :使用回调函数遍历每个成员
    需要特别指出的是, Set 的遍历顺序就是插入顺序

扩展运算符( … )内部使用 for…of 循环,所以也可以用于 Set 结构。

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

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

set = new Set([...a].map(x => x * 2));
// 返回Set结构:{2, 4, 6} // 并集
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}

2、WeakSet

含义

WeakSet 结构与 Set 类似,也是不重复的值的集合。但是,它与 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.prototype.add(value):向 WeakSet 实例添加一个新成员。
  • WeakSet.prototype.delete(value):清除 WeakSet 实例的指定成员。
  • WeakSet.prototype.has(value):返回一个布尔值,表示某个值是否在 WeakSet 实例之中。
    WeakSet 没有 size 属性,没有办法遍历它的成员。

WeakSet 不能遍历,是因为成员都是弱引用,随时可能消失,遍历机制无法保证成员的存在,很可能刚刚遍历结束,成员就取不到了。WeakSet 的一个用处,是储存 DOM 节点,而不用担心这些节点从文档移除时,会引发内存泄漏。

3、Map

含义和基本用法

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

不仅仅是数组,任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构都可以当作 Map 构造函数的参数。这就是说, Set 和 Map 都可以用来生成新的 Map。

const items = [
['name', '张三'],
['title', 'Author']
];

const map = new Map();

items.forEach(
([key, value]) => map.set(key, value)
);

const set = new Set([
['foo', 1],
['bar', 2]
]);
const m1 = new Map(set);
m1.get('foo') // 1

const m2 = new Map([['baz', 3]]);
const m3 = new Map(m2);
m3.get('baz') // 3

实例的属性和操作方法

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

  • (1)size 属性
    size 属性返回 Map 结构的成员总数。
  • (2)set(key, value)
    set 方法设置键名 key 对应的键值为 value ,然后返回整个 Map 结构。如果 key 已经有值,则键值会被更新,否则就新生成该键。
  • (3)get(key)
    get 方法读取 key 对应的键值,如果找不到 key ,返回 undefined 。
  • (4)has(key)
    has 方法返回一个布尔值,表示某个键是否在当前 Map 对象之中。
  • (5)delete(key)
    delete 方法删除某个键,返回 true 。如果删除失败,返回 false 。
  • (6)clear()
    clear 方法清除所有成员,没有返回值。

    遍历方法

    Map 结构原生提供三个遍历器生成函数和一个遍历方法。
  • keys() :返回键名的遍历器。
  • values() :返回键值的遍历器。
  • entries() :返回所有成员的遍历器。
  • forEach() :遍历 Map 的所有成员。
    需要特别注意的是,Map 的遍历顺序就是插入顺序。

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

(1)Map 转为数组
前面已经提过,Map 转为数组最方便的方法,就是使用扩展运算符( … )。

(2)数组 转为 Map
将数组传入 Map 构造函数,就可以转为 Map。

new Map([
[true, 7],
[{foo: 3}, ['abc']]
])

(3)Map 转为对象
如果所有 Map 的键都是字符串,它可以无损地转为对象。
(4)对象转为 Map

(5)Map 转为 JSON
Map 转为 JSON 要区分两种情况。一种情况是,Map 的键名都是字符串,这时可以选择转为对象 JSON。
(6)JSON 转为 Map
JSON 转为 Map,正常情况下,所有键名都是字符串。

4、WeakMap

含义

WeakMap 结构与 Map 结构类似,也是用于生成键值对的集合。
WeakMap 与 Map 的区别有两点。

  • WeakMap 只接受对象作为键名( null 除外),不接受其他类型的值作为键名。
  • WeakMap 的键名所指向的对象,不计入垃圾回收机制。
const e1 = document.getElementById('foo');
const e2 = document.getElementById('bar');
const arr = [
[e1, 'foo 元素'],
[e2, 'bar 元素'],
];

WeakMap 就是为了解决这个问题而诞生的,它的键名所引用的对象都是弱引用,即垃圾回收机制不将该引用考虑在内。因此,只要所引用的对象的其他引用都被清除,垃圾回收机制就会释放该对象所占用的内存。也就是说,一旦不再需要,WeakMap 里面的键名对象和所对应的键值对会自动消失,不用手动删除引用。

WeakMap 与 Map 在 API 上的区别主要是两个,

  • 一是没有遍历操作(即没有 keys() 、 values() 和 entries() 方法),也没有 size 属性。因为没有办法列出所有键名,某个键名是否存在完全不可预测,跟垃圾回收机制是否运行相关。这一刻可以取到键名,下一刻垃圾回收机制突然运行了,这个键名就没了,为了防止出现不确定性,就统一规定不能取到键名。
  • 二是无法清空,即不支持 clear 方法。因此, WeakMap 只有四个方法可用: get() 、 set() 、 has() 、 delete() 。