ES6的Set与Map

在ES6之前,我们存储数据的结构主要有两种:数组、对象,而在ES6中新增了另外两种数据结构:Set、Map。

一、什么是Set?

Set是ES6新增的数据结构,类似数组,但是它的元素成员是唯一的。

Set的使用,属性和方法
1. 创建Set

① new Set()方式创建

let a = new Set()

 ② 通过传入数组方式创建

let a = new Set([1, 2, 'akun'])
 2. Set.size:返回Set中元素的数量
let a = new Set([1, 2, 'akun'])a.size // 3
3. Set.has(key):查找Set对象中是否存在key,返回一个布尔值
let a = new Set([1, 2, 'akun'])a.has('akun') // true
 4. Set.add(key):往Set对象中添加一个元素
let a = new Set()a.add(1)
5. Set.delete(key):删除元素key 
let a = new Set([1, 2, 'akun'])a.delete("akun")
6. Set.clear(): 清空Set的全部元素 
let a = new Set([1, 2, 'akun'])a.clear()
 7. 遍历 Set

① forEach 遍历 

let a = new Set([1, 2, 'akun'])a.forEach(item => {console.log(item)
})

 ② for of 遍历

let a = new Set([1, 2, 'akun'])for(let item of a) {console.log(item)
}
8. Set 转 数组 

① 使用 Array.from 方法 

let a = new Set([1, 2, 'akun'])let arr = Array.from(a)

② 使用扩展运算符

let a = new Set([1, 2, 'akun'])let arr = [...a]

Set的使用场景:如可以利用元素成员唯一性实现数组去重,方法has()判断是否有某个元素等等。 

代码的实现:

 // 数组去重let arr = [1, 1, 2, 3]let unique = [...new Set(arr)] // [1, 2, 3]let a = new Set([1, 2, 'akun'])let b = new Set([2, 3, 4])// 并集let union = [...new Set([...a, ...b])] // [1, 2, 'akun', 3, 4]// 交集let intersect = [...new Set([...a].filter(item => b.has(item)))] // [2]// 差集let difference = [...new Set([...a].filter(item => !b.has(item))),...new Set([...b].filter(item => !a.has(item))),] //  [1, 'akun', 3, 4]

二、什么是Map?

Map是ES6新增的数据结构,类似于对象,本质上就是键值对的集合,对象的键只能是字符串或者Symbols,但Map的键可以为任意类型。

Map的使用,属性和方法 
1. 创建Map 

① new Map()方式创建 

let a = new Map()

② 通过传入二维数组方式创建 

let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)
2. Map.size:返回Map对象中键值对数量 
let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)
a.size // 2
3. Map.has(key):查找Map对象中是否存在key,返回一个布尔值 
let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)
a.has('key1') // true
4. Map.set(key, value):设置Map对象的键值对(键名,键值),返回当前对象 
let a = new Map()
a.set(0, 'zero')
a.set('key1', 'value1')
 5. Map.get(key):返回key值对应的value,如果key不存在则返回undefined
let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)
a.get('key1') // value1
6. Map.delete(key):删除Map对象中键名为key的键值对 
let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)
a.delete("key1")
7. Map.clear():移除Map对象中保存的所有键名/键值对
let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)
a.clear()
 8. 遍历 Map

① forEach 遍历 

let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)a.forEach((value, key) => {console.log(key, value)
})

 ② for of 遍历

let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)for (let [key, value] of a) {console.log(key, value)
}
 9. Map.keys():返回一个新的Iterator对象,它包含按照顺序插入Map对象中每个元素的key值
let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)for (let key of a.keys()) {console.log(key)
}
 10. Map.values():返回一个新的Iterator对象,它包含按照顺序插入Map对象中每个元素的value值
let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)for (let value of a.values()) {console.log(value)
}
 11. Map.entries():该方法返回一个新的Iterator对象,它包含按顺序插入Map对象中每个[key, value]数组
let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)for (let [key, value] of a.entries()) {console.log(key, value)
}
 12. Map 转 数组

① 使用 Array.from 方法

let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)
let arr = Array.from(a)

② 使用扩展运算符

