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

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个参数:

  1. Set集合中下一次索引的位置
  2. 与第一个参数一样的值
  3. 被遍历的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 集合的差别

  1. 在WeakSet的实例中,如果向 add()、has()和delete()这3个方法传入非对象参数都会导致程序报错;
  2. Weak Set 集合不可迭代,所以不能被用于 for-of 循环;
  3. Weak Set 集合不暴露任何迭代器(例如 keys() 和 values() 方法),所以无法通过程序本身来检测其中的内容;
  4. Weak Set 集合不支持 forEach() 方法;
  5. 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集合是唯一的选择。

上一篇:java乱码问题处理


下一篇:【《白话机器学习的数学》笔记1】回归