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

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

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

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)
目录
相关文章
|
27天前
|
数据挖掘 API 开发者
深度解析!淘宝商品详情 API 接口的高效调用与实战应用
淘宝商品详情API为开发者提供高效获取商品信息的途径,支持名称、价格、销量等详细数据的提取。接口通过GET/POST请求方式调用,需携带商品ID与授权信息(如AppKey)。其特点包括数据全面、实时性强及安全性高,满足电商应用、数据分析等需求。本文还提供了Python调用示例,涵盖签名生成、参数构建及请求发送全流程,助力开发者快速集成淘宝商品数据至自身系统中。
|
1月前
|
JSON 数据挖掘 API
1688API最新指南:商品详情接口接入与应用
本指南介绍1688商品详情接口的接入与应用,该接口可获取商品标题、价格、规格、库存等详细信息,适用于电商平台开发、数据分析等场景。接口通过商品唯一标识查询,支持HTTP GET/POST请求,返回JSON格式数据,助力开发者高效利用1688海量商品资源。
|
2月前
|
存储 供应链 监控
1688商品数据实战:API搜索接口开发与供应链分析应用
本文详细介绍了如何通过1688开放API实现商品数据的获取与应用,涵盖接入准备、签名流程、数据解析存储及商业化场景。开发者可完成智能选品、价格监控和供应商评级等功能,同时提供代码示例与问题解决方案,确保法律合规与数据安全。适合企业开发者快速构建供应链管理系统。
|
1月前
|
人工智能 数据可视化 API
开箱即用的可视化AI应用编排工具 Langflow,可调用魔搭免费API作为tool
ModelScope 社区基于优秀的开源可视化AI应用编排工具 Langflow 搭建了创空间,以方便社区开发者基于社区开源模型及免费魔搭 API-Inference,快速创建Agent应用、RAG应用并将其部署为API服务。
222 14
|
2月前
|
安全 Java API
理解Akamai EdgeGrid认证在REST API中的应用
Akamai作为内容分发和云服务的领导者,提供了EdgeGrid平台以提升Web应用的速度、可靠性和安全性。EdgeGrid认证(Auth)通过基于令牌的安全机制,利用HMAC-SHA256签名、时间戳和Nonce确保API请求的合法性与唯一性。文章详细介绍了在Python、Java和Go语言中实现EdgeGrid认证的方法,并探讨了如何使用Apipost、Postman和curl工具进行测试。这一认证机制是保障与Akamai REST API安全交互的关键,助力开发者构建更安全高效的数字平台。
|
1月前
|
JSON API 开发者
京东API最新指南:商品视频接口接入与应用
在电商领域,商品视频能有效提升销售业绩。京东商品视频接口助力开发者获取商品视频信息(播放链接、时长、格式、封面图等),通过 HTTP GET/POST 请求返回 JSON 数据,便于集成到各类应用中,优化展示效果与用户体验。本指南详解接口接入与使用方法。
|
2月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
2月前
|
JSON API 开发者
1688 快递费用 API 接口的技术剖析与应用
1688快递费用API接口为企业和开发者提供自动化、高效化的快递费用查询服务,打破人工查询的繁琐局面。通过输入寄件与收件地址、商品重量、体积及选择快递公司等信息,接口精准计算费用并返回结果,支持中通、圆通等主流快递。输出内容包括快递费用、预估时效及附加费说明,助力电商精细化运营。Python示例代码展示了如何使用requests库发起POST请求并解析响应数据,实现费用查询自动化。
132 10
|
2月前
|
机器学习/深度学习 JSON 算法
淘宝拍立淘按图搜索API接口系列的应用与数据解析
淘宝拍立淘按图搜索API接口是阿里巴巴旗下淘宝平台提供的一项基于图像识别技术的创新服务。以下是对该接口系列的应用与数据解析的详细分析
|
2月前
|
JSON API 数据格式
淘宝商品评论API接口系列的应用与数据解析
在电商平台中,用户评论是了解商品质量、服务水平和用户满意度的重要数据来源。淘宝作为中国最大的电商平台,提供了商品评论API接口,帮助开发者获取和分析用户评价数据。本文将介绍淘宝商品评论API接口系列的作用、使用方法,并通过示例展示如何调用API并解析返回的JSON数据。