深入了解 ES6 Map：用法与实践

news2025/1/8 14:46:15

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

文章目录

在ECMAScript 2015（也称为ES6）中，Map对象是引入的一个新的数据结构，用于存储键值对。与普通的对象不同，Map对象的键可以是任意类型，不仅限于字符串或符号。此外，Map对象保持了键值对的插入顺序，这使得它在某些情况下比普通对象更加有用。

创建 Map

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

let myMap = new Map();

你也可以在创建时就初始化一些键值对：

let myMap = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

Map的基本操作

设置值

使用set方法可以给Map对象添加新的键值对：

myMap.set('key4', 'value4');

获取值

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

console.log(myMap.get('key1')); // 输出: value1

检查键是否存在

使用has方法可以检查某个键是否存在于Map对象中：

console.log(myMap.has('key2')); // 输出: true
console.log(myMap.has('key5')); // 输出: false

删除键值对

使用delete方法可以删除指定的键值对：

myMap.delete('key3');
console.log(myMap.has('key3')); // 输出: false

获取 Map 的大小

使用size属性可以获取Map对象中的键值对数量：

console.log(myMap.size); // 输出: 3

清空 Map

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

myMap.clear();
console.log(myMap.size); // 输出: 0

遍历 Map

Map对象是可迭代的，因此可以使用for...of循环或者forEach方法来遍历它。

使用 for…of 循环

for...of循环可以遍历Map对象中的键值对：

for (let [key, value] of myMap) {
  console.log(key + ' = ' + value);
}

使用 forEach 方法

forEach方法也可以遍历Map对象中的键值对：

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

Map 的实际应用

Map对象在许多实际应用场景中都非常有用。例如，它可以用于实现缓存机制，其中键是请求的URL，值是对应的响应数据。另外，当需要根据对象的属性进行分组时，Map对象也非常有用。

let students = [
  { name: 'Alice', grade: 'A' },
  { name: 'Bob', grade: 'B' },
  { name: 'Charlie', grade: 'A' },
  { name: 'David', grade: 'C' }
];

let gradeMap = new Map();

students.forEach(student => {
  if (!gradeMap.has(student.grade)) {
    gradeMap.set(student.grade, []);
  }
  gradeMap.get(student.grade).push(student.name);
});

console.log(gradeMap);
// 输出: Map(3) {"A" => Array(2), "B" => Array(1), "C" => Array(1)}