JavaScript -- Map对象及常用方法介绍

news2024/12/23 19:14:29

文章目录

  • Map
    • 1 Map介绍
    • 2 创建一个Map
    • 3 常用方法介绍
    • 4 将Map转换为数组
    • 5 从数组构建Map
    • 6 遍历Map

Map

1 Map介绍

  • Map用来存储键值对结构的数据**(key-value)**
  • Object中存储的数据就可以认为是一种键值对结构
  • Map和Object的主要区别:
    • Object中的属性名只能是字符串或符号,如果传递了一个其他类型的属性名,JS解释器会自动将其转换为字符串
    • Map中任何类型的值都可以成为数据的key
const obj = {
    "name":"孙悟空",
    'age':18,
    [Symbol()]:"哈哈",
    [obj2]:"嘻嘻"
}

image-20221203134223010

2 创建一个Map

const map = new Map()

map.set("name", "孙悟空")
map.set(obj2, "呵呵")
map.set(NaN, "哈哈哈")

map.delete(NaN)
// map.clear()

console.log(map)
console.log(map.get("name"))
console.log(map.has("name"))

image-20221203133950058

3 常用方法介绍

  • map.size() 获取map中键值对的数量
  • map.set(key, value) 向map中添加键值对
  • map.get(key) 根据key获取值
  • map.delete(key) 删除指定数据
  • map.has(key) 检查map中是否包含指定键
  • map.clear() 删除全部的键值对
  • map.keys() 获取map的所有的key
  • map.values() 获取map的所有的value

4 将Map转换为数组

方法一:使用方法Array.from(map)

const map = new Map()

map.set("name", "孙悟空")
map.set("age", 18)
map.set({}, "呵呵")

// 将map转换为数组
const arr = Array.from(map) // [["name","孙悟空"],["age",18]]
const arr = [...map]

console.log(arr)

image-20221203134706290

方法二:使用解构符

推荐这种方法,写法更简便

const map = new Map()

map.set("name", "孙悟空")
map.set("age", 18)
map.set({}, "呵呵")

// 将map转换为数组
const arr = [...map]

console.log(arr)

image-20221203134714506

5 从数组构建Map

const map2 = new Map([
    ["name", "猪八戒"],
    ["age", 18],
    [{}, () => {}],
])
console.log(map2)

image-20221203134819011

6 遍历Map

方法一:使用for-of

const map = new Map()

map.set("name", "孙悟空")
map.set("age", 18)
map.set({}, "呵呵")

for (const [key, value] of map) {
    // const [key, value] = entry
    console.log(key, value)
}

方法二:使用forEach

const map = new Map()

map.set("name", "孙悟空")
map.set("age", 18)
map.set({}, "呵呵")

map.forEach((key, value)=>{
    console.log(key, value)
})

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

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

相关文章

在vue3项目中使用新版高德地图

高德开发平台 : 高德开放平台 | 高德地图API (amap.com) 1. 首先你要注册好账号登录 2. 获取key和密钥 自2021年12月02日升级,升级之后所申请的 key 必须配备安全密钥 jscode 一起使用 NPM方式安装和使用(基础版): 按 NPM 方式安装使用 Loader : npm i amap/amap…

OS——进程并发控制(五大经典问题信号量机制描述)

目录 一、经典问题信号量机制描述 1、任意两个进程可以并发的条件(Bernstein条件) 2、临界区管理原则 3、信号量的P、V操作 (1)P、V操作 (2)P、V操作的原则 (3)用信号量解决进…

[开发浏览器实战]关于Firefox火狐浏览器的说明一二(国内版 国际版区别 账号切换 插件-恢复关闭的标签页 插件-tempermonkey油猴)

