【读书笔记】【深入理解ES6】#7-Set集合和Map集合

2021-08-18 23:28:46

ES6新标准中将Set集合和Map集合添加到JS中。

ES5中Set集合和Map集合

在ES5中，开发者们用对象属性来模拟这两种集合。

var set = Object.create(null);

set.foo = true;

// 检查属性是否存在

if (set.foo) {

    // ...

}

模拟Map集合同上例类似。

如果只是简单的应用上面的方法基本上能满足需求，但是如果碰到对象属性名的限制，就会产生一些问题。

var map = Object.create(null);

map[5] = "foo";

console.log(map["5"]); // "foo"

console.log(map); // {5: "foo"}

虽然map中存储的属性键名是数值型的5，但 map["5"] 引用的是同一个属性。

用对象作为键名也有类似的问题。

var map = Object.create(null),

    key1 = {},

    key2 = {};

map[key1] = "foo";

console.log(map[key2]); // "foo"

console.log(map); // {[object Object]: "foo"}

上例中 map[key1] 和 map[key2] 也引用了同一个值。因为 key1 和 key2 会被转换为对象的默认字符串 "[object Object]"。

ES6中的Set集合

ES6中新增的Set集合是一种有序列表，其中还有一些相互独立的非重复值，通过Set集合可以快速访问其中的数据，更有效地追踪各种离散值。

创建Set集合并添加元素

let set = new Set();

set.add(5);

set.add("5");

console.log(set.size); // 2

console.log(set); // Set(2) {5, "5"}

向Set集合中添加对象

let set = new Set(),

    key1 = {},

    key2 = {};

set.add(key1);

set.add(key2);

console.log(set.size); // 2

console.log(set); // Set(2) {{…}, {…}}

如果多次传入相同的值，后面的调用实际上会被忽略。

let set = new Set();

set.add(5);

set.add("5");

set.add(5); // 重复 - 本次调用直接被忽略

console.log(set.size); // 2

console.log(set); // Set(2) {5, "5"}

使用数组来初始化Set集合，并且同时可以出去重复的元素。

let set = new Set([1, 2, 3, 4, 5, 5, 5, 5]);

console.log(set.size); // 5

console.log(set); // Set(5) {1, 2, 3, 4, 5}

Note

实际上，Set构造函数可以接受所有可迭代对象作为参数，数组、Set集合、Map集合都是可迭代的，因而都可以作为Set构造函数的参数使用；构造函数通过迭代器从参数中提取值。

通过 has() 方法可以检测Set集合中是否存在某个值

let set = new Set();

set.add(5);

set.add("5");

console.log(set.has(5)); // true

console.log(set.has(6)); // false

移除元素

delete() 方法可以移除Set集合中的某一个元素；

clear() 方法可以移除集合中所有元素。

let set = new Set();

set.add(5);

set.add("5");

console.log(set.has(5)); // true

console.log(set.size); // 2

set.delete(5);

console.log(set.has(5)); // false

console.log(set.size); // 1

set.clear();

console.log(set.has("5")); // false

console.log(set.size); // 0

Set集合的forEach()方法

forEach() 方法的回调函数接受以下3个参数：

Set集合中下一次索引的位置
与第一个参数一样的值
被遍历的Set集合本身

需要注意的是这里的第一和第二个参数是一样的。这是为了和数组和Map集合的forEach()方法统一。

let set = new Set([1, 2]);

set.forEach(function(value, key, ownerSet) {

    console.log(key + " " + value);

    console.log(ownerSet === set);

});

// 输出结果：

// 1 1

// 5 true

// 4 2 2

// 5 true

如果需要在回调函数中使用this引用，则要将this作为第二个参数传入forEach()函数。

let set = new Set([1, 2]);

let processor = {

    output(value) {

        console.log(value);

    },

    process(dataSet) {

        dataSet.forEach(function(value) {

            this.output(value);

        }, this);

    }

};

processor.process(set);

这里可以使用箭头函数，这样就可以不用再将this传入forEach()方法了。

let set = new Set([1, 2]);

let processor = {

    output(value) {

        console.log(value);

    },

    process(dataSet) {

        dataSet.forEach(value => this.output(value));

    }

};

processor.process(set);

将Set集合转换为数组

let set = new Set([1, 2, 3, 3, 3, 4, 5]),

    array = [...set];

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

使用Set集合实现数组的去重

function eliminateDuplicates(items) {

    return [...new Set(items)];

}

let numbers = [1, 2, 3, 3, 3, 4, 5],

    noDuplicates = eliminateDuplicates(numbers);

console.log(noDuplicates);

Weak Set 集合

弱引用的Set集合。用法同Set集合基本一样。

let set = new WeakSet(),

    key = {};

// 向集合中添加对象

set.add(key);

console.log(set.has(key)); // true

set.delete(key);

console.log(set.has(key)); // false

两种Set类型的主要区别

Weak Set保存的是对象值得弱引用。

当Weak Set中的某个对象的所有强引用都被移除的时候，该对象也会自动从Weak Set中移除。

let set = new WeakSet(),

    key = {};

// 向集合中添加对象

set.add(key);

console.log(set.has(key)); // true

// 移除对象key的最后一个强引用（Weak Set中的引用也会自动移除）

key = null;

Weak Set 集合和普通 Set 集合的差别

在WeakSet的实例中，如果向 add()、has()和delete()这3个方法传入非对象参数都会导致程序报错；
Weak Set 集合不可迭代，所以不能被用于 for-of 循环；
Weak Set 集合不暴露任何迭代器（例如 keys() 和 values() 方法），所以无法通过程序本身来检测其中的内容；
Weak Set 集合不支持 forEach() 方法；
Weak Set 集合不支持 size 属性。

