JS【详解】Map (含Map 和 Object 的区别,Map 的常用 API,Map与Object 的性能对比,Map 的应用场景和不适合的使用场景)

news/2024/7/21 23:42:52/文章来源:https://blog.csdn.net/weixin_41192489/article/details/139259715

Map 简介

ES6 新增了数据结构 Map,与普通对象 object 类似,也是键值对的集合,特征如下:

  • 有序(将元素添加的先后顺序作为其次序)【object 无序】
  • 键可以是任意数据类型 【object 的键只能是字符串/Symbol】
  • Map是一个纯哈希结构,而Object不是(它拥有自己的内部逻辑)。
  • 键是唯一性的,不存在重复的键值对。(与 object 相同)
  • 因 Map 也是对象类型,所以它也是 Object 实例
// person_m 是一个Map对象
typeof person_m  // 得到 object
console.log(person_m instanceof Object); //true

Map 和 Object 的区别

  • Map 有序,Object 无序
  • Map 的键可以是任意数据类型,Object 的键只能是字符串/Symbol
  • Map是一个纯哈希结构,而Object不是(它拥有自己的内部逻辑)。
  • Map 只能通过构造函数的方式创建,Object 可以通过多种方式(字面量、new Object()、Object.create() 等)创建
  • Map本身具有size属性,Object需要使用 keys()、values()等方法获取;
  • Map本身具有可迭代属性,Object不具有;
  • Map会保持数据的插入顺序,Object不会;

Map 的基本操作

new —— 创建 Map

创建空Map对象

let blank_m = new Map();
console.log(blank_m);
// 打印 Map(0) {}

创建含键值对的 Map 对象

let person_m = new Map([["name", "朝阳"],["age", 35],
]);
console.log(person_m);
//  打印 Map(2) { 'name' => '朝阳', 'age' => 35 }

创建以对象为键的 Map 对象

let cp1_boy = {name: "朝阳",
};let cp1_girl = {name: "晚霞",
};let cp2_boy = {name: "范闲",
};let cp2_girl = {name: "林婉儿",
};let cps = new Map([[cp1_boy, cp1_girl],[cp2_boy, cp2_girl],
]);
console.log(cps);
// 打印
// Map(2) {
//   { name: '朝阳' } => { name: '晚霞' },
//   { name: '范闲' } => { name: '林婉儿' }
// }

get —— 读取键的值

person_m.get("name")

set —— 新增键值对 / 修改键的值

若不存在目标键则新增,若存在,则修改目标键的值

person_m.set("gender", "男");

支持链式调用

person_m.set("age", 40).set("gender", "男");

delete —— 删除键值对

person_m.delete("name");

object 删除键的本质是将其键的值设置为 undefined,所以其键其实仍在内存中!

delete target_obj.name

clear —— 清空键值对

person_m.clear()

has —— 是否存在目标键

返回 true / false

if (person_m.has("name")) {
}

size —— 获取键值对的数量

类似数组的 .length

person_m.size

object 的方法为

Object.keys(target_obj).length

Object.getOwnPropertyNames(target_obj).length

遍历 Map

forEach ———— 留意顺序 value, key

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

for of ———— 留意顺序 key,value (使用了数组解构赋值 [ ] !)

for(let [key,value] of person_m){console.log(key,value);
}

Map 转 数组

let arr=[...person_m]

得到

[ [ 'name', '朝阳' ], [ 'age', 35 ] ]

其他操作

  • 获取所有键 keys()
for(let key of person_m.keys()){console.log(key);
}
  • 获取所有值 values()
for(let value of person_m.values()){console.log(value);
}
  • 获取所有键和属性值 entries()
for(let [key,value] of person_m.entries()){console.log(key,value);
}

