JavaScript – Set and Map

参考

Set 介绍和使用

Set 很像 Array, 但其实它是一个 Iteralbe 对象. 用于保存多个值, 而且具有 unique 特性 (1 个 set 里面不会有重复的值)

注意: Set 是通过 === 加 NaN = NaN 来判断值是否相同. (既不是 === 也不是 Object.is 哦)

它有一些操作值的方法, 顾名思义 add, delete, clear, has, forEach, size

基本添加删除操作

const set = new Set(['a']); // 初始值可以是一个 Array 或者 Iterable

set.add('b').add('b');

console.log(set.size); // 2 (因为 b 是重复的, 会自动被 distinct 掉)

console.log(set.has('a')); // true

const deleted = set.delete('b'); // true

const deleted2 = set.delete('b'); // false (因为 b 已经被洗掉了, 找不到就会返回 false)

set.clear(); // 清除所有的值

遍历 set

set 本身是 Iterable, 可以直接用 for...of 遍历, 它也提供了一个 forEach 方法.

set.add('a').add('b');

const iterator = set[Symbol.iterator]();

console.log(iterator.next().value); // a;

console.log(iterator.next().value); // b;

for (const value of set) {}

set.forEach((value) => {

  console.log(value); // a, b

});

keys, values, entries

const valuesIterable = set.values();

const valuesIterator = valuesIterable[Symbol.iterator]();

和 Object.values 类似的方法, 但是 Object 返回的是 Array. Set 返回的是 Iterable.

另外 keys 并不是返回 1,2,3 而是返回和 values 一样的值. enties 返回的是 key value 但是 key 和 value 也是同一个值.

所以对于 Set, 用 set.values 就够了.

WeakSet

WeakSet 是 Set 的另一个版本. 它有一些特别.

Weak 的意思是弱引用.

1. WeakSet 的值只能是对象（es2023 后，也可以使用 symbol 作为值）

2. WeakSet 保存的对象是弱引用的 (也就是说, 如果垃圾回收, 发现某个对象只存在于 WeakSet 之中, 那不算对象引用, 对象会被垃圾回收掉)

3. WeakSet 不可以遍历, 也不可以 .size (因为垃圾回收的时机是不可预测的, 所以可能遍历到一半就不准了)

常用的方式是存放 element 引用.

Map 介绍和使用

对象的不足

对象有个弱点, 属性只能是 number, string, symbol. 不可以是其它对象.

如果我们想做一个 key value pair, key 希望用 element. 这样就做不了的. 但 Map 可以.

Map 基本用法

const otherObj = {};

const map = new Map();

map.set('a', 'b').set(1, 'c').set(Symbol('symbol'), 'd').set(otherObj, 'e'); // string, number, symbol, object 都可以作为 key

const value = map.get(otherObj); // e

const keys = [...map.keys()]; // a 1 symbol, otherobj

const values = [...map.values()]; // b, c, d, e

const keyValues = [...map.entries()]; // [[a, b], [1, c], [symbol, d], [otherobj, e]]

和 Set 的方法差不多, 需要注意的是 .keys .entries. 它返回的是 iterable 和 Object.keys 返回的 Array 不一样哦. 可以用 Spread Operator 转换成 Array.

Map 初始化

它不直接支持对象初始化, 要用 array array 或者转换

// array array 结构

const map1 = new Map([

  ['key1', 'key1Value'],

  ['key2', 'key2Value'],

]);

const map2 = new Map<any, any>(Object.entries({ name: 'Derrick' })); // 转换对象到 array array

Clone Map

const map1 = new Map<string, string>();

map1.set('a', 'aa');

const map2 = new Map(map1);       // clone from map1

console.log(map1 === map2);       // false

console.log([...map2.entries()]); // [["a", "aa"]]

遍历顺序

对象还有一个弱点, 就是它的输出次序其实没有规范. Object.keys 并没有保证属性是创建的顺序.

但是 Map 有. Set 也是有.

WeakMap

和 WeakSet 相同概念. Map 的弱引用版本.

key 只能是对象, 不支持遍历, key 的对象是弱引用的. （es2023 后，key 也可以使用 symbol）