ES6的Set和Map 以及WeakSet和WeakMap

1、Set

1.1概念：ES6提供了新的数据结构Set，它类似数组，但是成员的值都是唯一的。

eg:
const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); for (let i of s) { console.log(i); }
上面代码，通过add方法向Set结构假如成员，输出为：2，3，5，4

Set函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化

// 例一
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

// 例二
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]); items.size // 5

// 例三
function divs () { return [...document.querySelectorAll('div')]; }

const set = new Set(divs()); set.size // 56

// 类似于
divs().forEach(div => set.add(div)); set.size // 56
上面代码，例一和二都是数组作为参数，例三是接受类似数组的对象作为参数。

去除数组重复成员的方法
// 去除数组的重复成员 [...new Set(array)]

向set里加入值的时候，不会发生类型转化，所以5和“5”是两个不同的值，Set内部判断两个值是否不同，使用的算法叫做“Same-value equality” 类似于精确相等运算符(===)，而区别是，NaN等于自身，而精确相等运算符认为NaN不等于自身。此外两个对象总是不相等。
1.2Set实例的属性和方法

Set 结构的实例有以下属性。

Set.prototype.constructor：构造函数，默认就是Set函数。
Set.prototype.size：返回Set实例的成员总数。

Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。

add(value)：添加某个值，返回Set结构本身。
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
has(value)：返回一个布尔值，表示该值是否为Set的成员。
clear()：清除所有成员，没有返回值。

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

对象的写法
const obj = {
'width':1,
'height':1
}

if(obj[someName]){
//....
}

Set的写法
const obj = new Set()
obj.add('width');
obj.add('height');

if(obj.has(someName)){//....}

Array.from方法可以将Set结构转为数组
const items = new Set（[1,2,3,4,5]）;
const array = Array.from(items);

这也就提供了去除数组重复成员的另一种方法。
function dedupe(array){ return Array.from(new Set(array)); } dedupe([1,1,2,3]) //[1,2,3]

1.3遍历操作

Set结构的实例有死歌遍历方法，可以用于遍历成员。

Set的遍历顺序就是插入顺序

.keys()：返回键名的遍历器

.values()：返回键值的遍历器

.entries()：返回键值对的遍历器

.forEach()：使用回调函数遍历每个成员

遍历
let set = new Set(['red','green','blue']);
for(let x of set){ console.log(x); }
//red //green //blue

forEach()方法，用于对每个成员执行某种操作，没有返回值
let set = new Set([1, 2, 3]); set.forEach((value, key) => console.log(value * 2) ) // 2 // 4 // 6

遍历的应用

扩展运算符(...)内部使用 for...of循环，所以也可以用于Set结构
let set = new Set(['red', 'green', 'blue']); let arr = [...set]; // ['red', 'green', 'blue']
扩展运算符和 Set 结构相结合，就可以去除数组的重复成员。
let arr = [3, 5, 2, 2, 5, 5]; let unique = [...new Set(arr)]; // [3, 5, 2]

而且数组的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可以很容易地实现并集(Union)、交集(Intersect)和差集（Difference）。
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结构，目前没有直接的方法，但是有两种变通方法。一种是利用原Set结构映射出一个新的结构，然后赋值给原来的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

2、WeakSet

2.1概念

WeakSet结构与Set类似，也是不重复的值的集合，但是，它与Set有两个区别。首先，WeakSet的成员只能是对象，而不能是其他类型的值，其次，WeakSet中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用
垃圾回收机制依赖引用技术
WeakSet是一个构造函数，可以使用new命令，创建WeakSet数据结构，

const set = new WeakSet()

const a = [[1,2],[3,4]]
const ws = new WeakSet(a)\这是可行的

const b = [3, 4];
const ws = new WeakSet(b);\报错

3.2

WeakSet 结构有以下三个方法。

WeakSet.prototype.add(value)：向 WeakSet 实例添加一个新成员。

WeakSet.prototype.delete(value)：清除 WeakSet 实例的指定成员。

WeakSet.prototype.has(value)：返回一个布尔值，表示某个值是否在

3.3

WeakSet 没有size属性，没有办法遍历它的成员。因此forEach的方法也用不了。

WeakSet 的一个用处，是储存 DOM 节点，而不用担心这些节点从文档移除时，会引发内存泄漏。

WeakSet 例子:
const foos = new WeakSet()
class Foo{ constructor(){ foos.add(this) } method(){ if(!foos.has(this)){ throw new TypeError('Foo.prototype.method 只能在Foo的实例上调用')； } } }
上面代码保证了Foo的实例方法，只能在Foo的实例上调用。这里使用WeakSet的好处是，foos对实例的引用，不会被记入内存回收机制，所以删除实例的时候，不用考虑foos，也不会出现内存泄露。

3、Map

3.1概念

Object 结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

3.2方法

map在增加成员的时候，用set 例如：
const m = new Map();
m.set(0,'content');
m.get(0);
m.delete(0)
m.has(0)

map同样接受一个数组作为参数,该数组的成员是一个个表示键值对的数组。

事实上，不仅仅是数组，任何具有Iterator接口的数据结构都可以当做Map构造函数的参数，这就是说，Set和Map都可以用来生成新的Map。

const set = new Set([ ['foo', 1], ['bar', 2] ]); const m1 = new Map(set); m1.get('foo') // 1
上面代码中，我们分别使用 Set 对象和 Map 对象，当作Map构造函数的参数，结果都生成了新的 Map 对象

3.3实例的属性和操作方法

Map结构的实例有一下属性和操作方法

size
set(key,value)
get(key),
has(key)
delete(key)
clear()

3.4遍历方法(Map的遍历顺序就是插入的顺序)

Map结构提供三个遍历起生成函数和一个遍历方法。

keys()：返回键名的遍历器。

values()：返回键值的遍历器。

entries()：返回所有成员的遍历器。

forEach()：遍历 Map 的所有成员。

for(let key of map.keys()){ console.log(key); }

for(let [key,value] of map){ console.log(key,value) }

for(let item of map.entries()){ console.log(item[0],item[1]); }

3.5、Map结构转为数组结构，比较快速的方法是使用扩展运算符(...)

const map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]);

