【JavaScript 漫游】【051】Set 和 Map 数据结构

炫彩

文章简介

本篇文章为【JavaScript 漫游】专栏的第 051 篇文章,记录了 ES6 规范新增的 Set 和 Map 数据结构的相关知识点。

  1. Set
  2. WeakSet
  3. Map
  4. WeakMap

Set

基本用法

类似于数组,但是成员的值都是唯一的,没有重复的值。

Set 本身是一个构造函数,用来生成 Set 数据结构。

const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4

Set 函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。

// 例一
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

// 例二
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5

// 例三
const set = new Set(document.querySelectorAll('div'));
set.size // 56

// 类似于
const set = new Set();
document
 .querySelectorAll('div')
 .forEach(div => set.add(div));
set.size // 56

向 Set 加入值的时候,不会发生类型转换,所以 5"5" 是两个不同的值。Set 内部判断两个值是否不同,使用的算法叫做“Same-value-zero equality”,它类似于精确相等运算符(===),主要的区别是向 Set 加入值时认为 NaN 等于自身,而精确相等运算符认为 NaN 不等于自身。

let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set; // Set {NaN}

另外,两个对象总是不相等的。

let set = new Set();

set.add({});
set.size; // 1

set.add({});
set.size; // 2

实例属性

  • Set.prototype.constructor:构造函数,默认就是 Set 函数
  • Set.prototype.size:返回 Set 实例的成员总数

实例方法

  • Set.prototype.add(value):添加某个值,返回 Set 结构本身
  • Set.prototype.delete(value):删除某个值,返回一个布尔值,表示删除是否成功
  • Set.prototype.has(value):返回一个布尔值,表示该值是否为 Set的成员
  • Set.prototype.clear():清除所有成员,没有返回值
  • Set.prototype.keys():返回键名遍历器
  • Set.prototype.values():返回键值遍历器
  • Set.prototype.entries():返回键值对遍历器
  • Set.prototype.forEach():使用回调函数遍历每个成员

遍历的顺序就是插入的顺序。

WeakSet

含义

不重复的值的集合,与 Set 有两个区别。

首先,WeakSet 的成员只能是对象,而不能是其他类型的值。

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

其次,WeakSet 中的对象都是弱引用,即垃圾回收机制不考虑 WeakSet 对该对象的引用,也就是说,如果其他对象都不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存,不考虑该对象还存在于 WeakSet 之中。

这是因为垃圾回收机制依赖引用计数,如果一个值的引用次数不为 0,垃圾回收机制就不会释放这块内存。结束使用该值之后,有时会忘记取消引用,导致内存无法释放,进而可能会引发内存泄漏。WeakSet 里面的引用,都不计入垃圾回收机制,所以就不存在这个问题。因此,WeakSet 适合临时存放一组对象,以及存放跟对象绑定的信息。只要这些对象在外部消失,它在 WeakSet 里面的引用就会自动消失。

由于上面这个特点,WeakSet 的成员是不适合引用的,因为它会随时消失。另外,由于 WeakSet 内部有多少个成员,取决于垃圾回收机制有没有运行,运行前后很可能成员个数是不一样的,而垃圾回收机制何时运行是不可预测的,因此 ES6 规定 WeakSet 不可遍历。

这些特点同样适用于后面介绍的 WeakMap 结构。

语法

WeakSet 是一个构造函数,可以使用 new 命令,创建 WeakSet 数据结构。

const ws = new WeakSet();

作为构造函数,WeakSet 可以接受一个数组或类似数组的对象作为参数。(实际上,任何具有 Iterable 接口的对象,都可以作为 WeakSet 的参数。)该数组的所有成员,都会自动成为 WeakSet 实例对象的成员。

const a = [[1, 2], [3, 4]];
const ws = new WeakSet(a);
// WeakSet {[1, 2], [3, 4]}

