#008#快速了解Set和Map

前言

日志，各位看官就当乐子看吧。

正经人谁写日记啊？！！ ——鹅城县长

不用想乱七八糟的，写就完事儿了。

ES6

1. Set和Map；原文链接：

https://es6.ruanyifeng.com/#docs/set-map 
https://vue3js.cn/interview/es6/set_map.html

Set

Set：由一组不重复的元素构成的数据，类似于数组，成为集合

常用操作

1. 创建，构造函数new Set()

let s=new Set([1,2,3]) // Set(3) {1, 2, 3}

2. 查询和读取
   1. has()：返回布尔值
   2. 遍历操作，keys, values, entries（Set的键和值相同）, forEach
   3. size属性，集合长度
3. 更新，add，添加成功后或失败，都返回结构本身
4. 删除，delete：返回布尔值 clear: 清空集合，没有返回值

注意：Set并没有获取指定位置值的方法，可以转化为数组后访问

数组和字符串的去重

// 数组
let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)]; // [3, 5, 2]

// 字符串
let str = "352255";
let unique = [...new Set(str)].join(""); // "352"

实现并集、交集和差集

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}

// （a 相对于 b 的）差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

WeakSet

1. 数据区别：只能是引用类型、具有 Iterable接口的对象；
2. 没有遍历操作的API，没有size属性，没有clear

只能用，has，delete，add

Map

由键值对构成的结构，称为字典，与JS中的对象不同的是，Map的键和值可以是任意类型的数据

const data = {};
const element = document.getElementById('myDiv');

// element 被自动转化为 [object HTMLDivElement]
data[element] = 'metadata';
data['[object HTMLDivElement]'] // "metadata"

常用操作

1. 创建，构造函数new Map()

const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]); // Map(2) {'name' => '张三', 'title' => 'Author'}

实际上，任何具有Iterator接口，且每个成员都是双元素数据都可以作为参数，Set和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

2. 查询和读取

   1. has，判断键是否在字典中，返回布尔值
   2. get()：返回给定键对应的值，如果没有，返回undefined；
   3. 遍历操作，keys, values, entries, forEach

     // let [key, value] of map.entries() 的简写
     for (let [key, value] of map) {
       console.log(key, value);
     }
   

   4. size属性，数据长度

3. 更新，set，添加或更新键值对，返回字典

4. 删除，delete：返回布尔值 clear: 清空集合，没有返回值

WeakMap

与Map区别

1. 只接受对象作为键名；
2. 键名所指向的对象，不计入垃圾回收机制

设计目的在于，当键名引用的源数据对象不再使用时，垃圾回收机制就会释放该对象所占用的内存，不用手动删除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 弱引用的只是键名，而不是键值。键值依然是正常引用

下面代码中，键值obj会在WeakMap产生新的引用，当你修改obj不会影响到内部（可以理解值是深拷贝吧）

const wm = new WeakMap();
let key = {};
let obj = {foo: 1};

wm.set(key, obj);
obj = null;
wm.get(key)
// Object {foo: 1}

操作区别

1. 没有遍历和size属性
2. 不能清空，不支持clear

因此只能用：get，set，has，delete

彩蛋

日剧 重启人生 还真好看呢，推荐