JS 中的 (Weak)Set 和 (Weak)Map

羽月

发布于 2022-10-08 13:50:15

2.1K00

代码可运行

文章被收录于专栏：羽月技术羽月技术

运行总次数：0

代码可运行

Set 和 Map 都是 ES6 新增数据结构。

Set

Set 是一个集合，它类似于数组，但是成员的值都是唯一的，没有重复的值。它允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

Set 是一个构造函数，它有一个可选的参数一个可迭代对象。如果传递了这个参数它的所有元素将不重复地被添加到新的 Set中。如果不指定此参数或其值为null，则新的Set为空。它返回一个新的Set实例。

let s1 = new Set([NaN, undefined, null, +0, -0, Infinity, -Infinity, NaN, undefined, null])console.log(s1)/*
Set(6) {NaN, undefined, null, 0, Infinity, …}
    size: 6
    __proto__: Set
    [[Entries]]: Array(6)
        0: NaN
        1: undefined
        2: null
        3: 0
        4: Infinity
        5: -Infinity
        length: 6
*/// 可以发现在 Set 中 NaN 之间被视为相同的值

Set常用于去除重复元素。

// 去除数组的重复成员[...new Set([1,2,3,1,2,3])]// 去除重复字符[...new Set('abcabc')].join('')

Set 原型属性

除了constructor，Set.prototype上还有一个size属性，它返回Set对象值的个数。

Set 原型方法

Set 一共有 9 个原型方法。

add(value)

用来向一个Set对象的末尾添加一个指定的值，它返回Set对象本身。

let s2 = new Set([1])
s2.add(2).add(3) // { 1, 2, 3 }

has(value)

返回一个布尔值来指示对应的值value是否存在Set对象中。

delete(value)

可以从一个Set对象中删除指定的元素，成功删除返回 true，否则返回false。

clear()

用来清空一个Set对象中的所有元素，返回undefiend。

values()

返回一个Iterator对象，这个对象以插入Set 对象的顺序包含了原Set对象里的每个元素。

let s3 = new Set([1,2,3])console.log(s3.values())// SetIterator {1, 2, 3}

keys()

values()的别名，功能和values()完全相同。

entries()

返回一个新的迭代器对象，这个对象的元素是类似[value, value]形式的数组。

console.log(s3.entries()) // SetIterator {1, 2, 3}for (let i of s3.entries()) {    console.log(i)
}/*
[1, 1]
[2, 2]
[3, 3]
*/

forEach(callback[, thisArg])

根据集合中元素的顺序，对每个元素都执行提供的callback函数一次。它接受两个参数第一个是回调函数，第二个是回调函数的this指向（可选）。

(new Set([5,2,false, [], {}])).forEach(function (value, index, obj) {    console.log(value, index, obj)    // value 元素
    // index 元素索引等于 value
    // obj set 对象})/*
5 5 Set(5)
2 2 Set(5)
false false Set(5)
[] [] Set(5)
{} {} Set(5)
*/

[@@iterator]()

Set的迭代器函数，默认是values函数。

console.log(s3.[Symbol.iterator])// ƒ values() { [native code] }

Set 静态属性

Set.length它值为0
Set[Symbol.species]返回Set构造函数
Set.prototype 原型

WeakSet

WeakSet和Set类似，但是有两点不同：

WeakSet对象中只能存放对象引用, 不能存放值, 而Set对象都可以.
WeakSet对象中存储的对象值都是被弱引用的, 如果没有其他的变量或属性引用这个对象值, 则这个对象值会被当成垃圾回收掉. 正因为这样, WeakSet对象是无法被枚举的, 没有办法拿到它包含的所有元素.

const ws = new WeakSet();
ws.add(1)// TypeError: Invalid value used in weak setws.add(Symbol())// TypeError: invalid value used in weak set

WeakSet 原型属性

WeakSet只有constructor属性

WeakSet 原型方法

WeakSet 只有 3 个原型方法，add has delete。它没有迭代相关的方法和clear方法。

WeakSet 静态属性

对比Set它少了Symbol.species属性。

Map

Map对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。它和 JS 对象不同，JS 对象只能用字符串和Symbol作为键，而Map可以使用任何值。

除了键类型上的不同，它和Object还有以下不同：

Map中的键值是有序的，而添加到对象中的键则不是。
Map可以通过size获取键值对个数，而Object的键值对个数只能手动计算。
Map可直接进行迭代，而 Object 的迭代需要先获取它的键数组，然后再进行迭代。
Object都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。虽然ES5开始可以用map = Object.create(null) 来创建一个没有原型的对象，但是这种用法不太常见。
Map在涉及频繁增删键值对的场景下会有些性能优势。

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

data[element] = 'metadata';
data['[object HTMLDivElement]'] // "metadata"// -----------------------var myMap = new Map();
myMap.set(NaN, "not a number");

myMap.get(NaN); // "not a number"var otherNaN = Number("foo");
myMap.get(otherNaN); // "not a number"//  NaN 作为 Map 的键来说是没有区别的

Map是一个构造函数，它接受一个可选的参数，可以是一个数组或者其他iterable 对象，其元素或为键值对，或为两个元素的数组。每个键值对都会添加到新的Map。

let m1 = new Map([[1,2], ['key', 'value'], [false, undefined], [null, null], [undefined, 1], [undefined, undefined]])console.log(m1)// Map(5) {1 => 2, "key" => "value", false => undefined, null => null, undefined => undefined}

Map是可以直接被迭代的，一个Map对象在迭代时会根据对象中元素的插入顺序来进行 — 一个for...of循环在每次迭代后会返回一个形式为[key，value]的数组。

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");for (var [key, value] of myMap) {  console.log(key + " = " + value);
}// 将会显示两个log。一个是"0 = zero"另一个是"1 = one"// 合并两个 Mapvar first = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);var second = new Map([
  [1, 'uno'],
  [2, 'dos']
]);// 合并两个Map对象时，如果有重复的键值，则后面的会覆盖前面的。// 展开运算符本质上是将Map对象转换成数组。var merged = new Map([...first, ...second]);

