Set、WeakSet、Map、WeakMap

Set

1. Set 是一个构造函数，类似于数组
2. Set 的成员的值都是唯一的
3. Set 不会发生类型转换
4. Set 结构没有键名，只有键值

Set 的操作

1. 去除数组重复成员

// 去除数组重复成员
var arr = [1, 2, 3, 4, 56, 76, 1, 2, 3, 4];
console.log([...new Set(arr)]);
console.log(Array.from(new Set(arr)));
// 输出
// [1, 2, 3, 4, 56, 76]
// [1, 2, 3, 4, 56, 76]

2. 去除字符串重复字符

// 去除字符串重复字符
console.log([...new Set('helloHELLOhello')].join(''));
// 输出
// heloHELO

3. Set 无法去重两个空对象

// Set无法去重两个空对象
console.log([...new Set([{}, {}])]);
// 输出
// [{}, {}]

4. Set 的属性与方法

// Set.prototype.constructor：构造函数，默认就是Set函数
console.log(new Set().constructor);
// 输出
// ƒ Set()

// Set.prototype.size：返回Set实例的成员总数
console.log(new Set('hello').size);
// 输出
// 4

// 添加某个值，返回 Set 结构本身
console.log(new Set([0]).add(0).add(1));
// 输出
// Set(2) {0, 1}

// delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
const set2 = new Set([0]);
console.log(
  set2
    .add(0)
    .add(1)
    .delete(0)
);
console.log(set2);
// 输出true
// Set(1) {1}

// has(value)：返回一个布尔值，表示该值是否为Set的成员
console.log(set2.has(0));
// 输出
// false

// clear()：清除所有成员，没有返回值
console.log(set2.clear());
console.log(set2);
// 输出
// undefined
// Set(0) {}

5. Set 的遍历

let set1 = new Set(['red', 'green', 'blue']);
// keys()，values()，entries()，forEach()
for (let item of set1.keys()) {
  console.log(item);
}
// 输出
// red
// green
// blue

for (let item of set1.values()) {
  console.log(item);
}
// 输出
// red
// green
// blue

for (let item of set1.entries()) {
  console.log(item);
}
// 输出
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

set1.forEach((value, key) => console.log(key + ' : ' + value));
// 输出
// red : red
// green : green
// blue : blue

// ## WeakSet类似Set，也是不重复的集合，但是WeakSet的成员智能是对象，
// WeakSet 里面的引用，都不计入垃圾回收机制
// WeakSet 的成员是不适合引用的
// WeakSet 不可遍历
console.log(new WeakSet([[1, 2], [3, 4]]));
// 输出
// WeakSet {Array(2), Array(2)}

---

WeakSet

1. WeakSet 类似 Set，也是不重复的集合，但是 WeakSet 的成员智能是对象，
2. WeakSet 里面的引用，都不计入垃圾回收机制
3. WeakSet 的成员是不适合引用的
4. WeakSet 不可遍历

weakSet 的使用

console.log(new WeakSet([[1, 2], [3, 4]]));
// 输出
// WeakSet {Array(2), Array(2)}

---

Map

1. Map 是一个构造函数，类似对象
2. Map 是键值对的集合，它的键值可以是任何类型
3. Map 的成员也是唯一的

Map 的使用

1. Map 的属性与方法

const m = new Map([['name', '张三'], ['name', '张三'], ['title', 'Author']]);
const o = {
  p: 'Hello World'
};
m.set(o, 'content');
console.log(m);
console.log(m.size);
m.set('hello', 'world');
console.log(m.get(o));
console.log(m.has(o));
console.log(m.delete(o));
console.log(m.has(o));
console.log(m);
m.clear();
m.set('nice', 'life');
console.log(m);
// 输出
// {"name" => "张三", "title" => "Author", {…} => "content"}
// 3
// content
// true
// true
// false
// {"name" => "张三", "title" => "Author", "hello" => "world"}
// Map(1) {"nice" => "life"}

2. Map 如何转成数组

// 将map转成数组
const map = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);
console.log([...map.keys()]);
console.log([...map.values()]);
console.log([...map.entries()]);
console.log([...map]);
// 输出
// [1, 2, 3]
// ['one', 'two', 'three']
// [[1,'one'], [2, 'two'], [3, 'three']]
// [[1,'one'], [2, 'two'], [3, 'three']]

3. Map 如何转成对象

// 用for of 把map转成对象
const map = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);
function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k, v] of strMap) {
    obj[k] = v;
  }
  return obj;
}
console.log(strMapToObj(map));
// 输出
// {1: "one", 2: "two", 3: "three"}

---

WeakMap

1. WeakMap 是一个构造函数，类似 Map
2. WeakMap 是键值对的集合，但只接受对象作为键名
3. WeakMap 弱引用的只是键名，而不是键值

WeakMap 的使用

const wm = new WeakMap([
  [
    {
      name: 1
    },
    '张三'
  ]
]);
let key = {};
let obj = {
  foo: 1
};
wm.set(key, obj);
obj = null;
console.log(wm.get(key));
// 输出
// {foo: 1}

WeakMap 的应用：获取当前 dom 的点击次数

let myElement = document.getElementById('logo');
let myWeakmap = new WeakMap();
myWeakmap.set(myElement, {
  timesClicked: 0
});
myElement.addEventListener(
  'click',
  function() {
    let logoData = myWeakmap.get(myElement);
    logoData.timesClicked++;
    console.log(myWeakmap, logoData);
  },
  false
);
// 输出
// WeakMap {div#logo => {…}} {timesClicked: 1}
// WeakMap {div#logo => {…}} {timesClicked: 2}