当前位置: 首页 > news >正文

ES6中的map和set

Map

JS的数据对象(Obejct),本质上是键值对的集合(Hash结构),但是传统上只能用字符串当作键(一定程度上对其的使用有限制)

比如下面代码

const data = {}
const element = document.getElementById('myDiv')data[element] = 'metaData'
data['[object HTMLDivElement]'] // "metadata"

上面代码原意是将一个 DOM 节点作为对象data的键,但是由于对象只接受字符串作为键名,所以element被自动转为字符串[object HTMLDivElement]

“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。(Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。)

如果需要“键值对”的数据结构,Map 构造函数比 Object 更合适。

具有极快的查找速度

在n中有很长的数据,但是利用Map则查找十分迅速:

const m=new map(['Kris',21],['Bob',19],['Lily',25],['Jack',27]);
m.get('Kris');   //  21
m.get('Lily');   //  25

初始化Map需要一个二维数组,或者直接初始化一个空Map,

let m=new Map();
//-----------------------
const m=new map(['Kris',21],['Bob',19],['Lily',25],['Jack',27]);
m.get('Kris');   //  21
m.get('Lily');   //  25

Map的方法

Map方法说明
set(key, val):向Map中添加新元素
get(key):通过键值查找特定的数值并返回
has(key):判断Map对象中是否有Key所对应的值,有返回true,否则返回false
delete(key):通过键值从Map中移除对应的数据
clear():将这个Map中的所有元素删除

一个key只能对应一个value,所以多次对一个key放入value,后面的值会把前面的值冲掉

Set

ES6 提供了新的数据结构 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 结构不会添加重复的值

向Set中加入值不会发生类型转换,所以5"5"是两个不同的值。

前面说到set结构不会添加重复的值意味着set内部会对值进行判断,使用的判断算法叫“Same-value-zero equality”,类似于精确相等符(===),但主要的区别是向Set加入值时认为NaN等于自身,而精确相等符认为NaN不等于自身

所以下面例子中Set里面只有一个NaN

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

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

Array.from()方法可以将Set结构转为数组

所以去重(数组或者字符串)成员可以使用set

[...new Set(array)]
[...new Set('ababbc')].join('')
Array.from(new Set(array));

Set的方法

Set方法说明
add添加某个值,但会Set结构本身
delete删除某个值,返回一个布尔值,表示是否成功
has返回一个布尔值,表示该值是否为Set的成员。
clear清除所有成员,没有返回值。

WeakSet

相关文章:

ES6中的map和set

Map JS的数据对象(Obejct),本质上是键值对的集合(Hash结构),但是传统上只能用字符串当作键(一定程度上对其的使用有限制) 比如下面代码 const data {} const element document.…...

UE5中实现Billboard公告板渲染

公告板(Billboard)通常指永远面向摄像机的面片,游戏中许多技术都基于公告板,例如提示拾取图标、敌人血槽信息等,本文将使用UE5和材质节点制作一个公告板。 Gif效果: 网格效果: 1.思路 通过…...

泊松编辑 possion editing图像合成笔记

开源地址: GitHub - kono-dada/Reproduction-of-possion-image-editing 掩码必须是矩形框...

#渗透测试#漏洞挖掘#红蓝攻防#SRC漏洞挖掘

免责声明 本教程仅为合法的教学目的而准备,严禁用于任何形式的违法犯罪活动及其他商业行为,在使用本教程前,您应确保该行为符合当地的法律法规,继续阅读即表示您需自行承担所有操作的后果,如有异议,请立即停…...

系列2:基于Centos-8.6Kubernetes 集成GPU资源信息

每日禅语 自省,就是自我反省、自我检查,自知己短,从而弥补短处、纠正过失。佛陀强调自觉觉他,强调以达到觉行圆满为修行的最高境界。要改正错误,除了虚心接受他人意见之外,还要不忘时时观照己身。自省自悟之…...

Coturn 实战指南:WebRTC 中的 NAT 穿透利器

1. 什么是 Coturn? Coturn 是一种开源的 TURN(Traversal Using Relays around NAT)服务器,用于解决 NAT 穿透问题。它帮助客户端在受限网络环境(例如防火墙或 NAT 后面)中实现双向通信,常用于 WebRTC 应用、VoIP、在线游戏等场景。 2. Cotur…...

基于卷积神经网络的Caser算法

