93 - 内置对象 - Map 对象 - 映射的遍历与操作

前端 - Javascript 《内置对象 - Map 对象 - 映射的遍历与操作》

在 JavaScript 的世界里，Map 对象就像是一个超级强大的收纳盒，它可以帮助我们高效地存储和管理键值对数据。今天，我们就来深入探讨一下 Map 对象的遍历与操作，看看这个“收纳盒”到底有多厉害！

一、Map 对象简介

在正式开始遍历和操作之前，我们先来简单了解一下 Map 对象。Map 对象是 JavaScript 中的一种内置对象，它允许你存储键值对，其中键和值可以是任意类型。与普通对象不同的是，Map 对象可以使用各种数据类型作为键，而不仅仅是字符串或符号。

创建 Map 对象

创建一个 Map 对象非常简单，只需要使用 new Map() 构造函数即可：

// 创建一个空的 Map 对象
const myMap = new Map();
// 创建一个带有初始值的 Map 对象
const anotherMap = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

二、Map 对象的基本操作

1. 添加元素

使用 set() 方法可以向 Map 对象中添加新的键值对：

const myMap = new Map();
myMap.set('name', 'John');
myMap.set(1, 'One');

2. 获取元素

使用 get() 方法可以根据键获取对应的值：

const name = myMap.get('name'); // 'John'
const one = myMap.get(1); // 'One'

3. 检查元素是否存在

使用 has() 方法可以检查 Map 对象中是否存在指定的键：

const hasName = myMap.has('name'); // true
const hasAge = myMap.has('age'); // false

4. 删除元素

使用 delete() 方法可以删除 Map 对象中指定的键值对：

myMap.delete('name');
const hasNameAfterDelete = myMap.has('name'); // false

5. 清空 Map 对象

使用 clear() 方法可以清空 Map 对象中的所有键值对：

myMap.clear();
const sizeAfterClear = myMap.size; // 0

三、Map 对象的遍历

1. 使用 for...of 循环

for...of 循环是遍历 Map 对象最常用的方法之一，它可以同时获取键和值：

const myMap = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);
for (const [key, value] of myMap) {
  console.log(key, value);
}

2. 使用 forEach() 方法

forEach() 方法可以对 Map 对象中的每个键值对执行一次提供的函数：

myMap.forEach((value, key) => {
  console.log(key, value);
});

3. 分别遍历键和值

使用 keys()、values() 和 entries() 方法可以分别获取 Map 对象的键、值和键值对：

// 遍历键
for (const key of myMap.keys()) {
  console.log(key);
}
// 遍历值
for (const value of myMap.values()) {
  console.log(value);
}
// 遍历键值对
for (const [key, value] of myMap.entries()) {
  console.log(key, value);
}

四、Map 对象遍历与操作的实用案例

1. 统计数组中元素的出现次数

const arr = [1, 2, 3, 1, 2, 1];
const countMap = new Map();
for (const num of arr) {
  if (countMap.has(num)) {
    countMap.set(num, countMap.get(num) + 1);
  } else {
    countMap.set(num, 1);
  }
}
for (const [num, count] of countMap) {
  console.log(`${num} 出现了 ${count} 次`);
}

2. 实现缓存功能

const cache = new Map();
function getData(key) {
  if (cache.has(key)) {
    console.log('从缓存中获取数据');
    return cache.get(key);
  }
  // 模拟从服务器获取数据
  const data = `Data for ${key}`;
  cache.set(key, data);
  console.log('从服务器获取数据');
  return data;
}
getData('key1'); // 从服务器获取数据
getData('key1'); // 从缓存中获取数据

五、总结

通过以上的介绍，我们可以看到 Map 对象在存储和管理键值对数据方面非常强大，它的遍历和操作方法也十分灵活多样。希望大家在实际开发中能够充分利用 Map 对象的这些特性，提高代码的效率和可读性。