let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)
let arr = [...a]

 Map的使用场景:不关心键值对的键名到底是什么,那么在这种情况下,可以用Map。

 三、总结

 1、Set:是一组Key的集合,但不存储Value,由于Key不能重复,因此他最大的特点是所有的元素都是唯一的;

2、Map:是键值对的集合,为JS带来了真正的键值存储机制;允许任何类型的键,具有极快的查找速度(存储键值较少的情况下)。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[C++][算法基础]求a的b次方模p的值(快速幂)

给定 n 组 ,对于每组数据,求出 的值。 输入格式 第一行包含整数 n。 接下来 n 行,每行包含三个整数 。 输出格式 对于每组数据,输出一个结果,表示 的值。 每个结果占一行。 数据范围 1≤n≤100000, 1≤≤2 …

移动Web学习09-响应式布局bootstrap案例开发

3、综合案例-AlloyTeam移动全端 准备工作 HTML 结构 <title>腾讯全端</title> <link rel"shortcut icon" href"favicon.ico" type"image/x-icon"> <!-- 层叠性&#xff1a;咱们的css 要 层叠 框架的 --> <link rel&…

匿名函数与gorm中的Transaction事务方法

整理下go中的匿名函数&#xff0c;项目中很多地方都在用。 1、函数类型的变量 Go中&#xff0c;函数也是一种数据类型。定义一个函数&#xff0c;把这个函数赋值给一个变量&#xff0c;这个变量就是函数类型的变量&#xff0c;用这个变量等价于直接调函数&#xff1a; packa…

数字阅览室解决方案

一、方案概述 “数字阅览室”概念一经提出&#xff0c;就得到了广泛的关注&#xff0c;纷纷组织力量进行探讨、研究和开发&#xff0c;进行各种模型的试验。随着数字地球概念、技术、应用领域的发展&#xff0c;数字阅览室已成为数字地球家庭的成员&#xff0c;为信息高速公路…

介绍TCP窗口

在TCP通信中&#xff0c;TCP窗口是用于控制发送方发送数据的速率的机制之一。TCP窗口大小会根据网络情况和接收方的处理能力进行动态调整&#xff0c;以最大化网络吞吐量并减少拥塞和丢包的风险。 当发送方以较快速度发送TCP数据包时&#xff0c;TCP窗口大小可能会自动调整&am…

高频前端面试题汇总之JavaScript篇(上)

一、数据类型 1. JavaScript有哪些数据类型&#xff0c;它们的区别&#xff1f; JavaScript共有八种数据类型&#xff0c;分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。 其中 Symbol 和 BigInt 是ES6 中新增的数据类型&#xff1a; Symbol 代…

如何免费申请长期HTTPS证书?

长期HTTPS证书申请步骤&#xff1a; 第一步&#xff1a;确定证书类型 根据你的网站需求&#xff0c;选一种适合的HTTPS证书。一般有这几种&#xff1a; - 域名型&#xff08;DV&#xff09;证书&#xff1a;最基础&#xff0c;验证你对域名的所有权&#xff0c;适合个人网站或…

构建有序链表,有序链表的归并,反转链表

本次将对于构建有序链表&#xff0c;有序链表的归并&#xff0c;反转链表&#xff0c;进行一一介绍和代码分享。 首先是一些链表中的基本的函数&#xff1a; Node* creatList() {Node* headNode (Node*)malloc(sizeof(Node));assert(headNode);headNode->next NULL;retu…

海信电视:中国游戏的影像“黑神话”

【潮汐商业评论/文】 《西游记》最后一难中&#xff0c;通天河老鼋回唐三藏“何时才能修成正果”&#xff0c;《黑神话&#xff1a;悟空》也曾面临这个拷问&#xff0c;如今海信电视与它正在共同回答这个命题。 自2020年发布预告片震动行业后&#xff0c;这部游戏就承载着太多…

小程序插件引入宿主的函数

微信小程序的插件和宿主应用是独立的&#xff0c;插件无法直接通过 require 引用宿主应用中的文件。错误信息 Plugin module "" is not defined 表明你尝试在插件中使用了 require 来加载一个不存在的模块。 当需要在插件中使用宿主的某些方法时&#xff0c;必须通过…

