Set和Map数据结构

前端开发
2018年10月24日
0

Set

基本用法

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

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

js
var s = new Set();

[2, 3, 5, 4, 2, 2].map(x => s.add(x))

for (let i of s) {
  console.log(i)
};
// 2 3 5 4

上面的代码通过add方法向Set结构加入成员，结果表明Set结构不会添加重复的值。

Set函数可以接受一个数组（或类似数组的对象）作为参数，用于初始化。

js
var set = new Set([1, 2, 3, 4, 4]);
[...set] // [1, 2, 3, 4]

var items = new Set([1, 2, 3, 4, 5, 5, 5]);
item.size // 5

function divs () {
  return [...ducument.querySelectorAll('div')]
}
var set = new Set(divs())
set.size // 56

// 类似于
divs().forEach(div => set.add(div))
set.size // 56

向Set加入值时不会发生类型转换，所以5和"5"是两个不同的值。Set内部判断两个值是否不同使用的算法类似于精确相等运算符（===）。这意味着，两个对象总是不相等的。唯一的例外是NaN等于自身（===认为NaN不等于自身）。

js
let set = new Set();

set.add({});
set.size // 1

set.add({});
set.size // 2

上面的代码表示，由于两个空对象不是精确相等，所以它们被视为两个值。

Set实例的属性和方法

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

  • Set.prototype.constrcutor：构造函数，默认就是Set函数。
  • Set.prototype.size：返回Set实例的成员总数。

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

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

上面的这些属性和方法的实例如下：

js
s.add(1).add(2).add(2) // 注意 2 被加入了两次

s.size // 2

s.has(1) // true
s.has(2) // true
s.has(3) // false

s.delete(2);
s.has(2) // false

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

js
// 对象的写法
var properties = {
  'width': 1,
  'height': 1
};

if (properties[someName]) {
  // do something
}

// Set的写法
var properties = new Set();

properties.add('width');
properties.add('height');

if (properties.has(someName)) {
  // do something
}

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

js
var items = new Set([1, 2, 3, 4, 5]);
var array = Array.from(items);

这就提供了一种去除数组的重复元素的方法。

js
function dedupe(array) {
  return Array.from(new Set(array));
}

dedupe([1, 2, 3, 3, 4, 2]) // [1, 2, 3, 4]

遍历操作

Set结构的实例有4个遍历方法，可用于遍历成员：

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

keys方法、values方法、entries方法返回的都是遍历器对象。由于Set结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。

js
let set = new Set(['red', 'blue', 'green']);

for (let item of set.keys()) {
  console.log(item);
}
// red
// blue
// green

for (let item of set.values()) {
  console.log(item);
}
// red
// blud
// green

for (let item of set.entries()) {
  console.log(item);
}
// ['red', 'red']
// ['blue', 'blue']
// ['green', 'green']

上面的代码中，entries方法返回的遍历器同时包括键名和键值，所以每次输出一个数组，其两个成员完全相等。

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

js
Set.prototype[Symbol.iterator] === Set.prototype.values // true

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

js
let set = new Set(['red', 'blue', 'green']);

for (let x of set) {
  console.log(x);
}
// red
// blue
// green

由于扩展运算符（...）内部使用for...of循环，所以也可以用于Set结构。

js
let set = new Set(['red', 'blue', 'green']);
let arr = [...set];
console.log(arr) // ['red', 'blue', 'green']

这就提供了另一种便捷的去除数组重复元素的方法。

js
let arr = [1, 2, 2, 3, 4, 5, 5, 5];
let unique = [...newSet(arr)];

console.log(unique) // [1, 2, 3, 4, 5]

而且，数组的map和filter方法也可以用于Set了。

js
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）。

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

// 并集
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}

Set结构的实例的forEach方法用于对每个成员执行某种操作，没有返回值 。

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

// 2
// 4
// 6

上面的代码说明，forEach方法的参数就是一个处理函数。该处理函数的参数依次为键值、键名、集合本身（上例省略了此参数）。另外，forEach方法还可以有第二个参数，表示绑定的this对象。

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

js
// 方法一
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

WeakSet

WeakSet结构与Set类似，也是不重复的值的集合。但是，它与Set结构有两个区别。

首先，WeakSet的成员只能是对象，而不能是其他值。

其次，WeakSet中的对象都是弱引用，即垃圾回收机制不考虑WeakSet对该对象的引用。也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制就会自动回收该对象所占的内存，不会考虑该对象还存在于WeakSet中。这个特意意味无法引用WeakSet的成员，因此WeakSet是不可遍历的。

js
var ws = new WeakSet();

ws.add(1) // TypeError: Invalid value used in weak set
ws.add(Symbol()) // TypeError: Invalid value used in weak set

上面的代码试图向WeakSet添加一个数值和Symbol值，结果报错。

WeakSet是一个构造函数，可以使用new命令创建WeakSet数据结构。

