数据结构---Set和Map

1.Set数据结构

Set本质上是一个没有重复数据,但是具有irerator接口可以遍历的一种集合。

Set本身也是一种数据结构的构造函数。

1.Set的初始化

var obj = new Set(参数)；

上面生成一个Set的实例，obj是集合对象，可以通过for...of遍历。

参数可以是数组，也可以是类数组（具有iterator接口的数据,如字符串）

var obj = [...new Set([1,3,3,3])]; // [1,3]

var obj = [...new Set('hellohello')]; // ['h','e','l','o'].join('')--'helo'

注意new Set()生成的对象是类数组,通过[...]转为数组。

⚠️：[...new Set(数组或者类数组)] 可以去重！！！

// +0/-0是一个值 NaN等于自身
[...new Set([+0,-0,NaN, NaN])];  // [0, NaN]

 两个对象总是不相等，该去重方法不适用于对象（任何形式的对象）！

[...new Set([{}, {}, {}])]; // [{}, {}, {}]
// 对象指的的是存储地址，所以每个对象都不一样，所以，不会被认为是重复数据

对象去重参考

⚠️将Set结构转为数组还有一个方法Array.from(set对象);Array.from可以将所有的类数组（含length）转为数组

let obj = Array.from(new Set([1,23,3,3]))

扩展运算符（...）和Array.from() 方法本质也是调用for...of循环。

2.Set的实例属性和方法

1.实例属性

1. Set.prototype.constructor

实例对象的构造函数，继承自原型对象

const obj = new Set('a');
obj.constructor; //Set  Set.prototype.constructor === Set

2. Set.prototype.size

实例对象的元素去重后的个数;相当于数组的长度属性

const obj = new Set([1,2,1,2,3]);
obj.size; // 3
const obj = new Set('aabbccdd');
obj.size; // 4

2. 操作方法

1. Set.prototype.add(value)

向Set集合添加元素

参数：只能传入一个参数；参数可以是任意类型

返回：添加元素后的Set实例

const set = new Set();
const result = set.add(1); 
result.size; // 1 说明result是Set结构，且是添加元素之后的Set结构

由返回值可知：add方法可以连写

const set = new Set();
const result = set.add(1).add('a').add(true);
[...result]; //[1,'a',true]

2. Set.prototype.delete(value)

删除Set集合内的值

参数：待删除的元素

返回： 布尔值；表示是否删除成功

const set = new Set();
set.add(1).add(2).add(3);
const result = set.delete(2);
result; //  true  删除成功
set.size; // 2
const result2 = set.delete(5);
result2; // false  Set集合不包括5，删除失败

3. Set.prototype.has(value)

判断Set数据集合中是否含有某元素

参数： 待判断数据

返回： 布尔值；表示是否包含该数据

const set = new Set();
set.add(1).add(2).add(3);
set.has(1); // true
set.has(5);  // false

4. Set.prototype.clear()

清空Set集合

参数： 无

返回：无（undefined）

const set = new Set();
set.add(1).add(2).add(3);
set.size; //3
set.clear();
set.size; //0

3. 遍历方法

Set集合的遍历顺序是元素的插入顺序。和元素的数据类型无关。

不同于对象的属性遍历顺序，根据属性遍历的先后顺序和属性的数据类型有关。

1. Set.prototype.keys()

同2

2.Set.prototype.values()

由于Set集合中只有value，没有key，所以默认keys和values都返回成员的值。

返回：一个遍历器；遍历器成员是集合的值; set.keys()/set.values()返回值一摸一样

values()方法是Set默认的[Symbol.iterator]属性对应的函数。

const set = new Set([1,2,4]);
const keys = set.keys(); // SetIterator
for (let key of keys()) {
   console.log(key)
}
//  运行结果如下：
1
2
4

const values = set.values(); //SetIterator
[...values]; //[1,2,4]   ...扩展运算符本质上调用的是for...of

3. Set.prototype.entries()

 返回： 一个遍历器；遍历器每个成员是一个数组，数组含有相同的两个值。

let set = new Set();
set.add({a:1}).add(1).add(true);
const entries = set.entries();
for(let entity of entries) {
   console.log(entity);
}
// 运行结果如下：
[{a:1}, {a:1}]
[1,1]
[true, true]

4. Set.prototype.forEach(fn)

用法和数组的 forEach基本一致

const set = new Set([1,2,3]);
set.forEach(function(value, key){ //value和key永远相等；数组中的key是index
   console.log(value,key);
}, thisObj)
// 运行结果如下：
1,1
2,2
3,3

3. Set应用

1. 去重

// 数组去重
[...new Set([1,2,3,1,3,5])]; //[1,2,3,5]
Array.from(new Set([1,2,3,1,3,5])); // [1,2,3,5]

// Set的每个成员*2；先变为数组
new Set([...new Set([1,2,3,1,3,5])].map(i => i*2)); // Set{2,4,6,10}
new  Set(Array.from(new Set([1,2,3,1,3,5]), i => i*2)); //Set{2,4,6,10}

