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)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析