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)
目录
打赏
0
0
0
0
63
分享
相关文章
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端,再到利用 APIPost 高效测试 API,适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式,还涉及数据库连接和前后端数据交互。通过实际代码示例,助你快速上手并优化应用性能。
flat、flatmap与map的用法区别
本文介绍了 JavaScript 数组方法 `flat()`、`flatMap()` 和 `map()` 的用法及区别。`flat()` 可按指定深度递归展平数组,参数为深度,默认一层;`flatMap()` 结合了 `map()` 和 `flat()` 功能,返回一维数组,长度可能不同于原数组;而 `map()` 返回与原数组长度一致的新数组。通过多个代码示例展示了三者的功能和差异,帮助开发者更好地理解和使用这些方法。
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
盘点原生JS中目前最没用的几个功能API
在JavaScript的发展历程中,许多功能与API曾风光无限,但随着技术进步和语言演化,部分功能逐渐被淘汰或被更高效的替代方案取代。例如,`with`语句使代码作用域复杂、可读性差;`void`操作符功能冗余且影响可读性;`eval`函数存在严重安全风险和性能问题;`unescape`和`escape`函数已被`decodeURIComponent`和`encodeURIComponent`取代;`arguments`对象则被ES6的剩余参数语法替代。这些变化体现了JavaScript不断优化的趋势,开发者应紧跟技术步伐,学习新技能,适应新技术环境。
65 10
深入浅出:使用Node.js构建RESTful API
在这个数字时代,API已成为软件开发的基石之一。本文旨在引导初学者通过Node.js和Express框架快速搭建一个功能完备的RESTful API。我们将从零开始,逐步深入,不仅涉及代码编写,还包括设计原则、最佳实践及调试技巧。无论你是初探后端开发,还是希望扩展你的技术栈,这篇文章都将是你的理想指南。
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将引导您步入Node.js的奇妙世界,通过实践操作,掌握如何使用这一强大的JavaScript运行时环境构建高效、可扩展的RESTful API。我们将一同探索Express框架的使用,学习如何设计API端点,处理数据请求,并实现身份验证机制,最终部署我们的成果到云服务器上。无论您是初学者还是有一定基础的开发者,这篇文章都将为您打开一扇通往后端开发深层知识的大门。
104 12
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发如同一座灯塔,指引着数据的海洋。本文将带你航行在Node.js的海域,探索如何从一张白纸到完成一个功能完备的RESTful API。我们将一起学习如何搭建开发环境、设计API结构、处理数据请求与响应,以及实现数据库交互。准备好了吗?启航吧!
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
174 2
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
75 1
JavaScript中的原型 保姆级文章一文搞懂
|
6月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
48 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等