2.求集合

假如现有两个集合：let setA = new Set([1,2,3]);  let setB = new Set([1,3,5]);

1. 并集

const union = new Set([...setA, ...setB])
// Set{1,2,3,5}

2. 交集

const intersect = new Set([...setA].filter(i => setB.has(i)));
// Set{1,3}

3. 差集

const difference = new Set([...setA].filter(i => !setB.has(i)));
// Set{2}  setA有；setB没有

二. WeakSet数据结构

1. 初始化

大体和Set相同；也是一个构造方法。

const ws = new WeakSet();

可以通过数组或者类数组传参，元素类型必须是对象

const ws = new WeakSet([{a:1}, {b:2}]);
// 即数组内的每个元素必须是对象类型

2. 和Set不同点：

1. 元素只能是对象

WeakSet数据集合中元素只能是对象（普通对象，函数，数组等）；不能是原始类型的值。

因此，add(value)的参数必须是对象，delete/has的参数数据类型可以是任意类型

const ws = new WeakSet();
// add(value)参数只能是对象
ws.add({a:1}); // 普通对象
ws.add([1,2]); // 数组
// delele/ has不要求参数数据类型

2. 不能遍历。

1. 实例对象不含[Symbol.iterator]属性，不能遍历;

所以，不能通过...或者Array.from将实例WeakSet数据转为数组

2. 不含size属性；

3. 没有forEach(), keys(), values(), entries()遍历方法。

原因：

该数据结构中的对象引用是弱引用，垃圾回收机制不考虑WeakSet对对象的引用。

即某对象在WeakSet之外没有其他的引用，则该对象即使在WeakSet中有引用，也会被垃圾回收处理掉。

因为元素对象的个数会根据外部引用情况而变化，所以不允许其遍历。

3. 不能清空

没有clear方法

3. 应用

对于引用的一些已经删除的DOM节点，已经不再需要，对于强引用的Set结构，

这些垃圾数据不会被垃圾回收机制自动清理掉，仍占用内存, 需要手动delete删除来释放内存；

但是WeakSet允许垃圾回收机制清理掉这些垃圾数据，释放内存。

三. Map数据结构

1. Map基础

1. 含义

Map是一种键值对的数据结构；不同于对象的键值只能是字符串和Symbol，

Map结构的key可以是任意类型的数据。

是一种更广义的值-值的映射。

2. 初始化

1. 初始化空值

const map = new Map();
const keyObj = {a:1};

map.set(keyObj, 'content');

2. 带参数初始化；可以传入元素是长度为2的数组或者具有iterator接口的数据类型

const map = new Map([[1,2],[{a:2}, 5]]);
// 等同于
const set  = new Set([[1,2],[{a:2}, 5]]);
const map = new Map(set)

2. Map实例属性和方法

1. 实例属性

1.Map.prototype.size

元素的个数

const map = new Map();
map.set('foo', true);
map.set('bar', false);

map.size // 2

2. 操作方法

1. Map.prototype.set(key, value)

向Map结构添加值

返回map实例，可以链式写法；

当添加相同的键名时，后面的键名对应的值会覆盖前面的。

const map = new Map();
map.set('foo', true).set('foo', 2);
map.size; //1
map.get('foo'); //2

当key值是对象类型时，注意除非该对象赋值给一个遍历，使用时通过变量时会认为是同一个值；

直接写对象（任何对象类型），都相当于新建了一个对象，它代表的是内存地址。

// 赋值给遍历
const map = new Map();
const arrObj = ['a']

map.set(arrObj, 555);
map.get(arrObj) // 555

// 直接使用
map.set(['b'], 666);
map.get(['b']) //undefined   set,get中的['b']是不同的内存地址地址对应的值
// 即使值一样也对应不同的地址，对应Map的key来说是不同的值
const k1 = ['c'];
const k2 = ['c'];  //k1,k2值相同，但是内存地址不同
map.set(k1, 5);
map.get(k2)  //undefined

2. Map.prototype.get(key)

获取键名对应的值

3. Map.prototype.has(key)

判断某个键名是否存在

4. Map.prototype.delete(key)

删除某个键名对应的键值对

5.Map.prototype.clear()

清空整个Map数据结构

3. 遍历方法

1. Map.prototype.keys()

返回键名的遍历器

2. Map.prototype.values()

返回值的遍历器

3.Map.prototype.entries()

返回键值对的遍历器

Map结构的[Symbol.iterator]属性对应的是entries()方法

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

[...map.keys()]
// [1, 2, 3]

[...map.values()]
// ['one', 'two', 'three']

[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]

[...map]  //Map函数生成的实例本身也可遍历
// [[1,'one'], [2, 'two'], [3, 'three']]

4.Map.prototype.forEach(fn)

同Set

4. 和其他数据结构互换

1. Map->数组

const map = new Map([[1,2],[{a:2}, 5]]);
[...map]; // [[1,2],[{a:2}, 5]]