Map 的原型属性

除了constructor，Map原型上还有一个size属性，它返回Map对象键值对的数量。

Map 的原型方法

Map一共有 10 个原型方法。

set(key, value)

为Map对象添加或更新一个指定了键（key）和值（value）的（新）键值对。它返回Map对象。

let m2 = new Map()
m2.set(1,2).set(2,3).set(2,100)console.log(m2)// Map(2) {1 => 2, 2 => 100}

get(key)

返回键对应的值，如果不存在，则返回undefined。

has(key)

如果指定元素存在于Map中，则返回true。否则返回false。

delete(key)

移除Map对象中指定的元素，如果Map对象中存在该元素，则移除它并返回 true；否则如果该元素不存在则返回false。

clear()

移除Map对象中的所有元素。返回undefined。

keys()

返回一个新的Iterator对象。它包含按照顺序插入Map对象中每个元素的key值。

var myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");var mapIter = myMap.keys();console.log(mapIter.next().value); // "0"console.log(mapIter.next().value); // 1console.log(mapIter.next().value); // Object

values()

返回一个新的Iterator对象。它包含按顺序插入Map对象中每个元素的value值。

entries()

返回一个新的包含[key, value]对的Iterator对象，返回的迭代器的迭代顺序与Map 对象的插入顺序相同。它就像直接迭代Map对象一样。

forEach(callback[, thisArg])

将会以插入顺序对Map对象中的每一个键值对执行一次参数中提供的回调函数。第二参数是回调函数的this指向，返回undefined。

第一个参数回掉函数的参数为：

value 元素的值
key 元素的键
Map 当前正在被遍历的对象

function logMapElements(value, key, map) {    console.log("m[" + key + "] = " + value);
}Map([["foo", 3], ["bar", {}], ["baz", undefined]]).forEach(logMapElements);// logs:// "m[foo] = 3"// "m[bar] = [object Object]"// "m[baz] = undefined"

[@@iterator]()

@@iterator属性的初始值与entries属性的初始值是同一个函数对象。

var myMap = new Map();
myMap.set('0', 'foo');
myMap.set(1, 'bar');
myMap.set({}, 'baz');var mapIter = myMap[Symbol.iterator]();//返回的其实是个generatorconsole.log(mapIter.next().value); // ["0", "foo"]console.log(mapIter.next().value); // [1, "bar"]console.log(mapIter.next().value); // [Object, "baz"]

Map 和 JSON

Map不能使用JSON.stringify转换为json，如果是字符串键的话，可以先将它转化为object，再转化为json，或者直接转化为数组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"]]]'

Map 静态属性

Map.length 值为0。
Map[Symbol.species] 返回一个Map构造函数，一般用于创建派生对象。
Map.prototype 原型

WeakMap

WeakSet对象允许你将弱保持对象存储在一个集合中。

它和Map类似，但有两点不同：

WeakSet对象中只能存放对象引用, 不能存放值, 而Set对象都可以。
WeakSet对象中存储的对象值都是被弱引用的, 如果没有其他的变量或属性引用这个对象值, 则这个对象值会被当成垃圾回收掉. 正因为这样, WeakSet对象是无法被枚举的, 没有办法拿到它包含的所有元素.

WeakMap 原型属性

它只有一个constructor属性。

WeakMap 原型方法

WeakMap有 5 个原型方法（set get has delete clear），相比Map它少了迭代类型的方法和clear方法。

WeakMap 静态方法

对比Map，它少了Symbol.species属性。

WeakMap 的用途

WeakMap一般将DOM节点作为键，这样DOM节点被删除了，WeakMap中也会消失，这样久不存在内存泄漏。

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);

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-10-03，如有侵权请联系 cloudcommunity@tencent.com 删除

java

编程算法

本文分享自羽月技术微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

java

编程算法

登录后参与评论

0 条评论

热度