ES6 中 Map 和 Set

news/2024/11/15 22:01:58/

Map

ES6 以前在 js 中实现 key/value 的存储形式都可以使用 Object 来实现，也就是对象的 属性做为键，当需要获取 value 时，必须要通过对应的 key 去访问。

Map 和 Object 的区别

  • key 上的区别
    • Object 的 key 类型只能是 number | string | symbol 类型
    • Map 的 key 值类型可以包含引用类型
    • 它们值的类型没有限制
/**Object
**/
var obj = {1: 1,'2': '2',[Symbol('sy')]: function () { },[true]: true,[{}]: {},[[]]: [],[null]: null,[undefined]: undefined,[function add() { }]: function add() { }
}// 除了 symbol 类型的属性不能被遍历出来，其他的所有 key 类型都被转成了 string 类型的 key
// 本质上是被调用了 对应类型的 toString() 方法得到的结果
Object.keys(obj).forEach(key => {console.log("key = ", key, " type = ", typeof key);//  key =  1                      type =  string//  key =  2                      type =  string//  key =  true                  type =  string//  key =  [object Object]   type =  string//  key =                          type =  string//  key =  null                   type =  string//  key =  undefined          type =  string//  key =  function add(){}  type =  string
});/**Map
**/
var map = new Map();map.set({}, {}).set([], []).set(false, false).set(null, null).set(undefined, undefined).set(function add() { }, function add() { }).set(Symbol('test'), Symbol('test')).set('string', 'string').set(1, 1);for (const key of map.keys()) {console.log(typeof key);// object// object// boolean// object// undefined// function// symbol// string// number
}
  • 顺序和迭代
    • Object 中的 key 是无序的，因此在遍历时不能通过插入时的顺序访问对应的值
    • Map 实例化是可以接收二维数组形式的键值对进行初始化，并且会按照顺序去插入，因此可以通过插入的顺序去访问对应的值
    • Object 默认不能使用 for of 或者展开运算符(…) 遍历，因为其原型上不存在 Symbol.iterator 的迭代函数
    • Map 的原型上有 Symbol.iterator 的迭代函数，因此可以通过 for of 或者展开运算符(…)进行迭代
    // 1. map 的 for of 遍历在上边的代码中就已经使用过了，这里不再展示typeof Map.prototype[Symbol.iterator] === 'function'// 2. obj 的 for of 遍历typeof Object.prototype[Symbol.iterator] === 'undefined'var obj = {n1: 1,n2: 2,};for (const iterator of obj) {// Uncaught TypeError: obj is not iterable}

选择使用 Object 还是 Map ?

本质还是要看我们存储键值对的目的和具体场景，对于不同的需要，可以进行灵活使用。下面列举一些常见场景。

  • 内存占用
    • 对给定固定大小的内存，Map 大约可比 Object 多存储 50% 的键/值对
  • 插入性能：
    • 往 Object 和 Map 中插入新的键/值对的消耗大致相当，不过插入 Map 在所有浏览器中一般会稍微快一些
  • 查找速度
    • 如果键值对数量本来就多且复杂，那么使用 Object 和 Map 都可以，但一般情况下都推荐使用 Object.
    • 如果只包含少量键/值对，Object 的查找速度要比 Map 更快.
    • 如果把 Object 当成数组使用的情况下（比如使用连续整数作为属性），浏览器引擎可以进行优化，在内存中使用更高效的布局，但对于 Map 来说是不可能的.
  • 删除性能
    • 在使用 Object 时，通常不推荐使用 delete 操作去删除属性，具体可以参考这，因此，通常都是用伪删除的方式，比如将不需要用到的属性设置为 null 或者 undefined
    • 而对大多数浏览器引擎来说，Map 的 delete()操作都比插入和查找更快。如果代码涉及大量删除操作，那么毫无疑问应该选择 Map.

WeakMap

ES6 新增的“弱映射”（WeakMap）是一种新的集合类型，为 JS 带来了增强的键/值对存储机制

  • 弱映射中的键只能是 Object 或者继承自 Object 的类型，尝试使用非对象设置键会抛出TypeError.
  • WeakMap 和 Map 的值类型都没有限制，包括 WeakMap Api 也是 Map 的子集.
    弱键 Weak
  • 弱键不属于正式的引用，不会阻止垃圾回收，只要键存在，键/值对就会存在于映射中，并被当作对值的引用，因此就不会被当作垃圾回收.