将一段交互序列嵌入到一个以时间为纵轴的平面空间中形成“一张图”后,基于卷积序列嵌入的推荐(Caser)算法利用多个不同大小的卷积滤波器,来捕捉序列中物品间的点级(point-level)、联合的(union-…...

自闭症在学校:了解自闭症的特点,优化学校教育方式

在教育的广阔天地里,每一片叶子都承载着生命的独特韵律,每一朵花都在以自己的方式绽放。然而,在特殊教育的花园里,有一群孩子,他们或许不那么容易被看见,不那么容易与世界沟通,但他们同样拥有学…...

多线程的知识总结(8):用 thread 类 或全局 async (...) 函数,创建新线程时,谁才是在新线程里第一个被执行的函数

(40)用 thread 类 或全局 async (…) 函数,创建新线程时,谁才是在新线程里第一个被执行的函数? 弄清楚这个问题,有利于推测和理解线程中代码的执行流程。根据 thread 类 和 async (…&#xff0…...

ArcGIS地理空间平台manager存在任意文件读取漏洞

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

HarmonyOS Next 元服务新建到上架全流程

HarmonyOS Next 元服务新建到上架全流程 接上篇 这篇文章的主要目的是介绍元服务从新建到上家的完整流程 在AGC平台上新建一个项目 链接 一个项目可以多个应用 AGC新建一个元服务应用 新建一个本地元服务项目 如果成功在AGC平台上新建过元服务,那么这里会自动显…...

【Linux】makefile项目管理

前言 makefile是一种自动化构建工具,广泛用于管理和编译项目,特别是在C和C等语言中。它通过定义规则来控制源代码的编译、链接和清理等过程。以下是一个基本的Makefile结构和示例,帮助你理解如何管理项目: 首先:创建…...

Lumos学习王佩丰Excel第二十一讲:经典Excel动态图表实现原理

一、动态图表实现原理 1、理解图表中的数据系列 在Excel图表中,系列指的是图表中的数据集合,它通常代表着一个数据源。每个系列都可以包含多个数据点,这些数据点在图表中以特定的形式展现,如柱状图中的柱子,折线图中…...

Linux框架(二)——pinctrl和gpio子系统

基于设备树的 LED 驱动,但是驱动的本质还是没变,都是配置 LED 灯所使用的 GPIO 寄存器,驱动开发方式和裸机基本没啥区别。 Linux 内核提供了 pinctrl 和 gpio 子系统用于GPIO 驱动,本章我们就来学习一下如何借助 pinctrl 和 gpio…...

C++ string的基本概念

文章目录 1. 什么是string?2. auto和范围for的使用2. 1 auto2. 2 范围for 3. 迭代器的概念、const string的概念3. 1 迭代器的概念3. 2 const string的概念 1. 什么是string? 在了解什么是string之前,我们首先需要知道字符串是什么。在C语言中…...

MAC虚拟机上安装WDA环境

MAC虚拟机上安装WDA环境 一、MAC虚拟机切换root权限二、macOS上安装xcode若你的macOS系统可以在appstore下载安装若你安装的macOS系统版本太低,无法在appstore上安装xcode 三、macOS上安装WebDriverAgent四、使用xcode配置WDA安装到手机上高版本系统支持 一、MAC虚拟…...

与 Cursor AI 对话编程:2小时开发报修维修微信小程序

本文记录了如何通过与 Cursor AI 对话,全程不写一行代码的情况下,完成一个完整的报修小程序。整个过程展示了 AI 如何帮助我们: 生成代码 、解决问题、优化实现、完善细节。 先看一下效果图: 一、项目配置 首先我是这样和 AI 对…...

leetcode-73.矩阵置零-day5

class Solution {public void setZeroes(int[][] mat) {int m mat.length, n mat[0].length;// 1. 扫描「首行」和「首列」记录「首行」和「首列」是否该被置零boolean r0 false, c0 false;for (int i 0; i < m; i) {if (mat[i][0] 0) {r0 true;break;}}for (int j …...

CSS学习记录13

CSS组合器 组合器是解释选择器之间关系的某种机制。CSS选择器可以包含多个简单选择器。在简单选择器之间&#xff0c;我们可以包含一个组合器。 CSS中有四种不同的组合器&#xff1a; 后代组合器&#xff08;空格&#xff09;子选择器&#xff08;>)相邻兄弟选择器&#…...

CAD图纸加密软件哪个最好用 | 安全可靠的解决方案

CAD图纸加密软件哪个最好用 | 安全可靠的解决方案 图纸文件泄密事件频发&#xff0c;给企业带来了严重的商业损失、技术秘密泄露、公共安全威胁以及信誉损害。 为了应对这一挑战&#xff0c;选择一款既安全可靠又易于使用的CAD图纸加密软件显得尤为重要。 在众多加密软件中&a…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

python爬虫——气象数据爬取

一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用&#xff1a; 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests&#xff1a;发送 …...