Weak Set 集合的功能看似受限，其实这是为了让它能够正确的处理内存中数据。

总之，如果你只需要跟踪对象引用，你更应该使用 Weak Set 集合而不是 Set 集合。

ES6中的 Map 集合

ES6中的 Map 类型是一种储存着许多键值对的有序列表，其中键名和对应的值支持所有的数据类型。

键名的等价判断是通过 Object.is() 方法实现的。

let map = new Map();

map.set("site", "liujiajia.me");

map.set("year", 2017);

console.log(map.get("site")); // "liujiajia.me"

console.log(map.get("year")); // 2017

使用对象作为键名

let map = new Map,

    key1 = {},

    key2 = {};

map.set(key1, 9);

map.set(key2, 32);

console.log(map.get(key1)); // 9

console.log(map.get(key2)); // 32

Map集合支持的方法

Map集合和Set集合有如下3个通用方法：

has(key)

检测指定的键名在Map集合中是否存在
delete(key)

从Map集合中移除指定键名及其对应的值
clear()

移除Map集合中所有的键值对

let map = new Map();

map.set("name", "JiaJia");

map.set("age", 32);

console.log(map.has("name")); // true

console.log(map.get("name")); // "JiaJia"

console.log(map.has("age")); // true

console.log(map.get("age")); // 32

console.log(map.size); // 2

map.delete("name");

console.log(map.has("name")); // false

console.log(map.get("name")); // undefined

console.log(map.size); // 1

map.clear();

console.log(map.has("name")); // false

console.log(map.get("name")); // undefined

console.log(map.has("age")); // false

console.log(map.get("age")); // undefined

console.log(map.size); // 0

Map集合的初始化方法

可以传入一个数组来初始化Map集合。

数组中的每一个元素都是一个子数组，子数组中包含一个键值对的键名和值两个元素。

let map = new Map([["name", "JiaJia"], ["age", 32]]);

console.log(map.has("name")); // true

console.log(map.get("name")); // "JiaJia"

console.log(map.has("age")); // true

console.log(map.get("age")); // 32

console.log(map.size); // 2

Map集合的forEach()方法

和数组的forEach()方法类似，回调函数都接受3个参数：

Map集合中下一次索引的位置
值对应的键名
Map集合本身

let map = new Map([["name", "JiaJia"], ["age", 32]]);

map.forEach(function(value, key, ownerMap) {

    console.log(key + " " + value);

    console.log(ownerMap === map);

});

// 执行结果：

// name JiaJia

// true

// age 32

// true

同Set集合一样，可以指定forEach()方法的第二个参数作为回调函数的this值。

Weak Map 集合

Weak Map 是弱引用的 Map 集合，也用于存储对象的弱引用。

Weak Map 集合中的键名必须是对象；
只有键名保存的是弱引用，键名对应的值如果是个对象，则保存的是该对象的强引用。

Weak Map 最大的用途是保存Web页面中的DOM元素。

let map = new WeakMap(),

    element = document.querySelector(".element");

map.set(element, "Original");

let value = map.get(element);

console.log(value); // "Original"

// 移除element元素

element.parentNode.removeChild(element);

element = null;

// 此时 Weak Map 集合为空

私有对象数据

Weak Map 还可以用于存储对象实例的私有数据。

在ES6中所有属性都是公开的。如果想存储一些只对对象开放的数据，则需要一些创造力。

下例使用约定作为私有属性：

function Person(name) {

    this._name = name;

}

Person.prototype.getName = function() {

    return this._name;

};

看似是只允许通过 getName() 方法获取name属性，但其实仍然可以通过给实例的 _name 属性赋值来更改该属性值。

let user = new Person("JiaJia")

console.log(user.getName()); // "JiaJia"

user._name = "Dlph";

console.log(user.getName()); // "Dlph"

在ES5中，可以通过下面这种模式创建一个对象接近真正的私有数据。

var Person = (function() {

    var privateData = {},

        privateId = 0;

    function Person(name) {

        Object.defineProperty(this, "_id", { value: privateId++ });

        privateData[this._id] = {

            name: name

        };

    }

    Person.prototype.getName = function() {

        return privateData[this._id].name;

    }

    return Person;

}());

let user1 = new Person("JiaJia");

console.log(user1); // Person {_id: 0}

console.log(user1.getName()); // "JiaJia"

var user2 = new Person("Dlph");

console.log(user2); // Person {_id: 1}

console.log(user2.getName()); // "Dlph"

上例中的 privateData 和 privateId 变量被隐藏了起来，在外面无法查看及更改。

该方法最大的问题是，如果不主动管理，由于无法获知对象实例何时被销毁，因此 privateData 中的数据就永远不会消失。而使用 Weak Map 集合就可以解决该问题。

let Person = (function() {

    let privateData = new WeakMap();

    function Person(name) {

        privateData.set(this, { name });

    }

    Person.prototype.getName = function() {

        return privateData.get(this).name;

    }

    return Person;

}());

let user1 = new Person("JiaJia");

console.log(user1); // Person {}

console.log(user1.getName()); // "JiaJia"

let user2 = new Person("Dlph");

console.log(user2); // Person {}

console.log(user2.getName()); // "Dlph"

user1 = null;

user2 = null;

使用 Weak Map 来存储私有数据，只要对象实例被销毁，相关信息也会被销毁，从而保证了信息的私有性。

Weak Map 集合的使用方式及使用限制

当要在 Weak Map 和普通 Map 集合之间进行选择时，如果只用对象作为集合的键名，那么 Weak Map 是最好的选择。

相对于 Map 集合而言， Weak Map 集合对用户的可见度更低，其不支持通过 forEach()方法、size属性及clear()方法来管理集合中的元素。

如果只想使用非对象名作为键名，那么普通的Map集合是唯一的选择。

码农公寓