JavaScript 中的 Map 映射：从基础到实践

编程随想▿

于 2025-08-02 10:26:39 发布

阅读量538

点赞数 11

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript map 数组

本文链接：https://blog.csdn.net/2301_81137804/article/details/149854525

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

四、Map 与数组的 map() 方法的对比

一、Map 的核心概念

1. 什么是 Map？

Map 是一种键值对集合，它的键和值可以是任意类型（包括对象、函数等）。与传统的 Object 不同，Map 的键可以是任意类型（而不仅仅是字符串或 Symbol），并且不会继承原型链上的属性，因此更加灵活和安全。

2. Map 与 Object 的区别

特性	Map	Object
键的类型	任意类型（对象、数字等）	字符串或 `Symbol`
原型链	无原型链属性	有原型链属性
遍历支持	支持（如 `for...of`）	需手动实现遍历逻辑
内存管理	更适合动态数据操作	适合静态数据存储
性能	插入和删除操作更高效	适合频繁读取操作

二、Map 的常用方法

1. 创建 Map 实例

// 方法1：直接创建空Map
const map = new Map();

// 方法2：通过数组初始化
const map = new Map([
  ['name', 'Alice'],
  [1, 'Number One']
]);

2. 添加和修改数据

// set(key, value)：添加或更新键值对
map.set('age', 25);
map.set({ id: 1 }, 'User1'); // 键为对象

// 链式操作
map.set('city', 'Beijing').set('country', 'China');

3. 获取数据

// get(key)：获取指定键的值
const name = map.get('name'); // 返回 'Alice'

// has(key)：检查键是否存在
const hasAge = map.has('age'); // 返回 true

// size：获取键值对数量
console.log(map.size); // 输出 4

4. 删除和清空数据

// delete(key)：删除指定键值对
map.delete('age'); // 返回 true（成功）

// clear()：清空所有键值对
map.clear();

5. 遍历 Map

// entries()：返回键值对迭代器
for (const [key, value] of map.entries()) {
  console.log(key, value);
}

// keys()：返回键的迭代器
for (const key of map.keys()) {
  console.log(key);
}

// values()：返回值的迭代器
for (const value of map.values()) {
  console.log(value);
}

三、Map 的使用场景

1. 动态键值对管理

当需要动态添加或删除键值对时，Map 是更优的选择。例如，管理用户信息：

const userMap = new Map();
userMap.set('id', 1001);
userMap.set('name', 'Bob');
console.log(userMap.get('id')); // 输出 1001

2. 使用非字符串键

Map 允许使用对象、函数等作为键，这在某些场景下非常有用。例如，将 DOM 元素作为键：

const element = document.getElementById('myDiv');
const map = new Map();
map.set(element, { count: 0 });
console.log(map.get(element)); // 输出 { count: 0 }

3. 避免原型链冲突

Object 的键会继承自原型链，可能导致意外的键冲突。而 Map 是一个独立的集合，完全避免了这一问题。

四、Map 与数组的 `map()` 方法的对比

1. 数组的 `map()` 方法

数组的 map() 是 JavaScript 内置方法，用于将数组中的每个元素转换为新的值，并返回一个新数组。其核心特性是不修改原数组，而是生成一个新数组。

const numbers = [1, 2, 3];
const squares = numbers.map(x => x * x);
console.log(squares); // 输出 [1, 4, 9]

2. 两者的核心区别

特性	Map（数据结构）	数组的 map() 方法
数据类型	键值对集合	数组
功能	存储和操作键值对	转换数组元素
返回值	Map 实例	新数组
是否修改原数据	不修改原 Map	不修改原数组
适用场景	动态键值对管理	数据转换和映射

五、实际应用案例

1. 使用 Map 存储用户信息

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

// 构建 Map：以用户 ID 为键
const userMap = new Map(users.map(user => [user.id, user]));
console.log(userMap.get(1).name); // 输出 'Alice'

2. 使用数组的 map() 转换数据

const prices = [10, 20, 30];
const discounts = prices.map(price => price * 0.9);
console.log(discounts); // 输出 [9, 18, 27]

六、总结

Map 是 JavaScript 中灵活且强大的键值对集合，适用于需要动态管理数据、使用非字符串键或避免原型链冲突的场景。
数组的 map() 方法 是一种函数式编程工具，用于转换数组元素，生成新数组。
根据具体需求选择合适的方法：需要存储键值对时使用 Map，需要转换数组元素时使用 map()。

通过掌握 Map 和 map() 方法，你可以更高效地处理 JavaScript 中的数据操作任务。建议在实际开发中多加练习，体会两者的不同应用场景和优势。