js
var ws = new WeakSet();

作为构造函数，WeakSet可以接受一个数组或者类似数组的对象作为参数（实际上，任何具有iterable接口的对象都可以作为WeakSet的参数）。该数组的所有成员都会自动成为WeakSet实例对象的成员。

js
var a = [[1, 2], [3, 4]];
var ws = new WeakSet(a);

上面的代码中，a是一个数组，它有两个成员，也都是数组。将a作为WeakSet构造函数的参数，a的成员会自动成为WeakSet的成员。

WeakSet结构有以下3个方法：

  • WeakSet.prototype.add(value)：添加一个新成员。
  • WeakSet.prototype.delete(value)：清除指定成员。
  • WeakSet.prototype.has(value)：返回一个布尔值，表示某个值是否在WeakSet实例中。
js
var ws = new WeakSet();
var obj = {};
var foo = {};

ws.add(window);
ws.add(obj);

ws.has(window) // true
ws.has(foo) // false

ws.delete(window);
ws.has(window) // false

WeakSet没有size属性，没有办法遍历其成员。

js
ws.size // undefined
ws.forEach // undefined

ws.forEach(function (item) {
  console.log(`WeakSet has ${item}`);
});
// TypeError: undefined is not a function

上面的代码试图获取size和forEach属性，结果都不成功。

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

下面是WeakSet的另一个例子：

js
const foos = new WeakSet();

class Foo {
  constructor () {
    foos.add(this)
  }

  method () {
    if (!foos.has(this)) {
      throw new TypeError('Foo.prototype.method 只能在Foo实例上调用！');
    }
  }
}

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

Map

Map结构的目的和基本用法

JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键。这给它的使用带来了很大的限制。

js
var data = {};
var element = document.getElementById('myDiv');

data[element] = metadata;
data['Object HTMLDivElement'] // metadata

上面的代码原意是将一个DOM节点作为对象data的键，但是由于对象只接受字符串作为键名，所以element被自动转为字符串[Object HTMLDivElement]。

为了解决这个问题，ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object结构提供了“字符串——值”的对应，Map结构提供了“值——值”的对应，是一种更完美的Hash结构实现。如果你需要“键值对”的数据结构，Map比Object更合适。

js
var m = new Map();
var o = {p: 'Hello world!'};

m.set(o, 'content');
m.get(o) // 'content'

m.has(o) // true

m.delete(o);
m.has(o) // false

上面的代码使用set方法将对象o当作m的一个键，然后又使用get方法读取这个键，最后使用delete方法删除了这个键。

作为构造函数，Map也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

js
var map = new Map(['name', '张三'], ['title', 'Author']);

map.size // 2
map.has('name') // true
map.get('name') // '张三'
map.has('title') // true
map.get('title') // 'Author'

Map构造函数接受数组作为参数，实际上执行的是下面的算法：

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

var map = new Map();

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

如果对同一个键多次赋值，后面的值会覆盖前面的值。

js
let map = new Map();

map.set(1, 'aaa').set(1, 'bbb');

map.get(1) // 'bbb'

如果读取一个未知的键，则返回undefined。

注意，只有对同一个对象的引用，Map结构才将其视为同一个键。这一点要非常小心。

js
var map = new Map();

map.set(['a'], 555);
map.get(['a']) // undefined

上面的set方法和get方法，表面上是针对同一个键，实际上这是两个值，内存地址是不一样的。因为get方法无法读取该键。

同理，同样的两个实例，在Map结构中被视为两个键。

js
var map = new Map();

var k1 = ['a'];
var k2 = ['a'];

map.set(k1, 111).set(k2, 222);

map.get(k1) // 111
map.get(k2) // 222

上面的代码中，变量k1和变量k2的值是一样的，但它们在Map结构中被视为两个键。

由上可知，Map的键实际上跟内存地址是绑定的，只要内存地址不一样，就视为两个键。这就解决了同名属性碰撞（clash）的问题，我们扩展别人的库时，如果使用对象作为键名，不同担心自己的属性与原作者的属性同名。

如果Map的键是一个简单类型的值（数字、字符串、布尔值），则只要两个值严格相等，Map就将其视为一个键，包括0和-0，虽然NaN不严格等于自身，但Map将其视为同一个键。

js
let map = new Map();

map.set(NaN, 123);
map.get(NaN) // 123

map.set(-0, 123);
map.get(+0) // 123

实例的属性和操作方法

size属性

size属性返回Map结构的成员总数。

set(kev, value)

set方法设置key所对应的键值，然后返回整个Map结构。如果key已经有值，则键值会被更新，否则就新生成该键。set方法返回的是Map本身，因此可以采用链式写法。

get(key)

get方法读取key对应的键值，如果找不到key，则返回undefined。

has(key)

has方法返回一个布尔值，表示某个键是否在Map数据结构中。

delete(key)

delte方法删除某个键，返回布尔值。