Map 的性能(与 Object 对比)

  • 增加键
    量小时差异不大,量大时,Map比object 快,因为 Map内部使用了哈希表,而object在内存分配和处理上开销较大

  • 查找键
    都非常快,但在某些情况下,当查找的键在数据结构中不存在时,Map可能会比 Object 更快。这是因为Map会在内部快速定位到哈希表中的空位,而0bject需要遍历整个原型链。

  • 删除键
    Map 优于 Object 。因为Map的内部实现使得删除操作更加高效。在Object中,删除一个键实际上仅仅是将其值设置为undefined,而不是真正地从内存中移除,这可能导致内存泄漏和性能下降。

  • 遍历
    Map 优于 Object 。Map内部的哈希表结构保证了遍历的顺序与插入顺序相同。而Object在遍历时,可能因为属性的插入顺序和内部哈希结构而导致遍历顺序不一致。此外,Map提供了内置的迭代器,可以使用for…of循环方便地遍历键值对。

Map 的应用场景

关联复杂数据类型的数据

利用 Map 的键可为任意数据类型的特性!

const employeeProjects = new Map();
employeeProjects.set(employee1, [projectA, projectB]);
employeeProjects.set(employee2, [projectC, projectD]);// 查找员工参与的项目
console.log(employeeProjects.get(employee1)); // 输出 [projectA, projectB]

Vue3 数据响应式 reactive 和 effect 的源码中,大量使用了 Map

大量键的增删和查找操作

在键的量较大时,Map 对键的增加、删除、查找和遍历性能都比 object 更好。

Map 不适合使用的场景

  • 在需要使用JSON时(因JSON 尚未支持Map,但直接支持Object)

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

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

相关文章

联邦和反射器实验

拓扑图 一.实验要求 1.AS1存在两个环回,一个地址为192.168.1.0/24,该地址不能在任何协议中宣告 AS3存在两个环回,一个地址为192.168.2.0/24,该地址不能在任何协议中宣告 AS1还有一个环回地址为10.1.1.0/24&#xff…

区块链系统开发测试----链码部署开发、系统开发验证

一.检查配置环境 检查虚拟机环境,确保有正在运行的Hyperledger Fabric区块链,并且其中chaincode_basic、credit_chaincode链码可以正常调用 查看chaincode_basic、credit_chaincode链码调用 二.开发征信链码代码 基于现有征信链码,开发征信…

2024提升数字思维能力加快企业数字化转型(74页PPT)

方案介绍: 本报告的价值在于为企业提供了一套系统的提升数字思维能力、加快数字化转型的理论框架和实践指南。通过本报告的学习和应用,企业可以更加清晰地认识到数字化转型的重要性和紧迫性,明确自身在数字化转型中的优势和不足,并…

ROS2 Topics和Services

本文主要介绍ROS的Topics概念,如何创建Publisher和Subscriber,通过Topic在ROS程序间通信;介绍ROS的Services概念,如何创建Client和Server并建立通信。 更多内容,访问专栏目录获取实时更新。 ROS Topics Topics可以被视…

SpringJDBC

1.前言 Spring JDBC可以帮助开发者节省大量开发工作 自动去处理一些低级细节 比如:异常处理、打开和关闭资源(Connection、PreparedStatement、Statement、ResultSet) 需要下载的jar包: spring-jdbc(普通jar包、源码jar包)由于没有依赖其他的jar包 所以只…

vite+js配置

vite js 配置路径 npm install types/node --save-dev vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue //需要引入 import path from path// https://vitejs.dev/config/ export default defineConfig({plugins: [vue()],resolve: {a…

WORD、PPT技巧

WORD技巧 编辑设置 word标题导航窗口怎么调出word2016,缩小了页面,可是怎么是竖着的一页一页排列啊?以前不是好几页横排着的么?怎么设置,求救:在Word标题栏那一行找到“视图”,点击“显示比例…

【算法】位运算算法——两整数之和

题解:两整数之和(位运算算法) 目录 1.题目2.位运算算法3.参考代码4.总结 1.题目 题目链接:LINK 2.位运算算法 这个题目难点就在于不能用、- 那什么能够代替加号呢? 既然数的层面不能用号,那二进制的角度去用号即可。 恰好&a…

FPGA——eMMC验证

一.FPGA基础 1.FPGA烧录流程 (1) 加载流文件 —— bitfile (2) 烧录文件 —— cmm 二.MMC 1.基础知识 (1)jz4740、mmc、emmc、sd之间的关系? jz4740——处理器 mmc——存储卡标准 emmc——mmc基础上发展的高效存储解决方案 sd—— 三.eMMC和SD case验证 1.ca…