// 1. 初始化时，由于没有 {} 的其他引用指向，当这段代码执行完成时，这个对象键就会被当作垃圾回收，于是对应的值也会被处理掉
// 最终这个键/值对就从弱映射中消失了，成为了一个空映射
const wm = new WeakMap();
wm.set({}, "val");// 2. 对象维护着一个对弱映射键的引用，因此这个对象键不会成为垃圾回收的目标。
//    当 setTimeout 中清除掉会摧毁键对象的最后一个引用，垃圾回收程序就可以把这个键/值对清理掉
const weakKey = {name: {}
};
const wm = new WeakMap();wm.set(weakKey.name, "val");
console.log(wm.has(weakKey.name)); // truesetTimeout(()=>{weakKey.name = null;console.log(wm.has(weakKey.name)); // false
});

不可迭代键

  • 由于 WeakMap 中的键/值对任何时候都可能被销毁，所以没必要提供迭代其键/值对的能力，包括像 clear() 这样一次性销毁所有键/值的方法
    image.png
    image.png

使用弱映射

  • 存储 DOM 节点元数据，WeakMap 实例不会妨碍垃圾回收，所以非常适合保存关联元数据，
  • PS：关于元数据的概念可以参考阮一峰老师的网络日志——元数据
// 1. 使用常规 Mapconst m = new Map();const loginButton = document.querySelector('#login');// 给这个节点关联一些元数据m.set(loginButton, {disabled: true});// 假设 loginButton 节点在页面上被删除了// 由于映射中还保存着按钮的引用，所以对应的 DOM 节点仍然会逗留在内存中// 除非明确将其从映射中删除或者等到映射本身被销毁// 2. 使用 WeaMapconst wm = new WeakMap();const loginButton = document.querySelector('#login');// 给这个节点关联一些元数据wm.set(loginButton, {disabled: true});// 当节点从 DOM 树中被删除后，垃圾回收程序就可以立即释放其内存（前提是没有其他地方引用这个对象）

Set

ES6 新增的 Set 是一种新集合类型，为 JS 带来集合数据结构。Set 在很多方面都像是加强的 Map，这是因为它们的大多数 API 和行为都是共有的
image.png

顺序与迭代

  • Set 会维护值插入时的顺序，因此支持按顺序迭代.
  • values() === [Symbol.iterator]() ，且 values() 是默认迭代器，所以可以直接对集合实例使用扩展操作，把集合转换为数组.
const s = new Set(["val1", "val2", "val3"]);
console.log([...s]); // ["val1", "val2", "val3"]
  • 集合的 entries() 方法返回一个迭代器，可以按照插入顺序产生包含两个元素的数组，这两个元素是集合中每个值的重复出现
const s = new Set(["val1", "val2", "val3"]);
for (let pair of s.entries()) {console.log(pair);
}
// ["val1", "val1"]
// ["val2", "val2"]
// ["val3", "val3"]
  • 与 Map 类似，Set 可以包含任何 JavaScript 数据类型作为值。集合也使用SameValueZero 操作（ECMAScript 内部定义，无法在语言中使用），基本上相当于使用严格对象相等的标准来检查值的匹配性。

WeakSet

ES6 新增的“弱集合”（WeakSet）是一种新的集合类型（值的集合），为这门语言带来了集合数据结构，WeakSet 是 Set 的“兄弟”类型，其 API 也是 Set 的子集

  • WeakSet 中的“weak”（弱），描述的是 JavaScript 垃圾回收程序对待“弱集合”中值的方式
  • 弱集合中的值只能是 Object 或者继承自 Object 的类型，尝试使用非对象设置值会抛出 TypeError，这一点和 WeakMao 中的键类型是一致的
const set = new Set();
set.add(123);
console.log(set); // Set(1) {123}const weakSet = new WeakSet();
weakSet.add(123); // TypeError: Invalid value used in weak set
console.log(weakSet);

弱值 Weak

  • 弱值不属于正式的引用，不会阻止垃圾回收
// 由于没有指向 {} 这个对象的其他引用，所以当这行代码执行完成后，这个对象值就会被当作垃圾回收。
// 这个值就从弱集合中消失了，使其成为一个空集合
const ws = new WeakSet();
ws.add({});// container 对象维护着一个对弱集合值的引用，因此这个对象值不会成为垃圾回收的目标
// 当 setTimeout 中清除掉引用，就会摧毁值对象的最后一个引用，垃圾回收程序就可以把这个值清理掉
const ws = new WeakSet();
const container = {val: {}
};
ws.add(container.val);
setTimeout(()=>{container.val = null;
});

不可迭代值

  • WeakSet 中的值任何时候都可能被销毁，所以没必要提供迭代其值的能力，也包括不提供像 clear() 这样一次性销毁所有值的方法

image.png