注意,是 a 数组的成员成为 WeakSet 的成员,而不是 a 数组本身。这意味着,数组的成员只能是对象。

WeakSet 结构有以下三个方法。

  • WeakSet.prototype.add(value):向 WeakSet 实例添加一个新成员
  • WeakSet.prototype.delete(valule):清除 WeakSet 实例的指定成员
  • WeakSet.prototype.has(value):返回一个布尔值,表示某个值是否在 WeakSet 实例之中

WeakSet 没有 size 属性,没有办法遍历它的成员。WeakSet 不能遍历,是因为成员都是弱引用,随时可能消失,遍历机制无法保证成员的存在,很可能刚刚遍历结束,成员是取不到了。WeakSet 的一个用处,是储存 DOM 节点,而不用担心这些节点从文档移除时,会引发内存泄漏。

Map

含义和基本用法

JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串用作键。这给它的使用带来了很大的限制。

为了解决这个问题,ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串-值”的对应,Map 结构提供了“值-值”的对应,是一种更完善的 Hash 结构实现。

const m = new Map();
const o = { p: 'Hello World' };

m.set(o, 'content');
m.get(o); // "content"

m.has(o); // true
m.delete(o); // true
m.has(o); // false

作为构造函数,Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);

map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"

Map 构造函数接受数组作为参数,实际上执行的是下面的算法。

const items = [
  ['name', '张三'],
  ['title', 'Author']
];

const map = new Map();

items.forEach(
  ([key, value]) => map.set(key, value)
);

事实上,不仅仅是数组,任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构都可以当作 Map 构造函数的参数。这就是说,SetMap 都可以用来生成新的 Map。

const set = new Set([
  ['foo', 1],
  ['bar', 2]
]);
const m1 = new Map(set);
m1.get('foo') // 1

const m2 = new Map([['baz', 3]]);
const m3 = new Map(m2);
m3.get('baz') // 3

如果对同一个键多次赋值,后面的值将覆盖前面的值。

const map = new Map();

map
.set(1, 'aaa')
.set(1, 'bbb');

map.get(1) // "bbb"

如果读取一个未知的键,则返回 undefined

new Map().get('asfddfsasadf')
// undefined

注意,只有对同一个对象的引用,Map 结构才将其视为同一个键。这一点要非常小心。

const map = new Map();

map.set(['a'], 555);
map.get(['a']) // undefined

同理,同样的值的两个实例,在 Map 结构中被视为两个键。

const map = new Map();

const k1 = ['a'];
const k2 = ['a'];

map
.set(k1, 111)
.set(k2, 222);

map.get(k1) // 111
map.get(k2) // 222

由上可知,Map 的键实际上是跟内存地址绑定的,只要内存地址不一样,就视为两个键。这就解决了同名属性碰撞(clash)的问题,我们扩展别人的库的时候,如果使用对象作为键名,就不用担心自己的属性与原作者的属性同名。

如果 Map 的键是一个简单类型的值(数字、字符串、布尔值),则只要两个值严格相等,Map 将其视为一个键,比如 0-0 就是一个键,布尔值 true 和字符串 true 则是两个不同的键。另外,undefinednull 也是两个不同的键。虽然 NaN 不严格相等于自身,但 Map 将其视为同一个键。

let map = new Map();

map.set(-0, 123);
map.get(+0) // 123

map.set(true, 1);
map.set('true', 2);
map.get(true) // 1

map.set(undefined, 3);
map.set(null, 4);
map.get(undefined) // 3

map.set(NaN, 123);
map.get(NaN) // 123

实例属性和方法

  • size:返回 Map 结构的成员总数
  • set(key, value):设置键名 key 对应的键值为 value,然后返回整个 Map 结构。如果 key 已经有值,则键值会被更新,否则就新生成该键。
  • get(key):读取 key 对应的键值,如果找不到 key,返回 undefined
  • has(key):返回一个布尔值,表示某个键是否在当前 Map 对象之中
  • delete(key):删除某个键,返回 true,如果删除失败,返回 false
  • clear():清除所有成员,没有返回值
  • keys():返回键名遍历器
  • values():返回键值遍历器
  • entries():返回所有成员的遍历器
  • forEach():遍历 Map 的所有成员

