Set和Map数据结构

Set

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

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


var s = new Set();

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

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

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

Set函数接受一个数组作为参数，用来初始化。


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

items.size()
// 5

向Set加入值的时候，不会发生类型转换。这意味在Set中，5和“5”是两个不同的值。

set数据结构有以下方法。

size()：返回成员总数。
add(value)：添加某个值。
delete(value)：删除某个值。
has(value)：返回一个布尔值，表示该值是否为set的成员。
clear()：清除所有成员。

下面是这些属性和方法的使用演示。


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

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


// 对象的写法

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结构转为数组。


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

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


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

Map

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


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

data[element] = metadata;

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

为了解决这个问题，ES6提供了map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，对象也可以当作键。


var m = new Map();

o = {p: "Hello World"};

m.set(o, "content")

console.log(m.get(o))
// "content"

上面代码将对象o当作m的一个键。

Map函数也可以接受一个数组进行初始化。


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数据结构有以下属性和方法。

size：返回成员总数。
set(key, value)：设置一个键值对。
get(key)：读取一个键。
has(key)：返回一个布尔值，表示某个键是否在Map数据结构中。
delete(key)：删除某个键。
clear()：清除所有成员。
keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回所有成员的遍历器。

下面是一些用法实例。


var m = new Map(); 

m.set("edition", 6)        // 键是字符串
m.set(262, "standard")     // 键是数值
m.set(undefined, "nah")    // 键是undefined

var hello = function() {console.log("hello");}
m.set(hello, "Hello ES6!") // 键是函数

m.has("edition")     // true
m.has("years")       // false
m.has(262)           // true
m.has(undefined)     // true
m.has(hello)         // true

m.delete(undefined)
m.has(undefined)       // false

m.get(hello)  // Hello ES6!
m.get("edition")  // 6

运用Map结构原生提供的三个遍历器，可以遍历所有成员。


for (let key of map.keys()) {
    console.log("Key: %s", key);
}

for (let value of map.values()) {
    console.log("Value: %s", value);
}

for (let item of map.entries()) {
    console.log("Key: %s, Value: %s", item[0], item[1]);
}

// same as using map.entries()
for (let item of map) {
    console.log("Key: %s, Value: %s", item[0], item[1]);
}

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


map.forEach(function(value, key, map)) {
    console.log("Key: %s, Value: %s", key, value);
});

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


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);

上面代码中，forEach方法的回调函数的this，就指向reporter。

WeakMap

WeakMap结构与Map结构基本类似，唯一的区别是它只接受对象作为键名（null除外），不接受原始类型的值作为键名。

WeakMap的设计目的在于，键名是对象的弱引用（垃圾回收机制不将该引用考虑在内），所以其所对应的对象可能会被自动回收。当对象被回收后，WeakMap自动移除对应的键值对。典型应用是，一个对应DOM元素的WeakMap结构，当某个DOM元素被清除，其所对应的WeakMap记录就会自动被移除。基本上，WeakMap的专用场合就是，它的键所对应的对象，可能会在将来消失。

下面是WeakMap结构的一个例子，可以看到用法上与Map几乎一样。


var map = new WeakMap();
var element = document.querySelector(".element");

map.set(element, "Original");

var value = map.get(element);
console.log(value); // "Original"

element.parentNode.removeChild(element);
element = null;

value = map.get(element);
console.log(value); // undefined

WeakMap还有has和delete方法，但没有size方法，也无法遍历它的值，这与WeakMap的键被垃圾回收机制忽略有关。

5.9 KiB Raw Blame History Unescape Escape

Set和Map数据结构

Set

Map

WeakMap

5.9 KiB

Raw Blame History