JavaScript中的Map用法完全指南

2025-03-12 17:50

本文主要是介绍JavaScript中的Map用法完全指南,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

《JavaScript中的Map用法完全指南》:本文主要介绍JavaScript中Map用法的相关资料,通过实例讲解了Map的创建、常用方法和迭代方式,还探讨了Map与对象的区别,并通过一个例子展...

引言

JavaScript 中,Map 是一种用于存储键值对的数据结构,具有灵活的键类型和丰富的方法。相较于传统的对象(Object),Map 提供了更高效的键值对操作方式,特别适合处理大量数据和需要频繁操作键值对的场景。本文将详细介绍 Map 的创建、常用方法、迭代方式,并探讨它与对象的区别和实际应用场景。

1. 创建 Map

使用 new Map() 来创建一个空的 Map

const map = new Map();

也可以在创建时初始化 Map,传入一个包含键值对的数组:

const map = new Map([
  ["name", "Alice"],
  ["age", 25]
]);
console.log(map); // 输出 Map(2) { 'name' => 'Alice', 'age' => 25 }

2. Map 和对象的对比

在学习 Map 的基本操作之前,我们先来看一下 Map 与传统对象的区别。

特性Map对象
键的类型任何类型(字符串、对象、函数等)只能是字符串或符号
插入顺序保持插入顺序不保证插入顺序
键值对数量size 属性手动计算(Object.keys().length
原型链污染有,继承 Object.prototype
适用场景频繁操作键值对,大量数据小规模键值对或需要方法时

通过对比可以看出,Map 在键的类型、插入顺序的保持以及键值对操作的效率上,都有显著的优势。

3. Map 的常用方法

3.1 set(key, value)

用于向 Map 添加一个键值对。如果键已经存在,set 会更新其值。

map.set("name", "Bob");
map.set("age", 30);
console.log(map); // 输出 Map(2) { 'name' => 'Bob', 'age' => 30 }

3.2 get(key)

获取指定键的值,如果键不存在,返回 undefined

console.log(map.get("name")); // 输出 'Bob'
coChina编程nsole.log(map.get("gender")); // 输出 undefined

3.3 has(key)

检查 Map 中是否存在指定的键,返回 true 或 false

console.log(map.has("name")); // 输出 true
console.log(map.has("gender")); // 输出 false

3.4 delete(key)

删除指定的键值对,返回 true 如果成功删除,否则返回 false

map.delete("age");
console.log(map); // 输出 Map(1) { 'name' => 'Bob' }

3.5 clear()

清空 Map,删除所有键值对。

map.clear();
console.log(map); // 输出 Map(0) {}

3.6 size

返回 Map 中键值对的数量。

map.set("name", "Alice");
map.set("age", 25);
console.log(map.size); // 输出 2

4. Map 的迭代方法

Map 支持多种迭代方法,可以轻松遍历其中的键值对。

4.1 forEach(callback)

遍历 Map 中的每一个键值对,callback 函数接受三个参数:值、键、Map 本身。

map.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// 输出:
// name: Alice
// age: 25

4.2 keys()

返回 Map 中所有键的迭代器(Iterator),可以用&nbChina编程sp;for...of 来遍历。

for (let key of map.keys()) {
  console.log(key);
}
// 输出:
// name
// age

4.3 values()

返回 Map 中所有值的迭代器(Iterator)。

for (let value ofhttp://www.chinasem.cn map.values()) {
  console.log(value);
}
// 输出:
// Alice
// 25

4.4 entries()

返回 Map 中所有键值对的迭代器,每个键值对会以 [key, value] 的形式返回。

for (let entry of map.entries()) {
  console.log(entry);
}
// 输出:
// [ 'name', 'Alice' ]
// [ 'age', 25 ]

4.5 使用 for...of 遍历 Map

可以直接用 for...of 遍历 Map,默认会调用 entries() 方法,因此会返回 [key, value] 的数组。

for (let [key, value] of map) {
  console.log(`${key}: ${value}`);
}
// 输出:
// name: Alice
// age: 25

5. Map 的应用场景

Map 是一种适合存储键值对的结构,尤其适用于以下场景:

  • 需要使用非字符串类型的键:对象的键只能是字符串或符号,而 Map 可以使用任意数据类型作为键,比如对象、函数等。

    const objKey = { id: 1 };
    const map = new Map();
    map.set(objKey, "Object as key");
    console.log(map.get(objKey)); // 输出 'Object as key'
    
  • 需要频繁操作键值对Map 在键值对的查找、插入、删除操作上比对象性能更好,适合在频繁操作键值对的场景下使用。

  • 需要保持插入顺序Map 会按照插入的顺序存储键值对,因此在遍历时顺序是固定的,而对象则不保证插入顺序。

  • 避免原型链污染:对象的键可能会受 Object.prototype 影响,而 Map 没有原型链污染问题,可以安全地存储任意键。

6. 使用 Map 统计字母出现的次数

我们可以通过一个例子来比较使用 Map 和不使用 Map 的差别。假设我们有一个字符串,需要统计其中每个字母出现的次数。Map 非常适合这种键值对存储的场景。

方法 1:不用 Map,使用普通对象

function countLettersWithObject(str) {
  const letterCounts = {}; // 用对象存储字母出现的次数

  for (let letter of str) {
    if (letterCounts[letter]) {
      letterCounts[letter]++;
    } else {
      letterCounts[letter] = 1;
    }
  }

  return letterCounts;
}

const result = countLettersWithObject("hello world");
console.log(result); // 输出: { h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1 }

方法 2:使用&www.chinasem.cnnbsp;Map

function countLettersWithMap(str) {
  const letterCounts = new Map(); // 用 Map 存储字母出现的次数

  for (let letter of str) {
    if (letterCounts.has(letter)) {
      letterCounts.set(letter, letterCounts.get(letter) + 1);
    } else {
      letterCounts.set(letter, 1);
    }
  }

  return letterCounts;
}

const resultMap = countLettersWithMap("hello world");
console.log(resultMap); // 输出: Map(7) { 'h' => 1, 'e' => 1, 'l' => 3, 'o' => 2, 'w' => 1, 'r' => 1, 'd' => 1 }

7. WeakMap 简介

WeakMap 是 Map 的一种特殊类型,它的键必须是对象,且是弱引用(即不会阻止对象被垃圾回收)。如果某个对象在其他地方不再被引用,那么即使它是 WeakMap 的键,也会被垃圾回收,这样可以防止内存泄漏。

WeakMap 的特点

  • 只接受对象作为键,不支持基本类型。
  • 键是弱引用,不会阻止垃圾回收。
  • 没有 size 属性、clear 方法和遍历方法(forEachkeysvaluesentries),因此不能遍历 WeakMap

使用场景

WeakMap 通常用于私有属性或私有数据的存储,不希望这些数据影响垃圾回收。它适用于对象间的临时映射关系,且在数据无需遍历的情况下使用。

const weakMap = new WeakMap();
let obj = { id: 1 };

weakMap.set(obj, "some value");
console.log(weakMap.get(obj)); // 输出 'some value'

obj = null; // 删除对象的其他引用
// 在此之后,obj 被垃圾回收,WeakMap 中的键值对也会被清除

总结

Map 是一种强大的键值对数据结构,具有灵活的键类型支持、保持插入顺序、丰富的内置方法等优势,适合存储和操作大量键值对。而 WeakMap 则是一种针对对象键的弱引用 Map,在特定场景China编程中帮助管理内存。希望这些内容能帮助你全面理解和应用 Map

到此这篇关于javascript中Map用法的文章就介绍到这了,更多相关js中Map用法内容请搜索编程China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章希望大家以后多多支持China编程(www.chinasem.cn)!

这篇关于JavaScript中的Map用法完全指南的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1153712

相关文章

使用Java将各种数据写入Excel表格的操作示例

《使用Java将各种数据写入Excel表格的操作示例》在数据处理与管理领域,Excel凭借其强大的功能和广泛的应用,成为了数据存储与展示的重要工具,在Java开发过程中,常常需要将不同类型的数据,本文... 目录前言安装免费Java库1. 写入文本、或数值到 Excel单元格2. 写入数组到 Excel表格

Java并发编程之如何优雅关闭钩子Shutdown Hook

《Java并发编程之如何优雅关闭钩子ShutdownHook》这篇文章主要为大家详细介绍了Java如何实现优雅关闭钩子ShutdownHook,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起... 目录关闭钩子简介关闭钩子应用场景数据库连接实战演示使用关闭钩子的注意事项开源框架中的关闭钩子机制1.

Maven中引入 springboot 相关依赖的方式(最新推荐)

《Maven中引入springboot相关依赖的方式(最新推荐)》:本文主要介绍Maven中引入springboot相关依赖的方式(最新推荐),本文给大家介绍的非常详细,对大家的学习或工作具有... 目录Maven中引入 springboot 相关依赖的方式1. 不使用版本管理(不推荐)2、使用版本管理(推

Java 中的 @SneakyThrows 注解使用方法(简化异常处理的利与弊)

《Java中的@SneakyThrows注解使用方法(简化异常处理的利与弊)》为了简化异常处理,Lombok提供了一个强大的注解@SneakyThrows,本文将详细介绍@SneakyThro... 目录1. @SneakyThrows 简介 1.1 什么是 Lombok?2. @SneakyThrows

在 Spring Boot 中实现异常处理最佳实践

《在SpringBoot中实现异常处理最佳实践》本文介绍如何在SpringBoot中实现异常处理,涵盖核心概念、实现方法、与先前查询的集成、性能分析、常见问题和最佳实践,感兴趣的朋友一起看看吧... 目录一、Spring Boot 异常处理的背景与核心概念1.1 为什么需要异常处理?1.2 Spring B

SpringBoot3.4配置校验新特性的用法详解

《SpringBoot3.4配置校验新特性的用法详解》SpringBoot3.4对配置校验支持进行了全面升级,这篇文章为大家详细介绍了一下它们的具体使用,文中的示例代码讲解详细,感兴趣的小伙伴可以参考... 目录基本用法示例定义配置类配置 application.yml注入使用嵌套对象与集合元素深度校验开发

如何在 Spring Boot 中实现 FreeMarker 模板

《如何在SpringBoot中实现FreeMarker模板》FreeMarker是一种功能强大、轻量级的模板引擎,用于在Java应用中生成动态文本输出(如HTML、XML、邮件内容等),本文... 目录什么是 FreeMarker 模板?在 Spring Boot 中实现 FreeMarker 模板1. 环

SpringMVC 通过ajax 前后端数据交互的实现方法

《SpringMVC通过ajax前后端数据交互的实现方法》:本文主要介绍SpringMVC通过ajax前后端数据交互的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价... 在前端的开发过程中,经常在html页面通过AJAX进行前后端数据的交互,SpringMVC的controll

Java中的工具类命名方法

《Java中的工具类命名方法》:本文主要介绍Java中的工具类究竟如何命名,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java中的工具类究竟如何命名?先来几个例子几种命名方式的比较到底如何命名 ?总结Java中的工具类究竟如何命名?先来几个例子JD

Java Stream流使用案例深入详解

《JavaStream流使用案例深入详解》:本文主要介绍JavaStream流使用案例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录前言1. Lambda1.1 语法1.2 没参数只有一条语句或者多条语句1.3 一个参数只有一条语句或者多