[开发浏览器实战]关于Firefox火狐浏览器的说明一二1.下载地址2.同步账号不一样国内版3.浏览器关于内容不同:国内版国际版![在这里插入图片描述](https://img-blog.csdnimg.cn/8ca563d2aa2d43b0b52b6cf50bbffa0c.png)灵活使用firefox推荐插件1.tempermonkey油猴2.恢复关闭的标签…

从零学习VINS-Mono/Fusion源代码(五):VIO初始化

本节分析VIO初始化部分 VINS-Mono/Fusion代码学习系列: 从零学习VINS-Mono/Fusion源代码(一):主函数 从零学习VINS-Mono/Fusion源代码(二):前端图像跟踪 从零学习VINS-Mono/Fusion源代码&#x…

Orin PPS failed to request pps gpio修改

前言 在使用Orin PPS过程中,已经配置了设备树文件,但是遇到了申请GPIO失败的问题,如下图: 申请GPIO失败。 1.分析及解决过程 1.1 设备树文件修改 在设备树文件hardware/nvidia/platform/t23x/concord/kernel-dts/cvb/tegra234-p3737-0000-a00.dtsi 中,添加关于pps gpi…

k8s,30分钟部署一个kubernetes集群【1.17】

作者:李振良 官方网站:http://www.ctnrs.com kubeadm是官方社区推出的一个用于快速部署kubernetes集群的工具。 这个工具能通过两条指令完成一个kubernetes集群的部署: # 创建一个 Master 节点 $ kubeadm init# 将一个 Node 节点加入到当前集群中 $ kubeadm join <Mast…

基于jsp+java+ssm的农产品购物商城系统-计算机毕业设计

项目介绍 随着计算机、信息化网络的普及&#xff0c;电子商务的兴起&#xff0c;网络支付以及网络安全体系逐渐完善&#xff0c;将人们的生活带入到网络时代&#xff0c;越来越多的人喜欢网上购物&#xff0c;消费者足不出户便可以买到自己喜欢的物品&#xff0c;只要轻轻点击…

TypeScript算法题实战——二叉搜索树篇

二叉搜索树&#xff0c;也叫二叉查找树、二叉排序树&#xff0c;是具有下列性质的二叉树&#xff1a; 若它的左子树不空&#xff0c;则左子树上所有结点的值均小于它的根结点的值&#xff1b; 若它的右子树不空&#xff0c;则右子树上所有结点的值均大于它的根结点的值。 注意…

零拷贝(Zero Copy)技术

概念 我们知道Linux系统分为用户态和内核态&#xff0c;在用户态每发起一次IO请求&#xff0c;就需要进行2次上下文切换&#xff08;分别是用户态->内核态&#xff0c;内核态→用户态&#xff09;&#xff0c;和一次CPU拷贝&#xff08;将数据从内核缓存拷贝到用户缓存&…

redis设置密码并修改查看的几种方式

前言 最近正值世纪杯期间&#xff0c;不知道大家心目中的球队成绩如何&#xff0c;最近在工作中需要设置redis服务器的密码的场景 设置密码可以在很大的程度保护redis服务器&#xff0c;但是相关的命令需要通过密码校验之后才能使用 下面就分享给大家两种设置redis服务器的密…

Java并发编程—CompletableFuture的异步执行案例

在博主前几篇博客中&#xff0c;https://blog.csdn.net/qq_52545155/article/details/128167519?spm1001.2014.3001.5501&#xff0c;给大家分享了关于多线程中异步任务的执行和一些相关概念&#xff0c;在这篇博客中&#xff0c;主要是通过一个实际的案例让大家对于Completab…

利用卷神经网络实现IOSLab数字手写图像识别

利用卷神经网络实现IOSLab数字手写图像识别 文章目录利用卷神经网络实现IOSLab数字手写图像识别一、前言二、作业要求三、数据集样本分析四、代码实现1、运行环境2、导入依赖项3、导入数据集4、加载数据和数据预处理5、划分数据集6、CNN网络结构构建7、编译模型8、训练模型9、模…

性能分析之解析 RESAR 性能分析七步法

文章目录一、压力场景数据分析二、架构分析三、响应时间分析四、全局监控分析五、定向监控六、判断性能瓶颈七、提出解决方案一、压力场景数据分析 下面是⼀个登录接⼝的基准场景测试&#xff0c;JMeter 启动后&#xff0c;线程在 1-2 个的时候 TPS 已经达到 200 左右&#xf…

JavaScript -- 字符串常用方法及示例代码介绍

文章目录字符串的方法1 length2 索引3 str.at()4 str.charAt()5 str.concat()6 str.includes()7 str.indexOf() 和 str.lastIndexOf()8 str.startsWith() 和 str.endsWith()9 str.padStart() 和 str.padEnd()10 str.replace() 和 str.replaceAll()11 str.slice() 和 str.substr…

Mysql调优(一)——性能监控

一、大纲图 【Mysql调优.xmind】 二、Mysql调优简写 2.1 性能监控 2.1.1 使用show profile查询剖析工具&#xff0c;可以指定具体的type 此工具默认是禁用的&#xff0c;可以通过服务器变量在会话级别动态的修改&#xff1a; set profiling1;当设置完成之后&#xff0c;在…

某Android大厂面试100题,涵盖测试技术、环境搭建、人力资源......【速度领取】

最近看到网上流传着各种面试经验及面试题&#xff0c;往往都是一大堆技术题目贴上去&#xff0c;但是没有答案。 为此&#xff0c;小编用业余时间整理了这份软测常见的面试题及详细答案&#xff0c;包含测试技术面试题、开发及环境搭建类面试题以及人力资源方向的面试题&#…

代码随想录训练营第42天|01背包问题、LeetCode 416. 分割等和子集

参考 代码随想录 01背包问题 01背包是在M件物品取出若干件放在空间为W的背包里&#xff0c;每件物品的体积为W1&#xff0c;W2至Wn&#xff0c;与之相对应的价值为P1,P2至Pn。01背包是背包问题中最简单的问题。01背包的约束条件是给定几种物品&#xff0c;每种物品有且只有一…

java计算机毕业设计ssm网上拍卖系统vdum4(附源码、数据库)

java计算机毕业设计ssm网上拍卖系统vdum4&#xff08;附源码、数据库&#xff09; 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。…

MySql分库分表

问题分析&#xff1a; 随着互联网及移动互联网的发展&#xff0c;应用系统的数据量也是成指数式增长&#xff0c;若采用单数据库进行数据存储&#xff0c;存在以下性能瓶颈&#xff1a; 1、IO瓶颈&#xff1a;热点数据太多&#xff0c;数据库缓存不足&#xff0c;产生大量磁盘…

小快轻准,5分钟自助上线,中小型制造企业数字化转型

中小企业作为国民经济的重要组成部分&#xff0c;占据我国企业数量的90%以上。 继《中小企业数字化赋能专项行动方案》发布后&#xff0c;工信部近日印发《中小企业数字化转型指南》&#xff0c;提出14条具体举措&#xff0c;为中小企业明确数字化转型路径。 地方政府也纷纷出…