MySQL数据表的“增删查改“

我们学习数据库, 最重要的就是要学会对数据表表进行"增删查改"(CRUD).(C -- create, R -- retrieve, U -- update, D -- delete) 目录 一. "增"(create) 1. 普通新增 2. 指定列新增 3. 一次插入多行 4. 用insert插入时间 5. 小结 二. "查"…

LuatOS学习

开发顺序 Lua是脚本语言中运行速度最快的语言 资源占用极低 脚本语言运行方式 脚本语言是从上往下一行一行运行的 变量 coun 123456 a,b,c 1,2,3交换 a,b b,a在测试环境中,用print(a,b)打印 nil类型 未声明的变量就是nil,nil用来表示此变量为空…

使用uniapp编写的微信小程序进行分包

简介: 由于小程序发布的时候每个包最多只能放置2MB的东西,所以把所有的代码资源都放置在一个主包当中不显示,所以就需要进行合理分包,,但是分包后整个小程序最终不能超过20MB。 一般情况下,我习惯将tabba…

ubuntu使用oh my zsh美化终端

ubuntu使用oh my zsh美化终端 文章目录 ubuntu使用oh my zsh美化终端1. 安装zsh和oh my zsh2. 修改zsh主题3. 安装zsh插件4. 将.bashrc移植到.zshrcReference 1. 安装zsh和oh my zsh 首先安装zsh sudo apt install zsh然后查看本地有哪些shell可以使用 cat /etc/shells 将默…

通过el-tree自定义渲染网页版工作目录,实现鼠标悬浮显示完整名称、用icon区分文件和文件夹等需求

目录 一、通过el-tree自定义渲染网页版工作目录 1.1、需求介绍 1.2、使用el-tree生成文档目录 1.2.1、官方基础用法 ①效果 ②代码: 1.2.2、自定义文档目录(实现鼠标悬浮显示完整名称、用icon区分文件和文件夹) ①效果(直接效…

在winnas中使用docker desktop遇到的问题及解决方法记录

最近在尝试从群晖转向winnas,一些简单的服务依然计划使用docker来部署。群晖的docker简单易用且稳定,在win上使用docker desktop过程中遇到了不少问题,在此记录一下以供后来人参考。 一、安装docker desktop后启动时遇到无法启动docker引擎 …

5G专网驻网失败分析(suci无效)

suci 5G终端第一次驻网时,注册消息Registartion request中携带的5GS mobile identity要携带suci类型的mobile identity。 注册消息协议规范见5G NAS 协议3gpp TS24.501 8.2.6 Registration request。 suci协议规范参见3gpp TS24.501 9.11.3.4 5GS mobile identity …

常用批处理命令及批处理文件编写技巧

一常用批处理命令 1.查看命令用法:命令 /? //如:cd /? 2.切换盘符目录:cd /d D:\test 或直接输入 d: //进入上次d盘所在的目录 3.切换目录:cd test 4.清屏:cls 5.“arp -a” //它会列出当前设备缓存中的所有…

进程互斥经典问题(读写者问题、理发店问题)

目录 读写者问题 问题描述 问题分析 进程互斥问题三部曲 读者写者算法实现 一、找进程——确定进程关系 二、找主营业务 三、找同步约束 a.互斥 b.资源 c.配额 理发店问题 问题描述 问题分析 进程互斥问题三部曲 理发店问题算法实现 一、找进程——确定进程…

弘君资本股市行情:股指预计保持震荡上扬格局 关注汽车、银行等板块

弘君资本指出,近期商场体现全体分化,指数层面上看,沪指一路震动上行,创出年内新高,创业板指和科创50指数体现相对较弱,依然是底部震动走势。从盘面体现上看,轮动依然是当时商场的主基调&#xf…

基于SpringBoot的旅游管理系统

基于SpringBoot的旅游管理系统 旅游管理系统开发技术功能模块代码结构数据库设计运行截图源码获取 旅游管理系统 开发技术 技术:SpringBoot、MyBatis-Plus、MySQL、Beetl、Layui。 框架:基于开源框架Snowy-Layui开发。 工具:IDEA、Navicat等…