前言
ES6新增了两种基本的原生数据集合:Set
和Map
(加上Array
和Object
现在共有四种),以及由两者衍生出的弱引用集合:WeakSet
和WeakMap
。从某个不无狭隘的角度看(不无狭隘?到底有多狭隘多不狭隘呢?),Set
更为类似Array
集合的某种提升,而Map
则为Object
集合的增强,虽然两类在本质上就不相同。
1 Set
其本身是生成Set
实例(数据集合)的构造函数,可以接受一个数组(或具有iterable
接口的数据结构)作为参数用来初始化。存储的结构类似数组,不过成员的值在集合中都是唯一的,不会出现重复值。实际的存储顺序(也是遍历顺序)与插入顺序一致,行为的结果和数组相同。
其数据结构中没有键名,但为了和Map
统一,也可认为键名和健值是同一值(会在遍历小节中介绍)。内部使用的相等判断规则,除了认为NaN
等于NaN
,与全等于一致。利用Set
中没有重复值的特性,可以简单的实现数组去重。最后一点,其实例的字符串标签为[Object Set]
——厉害啦,都自立了门户。
let set = new Set([1, 2]);
console.log(...set); // 1 2
console.log({}.toString.call(set)); // [Object Set]
let o = {};
[...new Set([1, 2, 2])]; // [1, 2]
[...new Set([1, NaN, NaN])]; // [1, NaN]
[...new Set([1, o, o])]; // [1, o]
[...new Set([1, {}, {}])]; // [1, {}, {}]
F(1, {}, 1); // [1, {}],可解析带遍历器的类数组对象。
function F() {
console.log([...new Set(arguments)]);
}
let o = { length: 0 };
[...new Set(o)]; // 报错,不能自动解析不带遍历器接口的类数组对象。
// 作为简单的删除数组重复值的方法。
removeDuplicateValues([1, 2, 2, 3]); // [1, 2, 3]
function removeDuplicateValues(arr) {
return [...new Set(arr)];
}
关于相等的小知识
两值是否相等一般指的是是否全等,里面有两个比较特殊的例子:NaN & NaN
和-0 & +0
。在全等中,NaN
不等于NaN
,-0
等于+0
都为零。但这两种认定在某些场合中不太接地气,为此ES6给出用于判断两值是否相等方法Object.is()
中,认定NaN
等于NaN
,-0
不等于+0
。
0除以1为正零,0除以负1为负零,两者在生成上方式上看的确不应该相等。
非数NaN
是一个不是数字的数字(类型依旧为数字型),没有具体的值,因此两个NaN
是不相等的。不过在用NaN
作为映射中的键时,它应该代指这一类型而不是具体的个体。否者我先设置代码NaN
指向貂蝉,再设置NaN
指代西施,晚上宽衣解带后发现仆人竟将两人同时安置在被窝之中,笑盈盈水灵灵的。这,让我如何是好!
2 Map
其本身是生成Map
实例(数据集合)的构造函数,可以接受一个包含键值对的数组(或具有iterable
接口的数据结构)作为参数用来初始化。简单的说,键值对是包含两元素的数组,前者为键名后者为键值。其存储的结构类似Object
,不会出现重复的键名,之中使用的相等判定方法与Set
一致。其实例的字符串标签为[Object Map]
。
其与对象主要有两点不同。一是键名,对象的键名只能是字符串或Symbol
值,而Map
可以是任意类型,它提供了更为完善的值对值的Hash
结构。二是遍历顺序,对象的遍历顺序大致为先数值再字符串后Symbol
值(会在遍历小节中介绍),而Map
是简单的与存储顺序保持一致,这在实际操作中比较有用。
let map = new Map([[1, 'one'], [2, 'two']]);
console.log(...map); // [1,'one'] [2, 'two']
console.log({}.toString.call(map)); // [Object Map]
let o = {};
[...new Map([[o, 1], [o, 2]])]; // [[o, 2]]
[...new Map([[{}, 1], [{}, 2]])]; // [[{}, 2], [{}, 2]]
[...new Map([[null, 1], [undefined, 2]])]; // [[null, 1], [undefined, 2]]
let o = {
0: [1, '1'],
1: [2, '2'],
length: 2,
[Symbol.iterator]: Array.prototype[Symbol.iterator]
};
[...new Map(o)]; // [[1, '1'], [2, '2']]
3 实例方法
关于Set
和Map
的完善API
请点击链接查看。
这里会将Set
与Map
放置在一起,在操作方法和遍历方法上进行异同性说明,方便区分和记忆。另外,为了在方法操作上统一Set
与Map
,如Set
小节中提及的,我们可以认为Set
是键名与键值为同一值的存在(JS本身就是这样做的)。
3.1 操作方法
两者都有的操作方法
判断(has
),传入键名,返回布尔值。
删除(delete
),传入键名,有且成功删除为true
,否则为false
。
清空(clear
),无需传参,没有返回值。
Set
独有的操作方法
新增(add
),传入值,返回实例本身。
没有相应的获取方法,因为获取需传入的值就是应所传出的值。
let set = new Set();
set.add(1).add(NaN); // set.size 为 2。
set.has(NaN); // true
set.delete(NaN); // true
set.has(NaN); // false
set.delete(2); // false
set.clear();
console.log(...set); // 它变得一无所有,只剩一具空壳。
Map
独有的操作方法
新增(set
),传入键名和键值,有则更新没则新增,返回实例本身。
获取(get
),传入键名,返回相应值没有则为undefined
。
let o = [1, 2, 3];
let map = new Map();
map.set(o, 1).set(o, 2); // map.size 为 1
map.has(o); // true
map.get(o); // 2
map.get([1, 2, 3]); // undefined
map.delete(o); // true
map.clear();
console.log(...map); // 它再次一无所有,只剩愈发饥渴的兽心。
3.2 遍历方法
返回键名的遍历器对象(keys
)。
返回键值的遍历器对象(values
)。
返回键值对的遍历器对象(entries
),键值对为[键名, 键值]
。
遍历每个成员(forEach
),使用方式与Array
的方法相同。
因为Set
的键名和键值相同,所以一般只使用values
方法获取全部值。而Map
则根据相应需求获取即可。
let set = new Set([1, 2, 3]);
let map = new Map([[1, 'one'], [null, NaN]]);
[...set.values()]; // [1, 2, 3]
[...set.keys()]; // [1, 2, 3]
[...set.entries()]; // [[1, 1], [2, 2], [3, 3]]
[...map.values()]; // ['one', NaN]
[...map.keys()]; // [1, null]
[...map.entries()]; // [[1, 'one'], [null, NaN]]
两者的forEach
方法与数组的不同点在于回调函数的第二个参数,前者为该项的键名后者为该项的序号。
let set = new Set([1, 2, 3]);
let map = new Map([[1, 'one'], [null, NaN]]);
set.forEach((v, i) => console.log(i)); // 1, 2, 3
map.forEach((v, i) => console.log(i)); // 1, null
[1, 2, 3].forEach((v, i) => console.log(i)); // 0, 1, 2
对象属性的遍历顺序
不同遍历对象的方法面向的数据种类不同,但总的说其遍历顺序是这样的:先找到其中可转化成数值的属性并按升序遍历,再遍历字符串属性按加入时间的前后,最后遍历Symbol
值按加入时间的前后。Map
的遍历顺序即其被插入时的顺序,嗯,总有些色咪咪的味道。
let obj = {
'0': 0,
1: 1,
'b': 2,
'a': 3,
[Symbol(2)]: 4,
[Symbol(1)]: 5
};
Reflect.ownKeys(obj); // ["0", "1", "b", "a", Symbol(2), Symbol(1)]
4 弱引用集合
弱引用集合WeakSet
和WeakMap
是由Set
和Map
分别衍生出的,其与本体的异同点一致,因此只对WeakMap
进行说明。
在JS的垃圾回收机制中,对象会在没有引用时(可意为使用)被回收。这说明着,如果有个数据集合(数组、对象、Set
或Map
)中包含了某对象(在使用它),那么在此数据集合被回收之前该对象都不能被回收。这很容易导致内存泄漏(专有名词,可简单理解为内存被没用的数据占据)。
弱引用集合的设计目的就是为了解决这个问题。弱引用顾名思义是指虽然某对象被此集合引用了,但该引用不被引擎保护,不被垃圾回收装置考虑在内,该回收时就得乖乖的被回收。那些被惯成畸形的家伙们,要知道,妈妈的怀抱可不是个万全的地方哦,唯有死神的才是。
WeakMap
的行为与Map
除了以下几点不同外,可以认为是一致的。 WeakMap
的键名只能是对象(不包括null
),否者报错。如果能放入普通类型,那有什么意义呢? WeakMap
的键名是动态不定的,不知道什么时候会被回收。键名指代的对象被回收后,该项会被自动消除。
因为项数的动态性,所以不能被遍历(没有遍历方法),没有size
属性,没有cealr
方法。
let o = {};
let wm = new WeakMap();
wm.set(1, 1); // 报错,1 不是对象。
wm.set(o, 1);
wm.has(o); // true
wm.get(o); // 1
wm.delete(o); // true
'size' in wm; // false
'clear' in wm; // false
'values' in wm; // false
弱引用集合的优点在于,我们可以任意为其注册对象,而不用担心内存泄漏。典型的应用场景是将DOM
与数据进行绑定。一些要在DOM
中绑定数据的库中,比如d3
,会直接在DOM
对象上设置属性进行保存。但在日常组建单页面程序中的某个阶段,想将DOM
与数据联系在一起时,我们显然会优先选用数据映射的方式。而弱引用集合的出现,更加优化了这种方式。
在下面的示例中,每次点击请求数据后都会生成帮了相应数据项的li
标签,并将该标签与相应的数据进行绑定。在这一系列轮回存储绑定中,因为WeakMap
的弱引用特性,我们不需要关心已经被删除的DOM
元素。每次只需进行相同的操作,方便安心,省时省力。
延伸阅读
ES6精华:Symbol
ES6精华:解构赋值
ES6精华:函数扩展
ES6精华:Proxy & Reflect
Iterator:访问数据集合的统一接口