clear()

clear方法清除所有成员，没有返回值。

遍历方法

Map原生提供3个遍历器生成函数和1个遍历方法。

  • keys()
  • values()
  • entries()
  • forEach()
js
let map = new Map([
  ['F', 'no'],
  ['T', 'yes']
]);

for (let key of map.keys()) {
  console.log(key)
}
// 'F'
// 'T'

for (let value of map.values()) {
  console.log(value)
}
// 'no'
// 'yes'

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// 'F' 'no'
// 'T' 'yes'

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value)
}
// 等同于
for (let [key, value] of map) {
  console.log(key, value)
}

以上最后的那个例子，表示Map结构的默认遍历器接口（Symbol.iterator属性）就是entries方法。

js
map[Symbol.interator] === map.entries() // true

Map结构转为数组结构比较快速的方法是结合使用扩展运算符（...）。

js
let 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方法、filter方法，可以实现Map的遍历和过滤（Map本身没有map和filter方法）。

此外，Map还有一个forEach方法与数组的forEach方法类似，也可以实现遍历

js
map.forEach(function (value, key, map) {
  console.log(`Key: ${key}, Value: ${value}`);
});

forEach方法还可以接受第二个参数，用于绑定this.

js
var reporter = {
  report : function (key, value) {
    console.log("Key: %s, Value: %s", key, value);
  }
};

map.forEach(function (value, key, map) {
  this.report(key, value);
}, reporter);

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

Map转为数组

前面已经提过，Map转为数组最方便的方法就是使用扩展运算符（…）。

数组转为Map

将数组传入Map构造函数就可以转为Map。

Map转为对象

如果Map的所有键都是字符串，则其可以转为对象。

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

对象转为Map

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

Map转为JSON

Map转为JSON要区分两种情况。

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

js
function strMapToJson (strMap) {
  return JSON.stringify(strMapToObj(strMap)) // 上面的strMapToObj函数
}

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

js
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"]]'

JSON转为map

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

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

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

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

WeakMap

WeakMap结构与Map结构基本类似，唯一的区别是它只接受对象作为键名（null）除外，不接受其他类型的值作为键名，而且键名所指向的对象不计入垃圾回收机制。

js
var map = new WeakMap();
map.set(1, 2) // TypeError: 1 is not an object!
map.set(Symbol(), 2) // TypeError: Invalid value used as weak map key

WeakMap的设计目的在于，键名是对象的弱引用，所以其所对应的对象可能会被自动回收。当对象被回收后，WeakMap自动移除对应的键值对。典型应用是一个对应DOM元素的WeakMap结构，当某个DOM元素被清除，其所对应的WeakMap记录就会自动被移除。基本上，WeakMap的专用场合就是，它的键所对应的对象可能会在将来消失。WeakMap结构有助于防止内存泄漏。

js
var wm = new WeakMap();
var element = document.querySelect('.element');

wm.set(element, 'Original');
wm.get(element) // 'Original'

element.parentNode.removeChild(element);
element = null;
wm.get(element) // undefined

WeakMap与Map在API上的区别主要是两个：一是没有遍历操作（即没有keys()、values()、entries()），也没有size属性；二是无法清空，即不支持clear()。这与WeakMap的键不被计入引用、被垃圾回收机制忽略有关。

因此，WeakMap只有4个方法可用：get()、set()、has()和delete()。

前文说过：WeakMap应用的典型场合就是DOM节点作为键名。下面是一个例子：

js
let myElement = document.getElementById('logo');
let myWeakMap = new WeakMap();

myWeakMap.set(myElement, {timesClicked: 0});

myElement.addEventListener('click', function () {
  let logoData = myWeakMap.get(myElement);
  logoData.timesClicked++;
  myWeakMap.set(myElement, logoData);
}, false);

上面的代码中，myElement是一个DOM节点，每当发生click事件，就更新一下状态。我们将这个状态作为键值放在WeakMap里，对应的键名就是myElement。一旦这个DOM节点删除，该状态就会自动消失，不存在内存泄漏风险。

WeakMap的另一个用处是部署私有属性。

js
let _counter = new WeakMap();
let _action = new WeakMap();

class CountDown {
  constructor (counter, action) {
    _counter.set(this, counter);
    _action.set(this, action);
  }

  dec () {
    let counter = _counter.get(this);
    if (counter < 1) return;
    counter--;
    _counter.set(this, counter);
    if (counter === 0) {
      _counter.get(this)();
    }
  }
}

let c = new CountDown(2, () => console.log('DONE'));

c.dec()
c.dec() // 'DONE'

上面的代码中，CountDown类的两个内部属性——_counter和action，是实例的弱引用，所以如果删除实例，它们也随之消失，不会造成内存泄漏。

以上，摘抄自阮一峰老师的《ES6标准入门》

JavaScriptES6
二进制数组（下）
Iterator和for...of循环