Shader 渐变屏幕

渐变 前置工作&#xff0c;创建缓冲&#xff0c;对顶点着色器传递顶点数据 function main() {var canvas document.getElementById(webgl);var gl getWebGLContext(canvas);if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) returnvar n initVertexBuffers(gl); }fu…

HBM 发展史与前景(持续更新)

主页&#xff1a; 元存储博客 文章目录 前言1. JEDEC 规范2. HBM 发展历程3. HBM 应用场景4. HBM 市场前景5. 发展挑战 翻译自&#xff1a; https://namu.wiki/w/HBM 前言 NVIDIA H2 上的 HBM100e。 1. JEDEC 规范 2. HBM 发展历程 HBM技术曾被视为一种噱头&#xff0c;因为它…

PSAvatar:一种基于点的可变形形状模型,用于3D高斯溅射的实时头部化身创建

PSAvatar: A Point-based Morphable Shape Model for Real-Time Head Avatar Creation with 3D Gaussian Splatting PSAvatar&#xff1a;一种基于点的可变形形状模型&#xff0c;用于3D高斯溅射的实时头部化身创建 Zhongyuan Zhao1,2, Zhenyu Bao1,2, Qing Li1, Guoping Qiu3,…

工时管理软件全攻略,8大关键因素一网打尽!

工时管理往往与项目管理与人力资源结合起来&#xff0c;考察每位员工的绩效指标。可以说&#xff0c;工时管理软件至关重要。什么叫工时管理&#xff1f;考虑到工时管理软件的八个关键要素包含&#xff1a;功能、使用体验、集成能力、扩展性、成本效率、安全隐私、技术支持、用…

javaWeb项目-智慧餐厅点餐管理系统功能介绍

项目关键技术 开发工具&#xff1a;IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7 框架&#xff1a;ssm、Springboot 前端&#xff1a;Vue、ElementUI 关键技术&#xff1a;springboot、SSM、vue、MYSQL、MAVEN 数据库工具&#xff1a;Navicat、SQLyog 1、JavaScript Java…

【漏洞复现】泛微e-cology ProcessOverRequestByXml接口存在任意文件读取漏洞

漏洞描述 泛微e-cology依托全新的设计理念,全新的管理思想。 为中大型组织创建全新的高效协同办公环境。 智能语音办公,简化软件操作界面。 身份认证、电子签名、电子签章、数据存证让合同全程数字化。泛微e-cology ProcessOverRequestByXml接口存在任意文件读取漏洞 免责声…

虚拟机磁盘剩余空间不足

VMware 弹出提示&#xff1a; 对文件“E:\Virtual Machine\CentOS 7 1810 的克隆 (2)\CentOS 7 1810-cl1.vmdk”的操作失败。 如果该文件位于远程文件系统上&#xff0c;请确保网络连接以及该磁盘所在的服务器正常工作。如果该文件位于可移动介质中&#xff0c;请重新连接该介…

从零自制docker-11-【pivotRoot切换实现文件系统隔离】

文章目录 busyboxdocker run -d busybox topcontainerId(docker ps --filter "ancestorbusybox:latest"|grep -v IMAGE|awk {print $1})docker export -o busybox.tar $containerId or sudo docker export 09bbf421d93f > ./busybox.tar tar -xvf busybox.tar -C …

nvm下载的node没有npm

nvm下载的node没有npm 相信大家最近可能发现自己使用的nvm下载nodejs没有npm了。 会出现这种情况&#xff1a; C:\Users\89121>nvm install 15 Downloading node.js version 15.14.0 (64-bit)... Complete Downloading npm version 7.7.6... Download failed. Rolling Bac…

# EXCEL VBA批量获取excel标题内容并填写到当前文件中

EXCEL VBA批量获取excel标题内容并填写到当前文件中 Sub test()Dim r&, i&Dim arr, brrDim wba As WorkbookDim wsa As WorksheetSet wba ThisWorkbookSet wsa wba.Worksheets(1)wsa.Range("b1:GY21").Clearwsa.Range("A2:GY21").ClearDim name…