JavaScript中的Map用法完全指南

更新时间：2025年03月12日 11:25:16 作者：szial

这篇文章主要介绍了JavaScript中Map用法的相关资料,通过实例讲解了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'
console.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），可以用 for...of 来遍历。

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

4.3 values()

返回 Map 中所有值的迭代器（Iterator）。

for (let value of 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：使用 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 方法和遍历方法（forEach、keys、values、entries），因此不能遍历 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，在特定场景中帮助管理内存。希望这些内容能帮助你全面理解和应用 Map！

到此这篇关于JavaScript中Map用法的文章就介绍到这了,更多相关JS中Map用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

SpringBoot整合Hutool实现文件上传的使用示例
文件上传在项目经常会用到,本文主要介绍了SpringBoot整合Hutool实现文件上传的使用示例,具有一定的参考价值,感兴趣的可以了解一下
2023-11-11
mybatis源码解读之executor包懒加载功能
这篇文章主要介绍了mybatis源码解读之executor包懒加载功能，mybatis的懒加载的实现由executor包的loader子包支持，下面文章详细内容需要的小伙伴可以参考一下
2022-02-02
java抓取鼠标事件和鼠标滚轮事件示例
这篇文章主要介绍了java抓取鼠标事件和鼠标滚轮事件示例,需要的朋友可以参考下
2014-05-05
Java多线程之FutureTask的介绍及使用
之前介绍了线程池相关的对象,Runable Callable与Future,下面介绍FutureTask的作用,它的特性是怎样的呢,需要的朋友可以参考下
2021-06-06
详解SpringMVC拦截器配置及使用方法
本篇文章主要介绍了SpringMVC拦截器配置及使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
PageHelper插件实现服务器端分页功能
这篇文章主要为大家详细介绍了PageHelper插件实现服务器端分页功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
SpringBoot中使用Swagger的超简单方法
大家一致认为springBoot使用swagger太麻烦了，每次都需要编写config，今天小编告诉大家一种超简单配置方法，教大家如何整合swagger，感兴趣的朋友跟随小编一起看看吧
2021-07-07
分析ThreadLocal内存泄漏问题
ThreadLocal的作用是提供线程内的局部变量，这种变量在线程生命周期内起作用，减少同一个线程内多个函数或者组件之间一些公共变量传递的复杂度，但是如果滥用ThreadLocal可能会导致内存泄漏，所以本文将为大家分析ThreadLocal内存泄漏问题
2023-07-07
Spring通过配置文件和注解实现属性赋值
这篇文章主要介绍了Spring通过配置文件和注解实现属性赋值,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-04-04
servlet 解决乱码问题
这篇文章主要介绍了servlet 解决乱码问题 ,需要的朋友可以参考下
2015-04-04