前言
现行的编程语言中,不论多寡,都会提供几种类型的数据集合支持。而在ES6 之前,JavaScript 仅提供了对数组的支持,显得有些捉襟见肘,特别是在以数组和对象为编程主力的JavaScript 语言中,就更为明显。
沉淀过往的经验,考虑到未来的延展,ES6 中引入了4种新的数据结构,分别是:集合(Set)、弱集合(WeakSet)、映射(Map)、弱映射(WeakMap)。接下来,我们一起来看一下它们的用法、属性、方法,以及一些应用场景。
正文
一、Set
Set 结构不会添加重复的值。
Set本身是一个构造函数,用来生成 Set 数据结构。此函数可以接受一个数组、对象、字符串、以及一些其他具有 iterable 接口的其他数据结构作为参数,用来初始化。看下面的代码
// 数组
const arrSet = new Set([1, 2, 3, 4, 4])
[...arrSet]
// [1, 2, 3, 4]
// 字符串
const strSet = new Set('MingEmperor')
strSet.size // 10,r被去重
// nodeList
const set = new Set(document.querySelectorAll('div'))
set.size // 56
// 上个例子类似于
const set = new Set()
document
.querySelectorAll('div')
.forEach(div => set.add(div))
set.size // 56
利用Set的特点,可以做的事情是:
// 最简洁的数组去重
[...new Set([1, 3, 3, 4, 4])]
// [1, 3, 4]
// 以及字符串去重
[...new Set('ababbc')].join('')
// 'abc'
向 Set 加入值的时候,不会发生类型转换,例如:6和"6"是两个不同的值。
Set 内部判断两个值是否不同,类似于精确相等运算符(===
)。不同的是,向 Set 加入值时,NaN会被认为等于自身,而精确相等运算符认为NaN不等于自身。当向同一个Set里面加入两次NaN时:
let set = new Set()
let a = NaN
let b = NaN
set.add(a)
set.add(b)
set
// Set {NaN}
// Set认为两个NaN是同一个值,故将其去重
Set 结构的实例有以下属性:
Set.prototype.constructor
:构造函数,默认就是Set
函数。
Set.prototype.size
:返回Set
实例的成员总数。
Set 实例的方法分为两大类,首先是操作方法(用于操作数据):
let s = new Set()
s.add(1).add(2).add(2)
// 1、Set.prototype.add(value):添加某个值,返回 Set 结构本身。
s.size // 2
s.has(1) // true
// 2、Set.prototype.has(value):返回一个布尔值,表示该值是否为Set的成员。
s.has(2) // true
s.has(3) // false
s.delete(2)
//3、Set.prototype.delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
s.has(2) // false
s.clear()
// 4、Set.prototype.clear():清除所有成员,没有返回值。
s.size // 0
随后是遍历方法(用于遍历成员):
let set = new Set(['red', 'green', 'blue'])
// 1、Set.prototype.keys():返回键名的遍历器
for (let item of set.keys()) {
console.log(item)
}
// red
// green
// blue
// 2、Set.prototype.values():返回键值的遍历器
for (let item of set.values()) {
console.log(item)
}
// red
// green
// blue
// 3、Set.prototype.entries():返回键值对的遍历器
for (let item of set.entries()) {
console.log(item)
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
除了上述三种之外,还有forEach()。与数组的forEach()方法类似,用于对每个成员执行某种操作,没有返回值。
let set = new Set([1, 2, 3])
set.forEach((v, k) => {
console.log(`${v} : ${k}`)
})
// 1 : 1
// 2 : 2
// 3 : 3
Set结构和拓展运算符的结合使用,使得目标数据的结构可以在数组和Set之间灵活转进,进而可以给我们在一些问题的处理上,提供多种优雅的方式。
首先,一些数组方法( 如:map
和 filter
),现在可以同样作用于Set:
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结构无重复元素的特点,可以轻松实现数据之间并、交、差集:
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
// 并集
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 结构(方法二利用了Array.from的第二个参数,也能到达同样的效果)
// 方法一
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 之中。
这是因为垃圾回收机制依赖引用计数,如果一个值的引用次数不为0
,垃圾回收机制就不会释放这块内存。结束使用该值之后,有时会忘记取消引用,导致内存无法释放,进而可能会引发内存泄漏。WeakSet 里面的引用,都不计入垃圾回收机制,所以就不存在这个问题。因此,WeakSet 适合临时存放一组对象,以及存放跟对象绑定的信息。只要这些对象在外部消失,它在 WeakSet 里面的引用就会自动消失。
由于上面这个特点,WeakSet 的成员是不适合引用的,因为它会随时消失。另外,由于 WeakSet 内部有多少个成员,取决于垃圾回收机制有没有运行,运行前后很可能成员个数是不一样的,而垃圾回收机制何时运行是不可预测的,因此 ES6 规定 WeakSet 不可遍历。
WeakSet 依旧是一个构造函数,这次我们还是使用 new
命令,创建 WeakSet 数据结构
const ws = new WeakSet();
WeakSet 能接受一个数组作为参数。
let set = new Set([1, 3, 4, 5])
let str = new String('Ming')
let ws = new WeakSet([set, str, [1, 2, 7]]);
// WeakSet {Set(4), String, Array(3)}
console.log(ws)
WeakSet 结构有以下三个方法,下面是一个例子。
let ws = new WeakSet()
let obj = {}
let foo = {}
WeakSet.prototype.add(value):向 WeakSet 实例添加一个新成员。
ws.add(window);
ws.add(obj);
WeakSet.prototype.has(value):返回一个布尔值,表示某个值是否在 WeakSet 实例之中。
ws.has(window); // true
ws.has(foo); // false
WeakSet.prototype.delete(value):清除 WeakSet 实例的指定成员。
ws.delete(window);
ws.has(window); // false
WeakSet 不能遍历,也没有size属性,是因为成员都是弱引用,随时可能消失,遍历机制无法保证成员的存在,很可能刚刚遍历结束,成员就取不到了。
任何试图获取WeakSet的size和forEach属性的行为,都不能成功:
ws.size // undefined
ws.forEach // undefined
ws.forEach(function(item){ console.log('WeakSet has ' + item)})
// TypeError: undefined is not a function
三、Map
JavaScript 的对象,本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。
为了解决这个问题,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
上面的代码将对象o
当作m
的一个键,然后又使用get
方法读取这个键,接着使用delete
方法删除了该键。
作为构造函数,Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组:
const 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 实例时,就指定了两个键name和title。
其
接受数组作为参数,所用到的算法其实是:
const items = [
['name', '张三'],
['title', 'Author']
];
const map = new Map();
items.forEach(
([key, value]) => map.set(key, value)
);
事实上,不仅仅是数组,任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构都可以当作Map
构造函数的参数。这就是说,Set
和Map
都可以用来生成新的 Map:
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
上面代码中,我们分别使用 Set 对象和 Map 对象,当作Map
构造函数的参数,结果都生成了新的 Map 对象。
而如果对同一个键多次赋值,后面的值将覆盖前面的值。
const map = new Map();
map
.set(1, 'aaa')
.set(1, 'bbb');
map.get(1) // "bbb"
// 对键1连续赋值两次,后一次的值覆盖前一次的值。
如果读取一个未知的键,则返回undefined
。
new Map().get('asfddfsasadf')
// undefined
只有对同一个对象的引用,Map 结构才将其视为同一个键。这一点要非常小心,否则就会像这样:
const map = new Map();
map.set(['a'], 666);
map.get(['a']) // undefined
set
和get
方法,表面是针对同一个键,但实际上这是两个不同的数组实例,内存地址是不一样的,所以get
无法读取该键,只能返回undefined
。
而相应的,同样的值的两个实例,在 Map 结构中被视为两个键:
const map = new Map();
const k1 = ['a'];
const k2 = ['a'];
map
.set(k1, 111)
.set(k2, 222);
map.get(k1) // 111
map.get(k2) // 222
上面代码中,变量k1
和k2
的值是一样的,但是它们在 Map 结构中被视为两个键。
由上可知,Map 的键实际上是跟内存地址绑定的,只要内存地址不一样,就视为两个键。
如果 Map 的键是一个简单类型的值(数字、字符串、布尔值),则只要两个值严格相等,Map 将其视为一个键,比如:
0
和-0
就是一个键。
虽然NaN
不严格相等于自身,但 Map 将其视为同一个键。
而布尔值 true 和字符串 true
则是两个不同的键。
undefined和null也是两个不同的键。
let map = new Map();
map.set(-0, 123);
map.get(+0) // 123
map.set(true, 1);
map.set('true', 2);
map.get(true) // 1
map.set(undefined, 3);
map.set(null, 4);
map.get(undefined) // 3
map.set(NaN, 123);
map.get(NaN) // 123
Map 结构实例的几种属性和操作方法,均可参照前文的Set。
这里详细看一下Map与其他数据结构的互相转换
1、Map 转为数组
Map 转为数组最方便的方法,就是使用扩展运算符(...
)。
const myMap = new Map()
.set(true, 7)
.set({foo: 3}, ['abc']);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]
2、数组 转为 Map
将数组传入 Map 构造函数,就可以转为 Map。
new Map([
[true, 7],
[{foo: 3}, ['abc']]
])
// Map {
// true => 7,
// Object {foo: 3} => ['abc']
// }
(3)Map 转为对象
如果所有 Map 的键都是字符串,它可以无损地转为对象。
function strMapToObj(strMap) {
let obj = Object.create(null);
for (let [k,v] of strMap) {
obj[k] = v;
}
return obj;
}
const myMap = new Map()
.set('yes', true)
.set('no', false);
strMapToObj(myMap)
// { yes: true, no: false }
假使有非字符串的键名,那么这个键名会被转成字符串,再作为对象的键名。
(4)对象转为 Map
稍微用了一下对象方法(Object.keys),对象方法详见拙文《 荀令衣香--JS全对象方法总结 》
function objToStrMap(obj) {
let strMap = new Map();
for (let k of Object.keys(obj)) {
strMap.set(k, obj[k]);
}
return strMap;
}
objToStrMap({yes: true, no: false})
// Map {"yes" => true, "no" => false}
(5)Map 转为 JSON
Map 转为 JSON 要区分两种情况。一种情况是,Map 的键名都是字符串,这时可以选择转为对象 JSON。
function strMapToJson(strMap) {
return JSON.stringify(strMapToObj(strMap));
}
let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'
另一种情况是,Map 的键名有非字符串,这时可以选择转为数组 JSON。
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"]]]'
(6)JSON 转为 Map
JSON 转为 Map,正常情况下,所有键名都是字符串。
function jsonToStrMap(jsonStr) {
return objToStrMap(JSON.parse(jsonStr));
}
jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}
但是,有一种特殊情况,整个 JSON 就是一个数组,且每个数组成员本身,又是一个有两个成员的数组。这时,它可以一一对应地转为 Map。这往往是 Map 转为数组 JSON 的逆操作。
function jsonToMap(jsonStr) {
return new Map(JSON.parse(jsonStr));
}
jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}
四、WeakMap
WeakMap结构与Map结构类似,也是用于生成键值对的集合。但二者的区别有两点:
首先,WeakMap
只接受除null之外的对象作为键名,不接受其他类型的值作为键名。
const 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
map.set(null, 2)
// TypeError: Invalid value used as weak map key
// 上面代码中,如果将数值1和Symbol值作为 WeakMap 的键名,都会报错。
其次,WeakMap
的键名所指向的对象,不计入垃圾回收机制。
WeakMap
的设计目的在于,有时我们想在某个对象上面存放一些数据,但是这会形成对于这个对象的引用。请看下面的例子。
const e1 = document.getElementById('foo');
const e2 = document.getElementById('bar');
const arr = [
[e1, 'foo 元素'],
[e2, 'bar 元素'],
];
上面代码中,e1
和e2
是两个对象,我们通过arr
数组对这两个对象添加一些文字说明。这就形成了arr
对e1
和e2
的引用。
一旦不再需要这两个对象,我们就必须手动删除这个引用,否则垃圾回收机制就不会释放e1
和e2
占用的内存。
// 不需要 e1 和 e2 的时候
// 必须手动删除引用
arr [0] = null;
arr [1] = null;
上面这样的写法显然很不方便。一旦忘了写,就会造成内存泄露。
WeakMap 就是为了解决这个问题而诞生的,它的键名所引用的对象都是弱引用,即垃圾回收机制不将该引用考虑在内。因此,只要所引用的对象的其他引用都被清除,垃圾回收机制就会释放该对象所占用的内存。也就是说,一旦不再需要,WeakMap 里面的键名对象和所对应的键值对会自动消失,不用手动删除引用。
基本上,如果你要往对象上添加数据,又不想干扰垃圾回收机制,就可以使用 WeakMap。一个典型应用场景是,在网页的 DOM 元素上添加数据,就可以使用WeakMap
结构。当该 DOM 元素被清除,其所对应的WeakMap
记录就会自动被移除。
const wm = new WeakMap();
const element = document.getElementById('example');
wm.set(element, 'some information');
wm.get(element) // "some information"
上面代码中,先新建一个 Weakmap 实例。然后,将一个 DOM 节点作为键名存入该实例,并将一些附加信息作为键值,一起存放在 WeakMap 里面。这时,WeakMap 里面对element
的引用就是弱引用,不会被计入垃圾回收机制。
也就是说,上面的 DOM 节点对象的引用计数是1
,而不是2
。这时,一旦消除对该节点的引用,它占用的内存就会被垃圾回收机制释放。Weakmap 保存的这个键值对,也会自动消失。
总之,WeakMap
的专用场合就是,它的键所对应的对象,可能会在将来消失。WeakMap
结构有助于防止内存泄漏。
注意,WeakMap 弱引用的只是键名,而不是键值。键值依然是正常引用。
const wm = new WeakMap();
let key = {};
let obj = {foo: 1};
wm.set(key, obj);
obj = null;
wm.get(key)
// Object {foo: 1}
上面代码中,键值obj
是正常引用。所以,即使在 WeakMap 外部消除了obj
的引用,WeakMap 内部的引用依然存在。