遍历顺序就是插入顺序。

与其他数据结构的互相转换

(1)Map 转数组

使用扩展运算符(...)。

const myMap = new Map()
  .set(true, 7)
  .set({foo: 3}, ['abc']);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

(2)数组转 Map

将数组传入 Map 构造函数,就可以转为 Map。

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

(3)Map 转对象

如果所有 Map 的键都是字符串,它可以无损地转为对象。

function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k,v] of strMap) {
    obj[k] = v;
  }
  return obj;
}

const myMap = new Map()
  .set('yes', true)
  .set('no', false);
strMapToObj(myMap)
// { yes: true, no: false }

如果有非字符串的键名,那么这个键名会被转成字符串,再作为对象的键名。

(4)对象转为 Map

对象转为 Map 可以通过 Object.entries()

let obj = {"a":1, "b":2};
let map = new Map(Object.entries(obj));

(5)Map 转为 JSON

Map 转为 JSON 要区分两种情况。一种情况是,Map 的键名都是字符串,这时可以选择转为对象 JSON。

function strMapToJson(strMap) {
  return JSON.stringify(strMapToObj(strMap));
}

let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'

另一种情况是,Map 的键名有非字符串,这时可以选择转为数组 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"]]]'

(6)JSON 转为 Map

JSON 转为 Map,正常情况下,所有键名都是字符串。

function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}

jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}

但是,有一种特殊情况,整个 JSON 就是一个数组,且每个数组成员本身,又是一个有两个成员的数组。这时,它可以一一对应地转为 Map。这往往是 Map 转为数组 JSON 的逆操作。

function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}

jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}

WeakMap

含义

用于生成键值对的集合。和 WeakSet 一样,只接受对象作为键名(null 除外),并且键名所指向的对象,不计入垃圾回收机制。

WeakMap 的设计目的在于,有时我们想在某个对象上面存放一些数据,但是这会形成对于这个对象的引用。

const e1 = document.getElementById('foo');
const e2 = document.getElementById('bar');
const arr = [
  [e1, 'foo 元素'],
  [e2, 'bar 元素'],
];

上面代码中,e1e2 是两个对象,我们通过 arr 数组对这两个对象添加一些文字说明。这就形成了 arre1e2 的引用。

一旦不再需要这两个对象,我们就必须手动删除这个引用,否则垃圾回收机制就不会释放 e1e2 占用的内存。

// 不需要 e1 和 e2 的时候
// 必须手动删除引用
arr [0] = null;
arr [1] = null;

上面这样的写法显然很不方便。一旦忘了写,就会造成内存泄露。

WeakMap 就是为了解决这个问题而诞生的,它的键名所引用的对象都是弱引用,即垃圾回收机制不将该引用考虑在内。因此,只要所引用的对象的其他引用都被清除,垃圾回收机制就会释放该对象所占用的内存。也就是说,一旦不再需要,WeakMap 里面的键名对象和所对应的键值对会自动消失,不用手动删除引用。

基本上,如果你要往对象上添加数据,又不想干扰垃圾回收机制,就可以使用 WeakMap。一个典型应用场景是,在网页的 DOM 元素上添加数据,就可以使用 WeakMap 结构。当该 DOM 元素被清除,其所对应的 WeakMap 记录就会自动被移除。

const wm = new WeakMap();

const element = document.getElementById('example');

wm.set(element, 'some information');
wm.get(element) // "some information"

总之,WeakMap 的专用场合就是,它的键所对应的对象,可能会在将来消失。WeakMap 结构有助于防止内存泄漏。