使用弱集合

  • 相比于 WeakMap 实例，WeakSet 实例的用处没有那么大，但弱集合在给对象打标签时还是有价值的
// 1. 使用常规 Set
// 通过查询元素在不在 disabledElements 中，就可以知道它是不是被禁用了。
// 假如 DOM 树中被删除了，它的引用却仍然保存在 Set 中，因此垃圾回收程序也不能回收它
const disabledElements = new Set();
const loginButton = document.querySelector('#login');
// 通过加入对应集合，给这个节点打上“禁用”标签
disabledElements.add(loginButton);// 2. 使用 WeakSet
// 只要 WeakSet 中任何元素从 DOM 树中被删除，垃圾回收程序就可以忽略其存在，而立即释放其内存（假设没有其他地方引用这个对象）
const disabledElements = new WeakSet();
const loginButton = document.querySelector('#login');
// 通过加入对应集合，给这个节点打上“禁用”标签
disabledElements.add(loginButton);

END


http://www.ppmy.cn/news/1547287.html

相关文章

H3C ER8300G2-X未授权导致信息泄露漏洞(CVE-2024-32238)

H3C ER8300G2-X未授权导致信息泄露漏洞(CVE-2024-32238)

免责声明: 本文旨在提供有关特定漏洞的深入信息，帮助用户充分了解潜在的安全风险。发布此信息的目的在于提升网络安全意识和推动技术进步，未经授权访问系统、网络或应用程序，可能会导致法律责任或严重后果。因此，作者不对读者基于本文内容所采取的任何行为承担责任。读者在…
阅读更多...
第02章 CentOS基本操作

第02章 CentOS基本操作

2.文件基本操作【文件操作（一）】 目标 理解Linux下路径的表示方法能够使用命令(mkdir和touch)在指定位置创建目录和文件能够使用命令(rm)删除指定的目录和文件能够使用命令(ls)列出目录里的文件能够使用命令(cat,head,tail,less,more)查看文件内容理解标…
阅读更多...
完全二叉树的节点个数

完全二叉树的节点个数

给你一棵 完全二叉树 的根节点 root ，求出该树的节点个数。 完全二叉树 的定义如下：在完全二叉树中，除了最底层节点可能没填满外，其余每层节点数都达到最大值，并且最下面一层的节点都集中在该层最左边的若干位置。若最…
阅读更多...
SQL面试题——抖音SQL面试题 主播播出时长

SQL面试题——抖音SQL面试题 主播播出时长

主播播出时长 现有如下数据，主播id、房间号、播出的批次号，每个批次号进出房间的时间戳、分区时间： 每一次直播都有一个上播和下播，每个房间里，同一个批次号会有两条数据，分别记录了上播和下播时间，求每个主播的播出时长？ 通过上面的数据，可以清晰的看出，同一个批次…
阅读更多...
信息收集—JS框架识别泄露提取API接口泄露FUZZ爬虫插件项目

信息收集—JS框架识别泄露提取API接口泄露FUZZ爬虫插件项目

前言 免杀结束了，我们开个新的篇章——信息收集。为什么我一开始先写信息收集的文章呢，是因为现在我才发现我的信息收集能力其实有点弱的，所以呢开始知不足，而后进。 什么是JS JS就是JavaScript的简称，它和Java是没…
阅读更多...
Spring Boot编程训练系统：最佳实践与技巧

Spring Boot编程训练系统：最佳实践与技巧

3系统分析 3.1可行性分析 通过对本编程训练系统实行的目的初步调查和分析，提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本编程训练系统采用SSM框架，JAVA作为开发语言&#…
阅读更多...
会话信息处理： HttpSession、token序列化、收集登录设备信息、基于`spring-session-data-redis`实现session共享。

会话信息处理： HttpSession、token序列化、收集登录设备信息、基于`spring-session-data-redis`实现session共享。

文章目录 引言I 收集登录设备信息用户表设计登录设备信息表设计异步线程收集请求头信息II NginxNginx负载均衡会话共享基于`spring-session-data-redis`实现session共享。负载均衡策略加权轮询‌：按权重分配请求III HttpSessionSession 是另一种记录浏览器状态的机制。Session…
阅读更多...
【Leetcode热题100】C++ 题解

【Leetcode热题100】C++ 题解

目录 哈希 两数之和 字母异位词分组 最长连续序列 双指针 移动零 盛最多水的容器 三数之和 接雨水 滑动窗口 无重复字符的最长子串 找到字符串中所有字母异位词 子串 和为k的子数组 滑动窗口最大值 最小覆盖子串 普通数组 最大子数组和 合并区间 轮转数组 …
阅读更多...
最新文章

Copyright @ 2022~2023