2. 数组->Map

数组必须满足每个成员都是长度为2的数组

new Map([
  [true, 7],
  [{foo: 3}, ['abc']]
])

3. Map->对象

Object.fromEntries(new Map([
   [true, 7],
   [{foo: 3}, ['abc']]
])) //{true: 7, [object Object]: ['abc']}

// 键值是对象时，会自动将对象转为对应的字符串

4. 对象->Map

new Map([...Object.entries({yes: true, no: false})])

5. Map->JSON

1)键名都是字符串

先转为对象，再转JSON

const set = new Map().set('yes', true).set('no', false);
function toJSON() {
    return JSON.stringify(Object.fromEntries(set))
}

2)键名有非字符串

转数组，再转JSON

const set = new Map().set('yes', true).set('no', false);
function toJSON() {
    return JSON.stringify([...set]))
}

6. JSON->Map

5的逆运算

都需要先JSON.parse()后再根据情况转换。

四.WeakMap

1. 初始化

const wp = new WeakMap();
wp.set({a:1}, 1) //键名必须是对象
//
const wp = new WeakMap([[{a:1}, 1],[{a:2}, 2]]) //键名必须是对象

2.和Map差别

1. 键名只能是对象

2. 不能遍历。

原因：第4项

1. 没有size属性

2.没有forEach,keys,values,entries的遍历方法

3. 只有set,get,delete,has四个方法

3.无法清空

没有clear方法

4.键名对应的对象不计入垃圾回收机制。

3.应用-防止内存泄漏。

键名对应的对象是弱引用，不计入垃圾回收机制。只是键名！！

对于值是对象的情况，即使外部删除了引用，WeakMap内存仍然存在

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

wm.set(key, obj);
obj = null;  // 将对象设置为null, 手动删除引用
wm.get(key);// {foo: 1}内部仍存在

首先，对象用在普通数据结构中，是强引用，不手动删除的话，会一直占用内存。

const e1 = document.getElementById('foo');
const e2 = document.getElementById('bar');
const arr = [
  [e1, 'foo 元素'],
  [e2, 'bar 元素'],
]; 
// e1, e2是两个NodeList对象，用于二维数组中，相当于被二维数组引用，就会占用内存存放；
// arr之外其实e1,e2对应的DOM已经不存在，也不会自动被垃圾回收机制回收掉，只能手动删除，清空数组，arr.length = 0;

而WeakMap结构是弱引用，如果出现上面例子中的情况，会自动被垃圾回收机制回收掉，释放内存。

验证：

使用process.memoryUsage()查看内存；

// 首先打开node命令行
node --expose-gc // 允许手动执行垃圾回收机制

// 手动执行一次垃圾回收，保证获取的内存使用状态准确
> global.gc();
undefined

// 查看内存占用的初始状态，heapUsed 为 4M 左右
> process.memoryUsage();
{ rss: 21106688,
  heapTotal: 7376896,
  heapUsed: 4153936,
  external: 9059 }

> let wm = new WeakMap();
undefined

// 新建一个变量 key，指向一个 5*1024*1024 的数组
> let key = new Array(5 * 1024 * 1024);
undefined

// 设置 WeakMap 实例的键名，也指向 key 数组
// 这时，key 数组实际被引用了两次，
// 变量 key 引用一次，WeakMap 的键名引用了第二次
// 但是，WeakMap 是弱引用，对于引擎来说，引用计数还是1
> wm.set(key, 1);
WeakMap {}

> global.gc();
undefined

// 这时内存占用 heapUsed 增加到 45M 了
> process.memoryUsage();
{ rss: 67538944,
  heapTotal: 7376896,
  heapUsed: 45782816,
  external: 8945 }

// 清除变量 key 对数组的引用，
// 但没有手动清除 WeakMap 实例的键名对数组的引用
> key = null;
null

// 再次执行垃圾回收
> global.gc();
undefined

// 内存占用 heapUsed 变回 4M 左右，
// 可以看到 WeakMap 的键名引用没有阻止 gc 对内存的回收
> process.memoryUsage();
{ rss: 20639744,
  heapTotal: 8425472,
  heapUsed: 3979792,
  external: 8956 }

示例1: 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++;
}, false);
//一旦这个 DOM 节点删除，该状态就会自动消失，不存在内存泄漏风险。

示例二：部署类的私有属性

// Countdown类的两个内部属性_counter和_action，是实例的弱引用，所以如果删除实例，它们也就随之消失，不会造成内存泄漏
const _counter = new WeakMap();
const _action = new WeakMap();

class Countdown {
  constructor(counter, action) {
    _counter.set(this, counter);
    _action.set(this, action);
  }
  dec() {
    let counter = _counter.get(this);
    if (counter < 1) return;
    counter--;
    _counter.set(this, counter);
    if (counter === 0) {
      _action.get(this)();
    }
  }
}

const c = new Countdown(2, () => console.log('DONE'));

c.dec()
c.dec()
// DONE

详情参考