注意,WeakMap 弱引用的只是键名,而不是键值。键值依然是正常引用。

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

wm.set(key, obj);
obj = null;
wm.get(key);
// Object { foo: 1 }

语法

WeakMap 与 Map 在 API 上的区别主要是两个,一是没有遍历操作(即没有 keys()values()entries() 方法),也没有 size 属性。因为没有办法列出所有键名,某个键名是否存在完全不可预测,跟垃圾回收机制是否运行相关。这一刻可以取到键名,下一刻垃圾回收机制突然运行了,这个键名就没了,为了防止出现不确定性,就统一规定不能取到键名。二是无法清空,即不支持 clear 方法。因此,WeakMap 只有四个方法可用:get()set()has()delete()

const wm = new WeakMap();

// size、forEach、clear 方法都不存在
wm.size // undefined
wm.forEach // undefined
wm.clear // undefined

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/515503.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

IT外包行业未来发展趋势

随着企业对高可用性系统和分布式系统需求的增加,IT人才外包行业迎来了前所未有的发展机遇。未来几年, IT外包行业将呈现出一系列发展趋势 首先,IT外包人才队伍将不断壮大。随着企业对人效的需求日益增长,以及为规避用工风险和降低…

StarRocks实战——携程火车票指标平台建设

目录 前言 一、早期OLAP架构与痛点 二、指标平台重构整体设计 2.1 指标查询过程 2.1.1 明细类子查询 2.1.2 汇总类子查询 2.1.3 “缓存” 2.2 数据同步 三、Starrocks使用经验分享 3.1 建表经验 3.2 数据查询 3.3 函数问题 四、查询性能大幅提升 五、 后续优化方…

LeetCode575——分糖果

题目链接:. - 力扣(LeetCode) 这道题比较简单,但我还是花费了将近四个小时的时间去解答,AC的那一刻,终于全身舒畅,这道题的思路就是先求出糖果的种数,然后我们从题中可以得出&#x…

PMP备考需要多长时间?

PMP备考需要多久?50天就能顺利学完 PMP考试备考时间需要看自己的工作安排了,学习周期要恰到好处,太长的话可能导致边学边忘,根本来不及总结冲刺;太短的话又会造成学习内容掌握不稳定,导致考试的时候发挥失…

JavaScript(一)基础

文章目录 一、JS介绍JavaScript是什么JavaScript书写位置JavaScript的注释输入输出语法字面量 二、变量变量是什么变量基本使用变量的本质变量命名规则与规范变量拓展-数组var与let的区别 三、常量四、数据类型数据类型检测数据类型数据类型转换隐式转换显式转换 简单运算符断点…

3.冒泡排序

冒泡排序 基本思想:每次比较两个相邻的元素 如果它们的顺序错误就把它们交换过来 重点:交换 时间复杂度为:O(n^2)(平均情况、最坏情况) 最优情况:输入的数组已经是完全有序的时候 冒泡排序只需要进行一…

day11 java不同对象的关联与内存分析 JavaBean用途及讲解 import导入包

不同对象的关联与内存分析 内存图: 对象的属性是另一个对象时,在堆内存内该属性对应的值是另一个对象的首地址(指向另一个堆内存内另一个对象),两对象建立了联系,可以根据箭头间接调用。 JavaBean…

基于SpringBoot + Vue实现的员工绩效考核管理系统设计与实现+毕业论文+PPT+任务书+搭建视频

介绍 系统包含员工和管理员两个角色 管理员: 部门管理:负责创建、修改和删除部门,以及为部门设置权限和角色。 岗位管理:定义和管理岗位信息,包括添加、修改和删除岗位,以及设置岗位的职责和要求 员工…

一、企业级架构之LNMP

一、LNMP 概述 1、LNMP之间的关系: LNMP Linux Nginx MySQL PHP 2、配置LNMP服务器: (1) 克隆一台centos7虚拟机,修改 IP 地址 和 UUID 编号。 IP 为 10.1.1.10,UUID 修改后三位。 (2) 设置主机名称,绑定IP地…