[...map.keys()]
[...map.values()]
[...map.entries()]
[...map]

结合数组的map方法、filter方法，可以实现Map的遍历和过滤(Map本身没有map和filter方法)
const map0 = new Map()
.set(1, 'a') .set(2, 'b') .set(3, 'c');

const map1 = new Map( [...map0].filter(([k, v]) => k < 3) );
// 产生 Map 结构 {1 => 'a', 2 => 'b'}

const map2 = new Map( [...map0].map(([k, v]) => [k * 2, '_' + v]) ); // 产生 Map 结构 {2 => '_a', 4 => '_b', 6 => '_c'}

3.6、与其他数据结构的互相转换
3.6.1 Map转为数组
使用扩展运算符，|| Array.form
3.6.2 数组 转为 Map
将数组传入Map构造函数，就可以转为Map
new Map([
[true, 7],
[{foo: 3}, ['abc']]
])
3.6.3 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)

3.6.4 对象转为Map
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})
3.6.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"]]]'
3.6.5 JSON转为Map

JSON 转为 Map，正常情况下，所有键名都是字符串。

function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}

jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}

但是，有一种特殊情况，整个 JSON 就是一个数组，且每个数组成员本身，又是一个有两个成员的数组。这时，它可以一一对应地转为Map。这往往是数组转为 JSON 的逆操作。

function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}

jsonToMap('[[true,7],[{"foo":3},["abc"]]]')

4 WeakMap

4.1概念

WeakMap结构与Map结构类似，也是用于生成键值对的。

4.2区别

首先，WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名

其次，WeakMap的键名所指向的对象，不计入垃圾回收机制

4.3 WeakMap语法

WeakMap 与 Map 在 API 上的区别主要是两个，一是没有遍历操作（即没有key()、values()和entries()方法），也没有size属性。因为没有办法列出所有键名，这个键名是否存在完全不可预测，跟垃圾回收机制是否运行相关。二是无法清空，即不支持clear方法。因此，WeakMap只有四个方法可用：get()、set()、has()、delete()。

以上所有的知识点和例子，均来自于阮一峰老师的书籍[ECMAScript 6 入门]

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,126评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,254评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,445评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,185评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,178评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,970评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,276评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,927评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,400评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,646评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,213评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2赞 345

推荐阅读更多精彩内容