计算机组成原理-10-控制单元的设计

10. 控制单元的设计 文章目录 10. 控制单元的设计10.1 组合逻辑设计10.1.1 CU外特性10.1.2 微操作的节拍安排10.1.3 组合逻辑设计步骤 10.2 微程序设计10.2.1 微程序设计思想10.2.2 微指令格式10.2.3 毫微程序设计10.2.4 微程序设计举例 完结撒花 本笔记参考哈工大刘宏伟老师的…

最新社交相亲系统源码PHP

最新社交相亲系统源码PHP 安装环境: php7.2 mysql 5.7 框架: 后端thinkphp6 前端:jquery layui PC 移动端响应式 线上案例:https://cjr.oemsun.com/ 主要页面及功能预览 首页 相亲资料详情页 红娘跟进记录 海报、一键复制分…

Cisco ACI Simulator 6.0(5h) - ACI 模拟器

Cisco ACI Simulator 6.0(5h) - ACI 模拟器 Application Centric Infrastructure (ACI) Simulator Software 请访问原文链接:https://sysin.org/blog/cisco-acisim-6/,查看最新版。原创作品,转载请保留出处。 作者主页:sysin.o…

【核弹级安全事件】XZ Utils库中发现秘密后门,影响主要Linux发行版,软件供应链安全大事件

Red Hat 发布了一份“紧急安全警报”,警告称两款流行的数据压缩库XZ Utils(先前称为LZMA Utils)的两个版本已被植入恶意代码后门,这些代码旨在允许未授权的远程访问。 此次软件供应链攻击被追踪为CVE-2024-3094,其CVS…

卡奥斯工业互联网平台分析

一、 背景 卡奥斯是海尔推出的具有中国自主知识产权、全球首家引入用户全流程参与体验的工业互联网平台。其核心是大规模定制模式,通过持续与用户交互,将硬件体验变为场景体验,将用户由被动的购买者变为参与者、创造者,将企业由原…

Vue3配置router路由步骤

Vue3配置router路由步骤 首先创建一个vue3的项目 先检查一下router的版本,可以在pakage.json里面查看,也可以你直接在终端输入 npm list vue-router如果版本比较低的话,先升级一下 vue3的话,用以下命令 npm install vue-route…

C语言TCP服务器模型 : select + 多线程与双循环单线程阻塞服务器的比较

观察到的实验现象: 启动三个客户端: 使用双循环阻塞服务器:只能accept后等待收发,同时只能与一个客户端建立连接,必须等已连接的客户端多次收发 明确断开后才能与下个客户端连接 使用IO多路复用select:可以同时接收所有的连接请求,并且连接状态一直是存活的,直到客户端关闭连…

Kubesphere 自动化部署失败报错

Kubesphere 自动化部署在 push tag 阶段失败报错 git push http://****:****github.com/****/devops-java-sample.git --tags --ipv4 remote: Support for password authentication was removed on August 13, 2021. remote: Please see https://docs.github.com/get-started/g…

Netty是什么

一、Netty介绍 1、Netty是一个异步的、基于事件驱动的网络应用框架,用以快速开发高性能、高可靠性的网络IO程序。 2、Netty主要针对在TCP协议下,面向Clients端的高并发应用,或者Peer-to-Peer场景下的大量数据持续传输的应用。 3、Netty本质是…

银行数字化转型导师坚鹏:银行数字化转型给分行带来的8大价值

银行数字化转型给分行带来的8大价值 银行数字化转型对不仅对总行产生了深远影响、给总行带来了新质生产力,对分行也会产生重要价值,银行数字化转型导师坚鹏从以下8个方面进行详细分析,相信能够给您带来重要启发,从而加速银行分行…

【并发编程系列】使用 CompletableFuture 实现并发任务处理

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…