当前位置：首页 > 文章列表 > 文章 > 前端 > JSMap与Set数据结构全解析

JSMap与Set数据结构全解析

2025-08-30 23:10:02 0浏览收藏

## JS的Map和Set数据结构详解：高效存储与查找的利器 ES6引入的Map和Set是JavaScript中强大的数据结构，旨在解决传统对象和数组的局限性。Map提供灵活的键值对存储，允许任何数据类型作为键，保持插入顺序，并优化了性能，尤其适用于动态键值对的场景。Set则专注于存储唯一值，常用于数组去重和快速查找，显著提升效率。WeakMap和WeakSet通过弱引用机制避免内存泄漏，是关联对象元数据的理想选择。本文将深入剖析Map和Set的核心特性、常用方法以及在实际开发中的应用，助你掌握这两种高效的数据结构，提升代码质量。

Map和Set是ES6引入的高效数据结构，Map支持任意类型键、保持插入顺序且性能更优，适用于动态键值对存储；Set确保值唯一，常用于数组去重和快速查找。WeakMap与WeakSet通过弱引用避免内存泄漏，适合关联对象元数据。

什么是JS的Map和Set？

JavaScript中的Map和Set，简单来说，它们是ES6引入的两种新的数据结构，用来解决传统JavaScript对象和数组在特定场景下的局限性。Map提供了一种更灵活的键值对存储方式，而Set则专注于存储独一无二的值。在我看来，它们是现代JS开发中提升代码可读性、效率和健壮性的利器。

解决方案

理解Map和Set，关键在于把握它们各自的核心能力。

Map：更强大的键值对集合

在ES6之前，我们通常会用普通JavaScript对象（{}）来模拟键值对存储，也就是所谓的“哈希表”或“字典”。但这玩意儿其实有不少限制，比如对象的键只能是字符串或Symbol，如果你想用一个对象或者函数作为键，那就不行了，它会被隐式转换成字符串，导致意想不到的覆盖。而且，遍历对象的键值对，其顺序在ES2015之前也并非完全可靠。

Map的出现，就是为了解决这些痛点。它是一个真正的键值对集合，它的强大之处在于：

键可以是任何数据类型：你可以用对象、函数、甚至其他Map实例作为键。这打开了非常多的可能性，比如你可以把DOM元素作为键，来存储与该元素相关的特定数据，而不用在DOM元素上直接添加自定义属性。
保持插入顺序：Map会记住键值对的插入顺序，当你遍历Map时，会按照这个顺序来。这对于某些需要顺序敏感的场景非常有用。
性能优化：在频繁添加和删除键值对时，Map的性能通常比普通对象更好。
内置size属性：可以直接获取Map中元素的数量，而不用像对象那样需要Object.keys(obj).length。

常用方法：

new Map(): 创建一个空的Map。
map.set(key, value): 添加或更新一个键值对。
map.get(key): 获取指定键的值。
map.has(key): 检查Map中是否存在某个键。
map.delete(key): 删除指定键的键值对。
map.clear(): 清空Map。
map.size: 返回Map中键值对的数量。

const myMap = new Map();

const objKey = { id: 1 };
const funcKey = () => console.log('I am a key');

myMap.set('name', 'Alice');
myMap.set(objKey, '这是一个对象作为键的值');
myMap.set(funcKey, '这是一个函数作为键的值');
myMap.set(123, '数字键');

console.log(myMap.get('name')); // Alice
console.log(myMap.get(objKey)); // 这是一个对象作为键的值
console.log(myMap.has('name')); // true
console.log(myMap.size); // 4

myMap.delete(123);
console.log(myMap.size); // 3

// 遍历Map
for (const [key, value] of myMap) {
    console.log(`${typeof key}: ${key} => ${value}`);
}
// 输出示例:
// string: name => Alice
// object: [object Object] => 这是一个对象作为键的值
// function: () => console.log('I am a key') => 这是一个函数作为键的值

Set：独一无二值的集合

Set则是一种只存储不重复值的集合。如果你有一个数组，想快速去除重复项，或者需要一个高效的方式来检查某个值是否存在于一个集合中，Set就是你的好帮手。

值唯一性：Set中的每个值都是唯一的。当你尝试添加一个已经存在的值时，Set会忽略这次操作。
保持插入顺序：和Map一样，Set也会记住值的插入顺序。
内置size属性：直接获取Set中元素的数量。

常用方法：

new Set(): 创建一个空的Set。
set.add(value): 添加一个值。如果值已存在，则不进行任何操作。
set.has(value): 检查Set中是否存在某个值。
set.delete(value): 删除指定值。
set.clear(): 清空Set。
set.size: 返回Set中值的数量。

const mySet = new Set();

mySet.add(1);
mySet.add(5);
mySet.add('text');
mySet.add(1); // 再次添加1，不会有任何效果

console.log(mySet.size); // 3
console.log(mySet.has(5)); // true
console.log(mySet.has(2)); // false

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)]; // 快速去重
console.log(uniqueArr); // [1, 2, 3, 4, 5]

// 遍历Set
for (const value of mySet) {
    console.log(value);
}
// 输出示例:
// 1
// 5
// text

Map和Object有什么区别？什么时候该用Map，什么时候用Object？

这真的是一个非常核心的问题，很多初学者会混淆。在我看来，Map和Object虽然都能存储键值对，但它们的“设计哲学”和适用场景是完全不同的。

核心区别：

键的类型：这是最根本的区别。
- Object：键必须是字符串或Symbol。如果你传入其他类型，它会尝试将其转换为字符串（比如obj[1]会变成obj['1']，obj[{}]会变成obj['[object Object]']，这常常导致键冲突）。
- Map：键可以是任何数据类型，包括对象、函数、数字、布尔值等。Map会严格区分这些键。
迭代顺序：
- Object：在ES2015之前，对象的属性遍历顺序是不可靠的。虽然现代JS引擎对于非整数字符串键通常会保持插入顺序，但对于数字字符串键（如'1', '2'）则会按数字大小排序。这在使用上可能会带来一些不确定性。
- Map：明确保证按照键值对的插入顺序进行迭代。这一点在需要保持数据顺序的场景下非常重要。
大小获取：
- Object：没有直接获取属性数量的属性。你需要用Object.keys(obj).length或Object.entries(obj).length。
- Map：有内置的size属性，直接map.size即可获取。
原型链：
- Object：有原型链。这意味着你可能会意外地访问到原型链上的属性（比如toString），或者需要使用hasOwnProperty来判断属性是否是对象自身的。
- Map：没有原型链上的属性，它是一个纯粹的键值对集合，不会有这些“干扰”。
性能：对于频繁的添加、删除操作，尤其是在数据量较大时，Map通常比Object有更好的性能表现。这是因为Map是专门为这种用途优化的。

什么时候用Map？

你需要用非字符串作为键：比如你想把DOM元素、React组件实例、或者其他对象作为键来存储额外数据。这是Map最独有的优势。
你需要保持键值对的插入顺序：比如处理配置项或缓存，希望按照添加的顺序进行处理。
你需要频繁地添加和删除键值对：比如在算法中构建动态查找表。
你需要一个真正的“字典”或“哈希表”：没有原型链的干扰，更纯粹的数据结构。

什么时候用Object？

当你需要一个简单的“记录”或“结构体”：比如表示一个用户的个人信息{ name: 'Alice', age: 30 }，键是固定的、可预测的字符串。
你需要将数据序列化为JSON：Object可以直接通过JSON.stringify转换为JSON字符串，而Map则需要手动转换。
你主要使用硬编码的字符串键：或者键的数量相对固定且较少。
你需要在对象上定义方法：Object是JavaScript面向对象的基础，可以定义方法、继承等。

总结来说，如果你的需求只是一个简单的、键为字符串的静态数据集合，Object可能更简洁方便。但一旦涉及到动态键类型、顺序要求或高性能的增删查改，Map无疑是更现代、更强大的选择。

Set在数组去重和数据查找方面有哪些优势？

Set在处理数组去重和高效数据查找方面，简直是“神来之笔”，极大地简化了代码并提升了性能。在我看来，这是它最直接、最实用的两个应用场景。

1. 数组去重：简洁与高效的完美结合

在Set出现之前，JavaScript数组去重通常需要一些相对繁琐的逻辑，比如：

使用Array.prototype.filter()结合indexOf()：
```
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArrOld = arr.filter((item, index, self) => self.indexOf(item) === index);
console.log(uniqueArrOld); // [1, 2, 3, 4, 5]
```
这种方法虽然能去重，但indexOf在每次迭代中都会遍历数组，导致时间复杂度是O(n²)，对于大型数组来说性能非常差。

使用循环和临时对象/数组：

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArrLoop = [];
const seen = {};
for (const item of arr) {
    if (!seen[item]) {
        uniqueArrLoop.push(item);
        seen[item] = true;
    }
}
console.log(uniqueArrLoop); // [1, 2, 3, 4, 5]

这种方法性能较好（接近O(n)），但代码量相对较多，且需要一个额外的seen对象来辅助。

有了Set之后，数组去重变得异常简洁和高效：

const arr = [1, 2, 2, 3, 4, 4, 5, 'a', 'a', {id:1}, {id:1}];
const uniqueArrNew = [...new Set(arr)]; // 或者 Array.from(new Set(arr))
console.log(uniqueArrNew); // [1, 2, 3, 4, 5, 'a', {id:1}, {id:1}]
// 注意：对象字面量 {id:1} 被视为不同的引用，所以不会被去重。
// Set对于对象是基于引用地址判断唯一性的。

const arrWithObjects = [{id:1, name:'A'}, {id:2, name:'B'}, {id:1, name:'A'}];
// 如果想根据对象的某个属性去重，需要一些额外逻辑
const uniqueObjects = Array.from(new Set(arrWithObjects.map(o => JSON.stringify(o))))
                            .map(s => JSON.parse(s));
console.log(uniqueObjects); // [{id:1, name:'A'}, {id:2, name:'B'}]

[...new Set(arr)]这行代码的优雅之处在于，它首先将数组转换为Set，Set会自动处理重复项，然后通过展开运算符...或者Array.from()将Set再转换回数组。这个过程的时间复杂度接近O(n)，效率非常高。

2. 数据查找/存在性检查：从O(n)到近似O(1)的飞跃

当你需要频繁地检查一个值是否存在于一个大型集合中时，Set的has()方法提供了巨大的性能优势。

传统数组查找：使用Array.prototype.includes()或Array.prototype.indexOf()。

const largeArray = Array.from({ length: 100000 }, (_, i) => i);
console.time('Array includes');
const existsInArray = largeArray.includes(99999); // O(n)
console.timeEnd('Array includes'); // 耗时可能在几毫秒到几十毫秒

includes()方法需要遍历数组，其时间复杂度是O(n)。这意味着数组越大，查找所需的时间就越长。

Set查找：使用Set.prototype.has()。

const largeArray = Array.from({ length: 100000 }, (_, i) => i);
const largeSet = new Set(largeArray); // 首次构建Set需要O(n)

console.time('Set has');
const existsInSet = largeSet.has(99999); // 平均O(1)
console.timeEnd('Set has'); // 耗时通常在0.x毫秒，非常快

Set内部实现了一个哈希表（或类似的结构），使得has()方法的平均时间复杂度接近O(1)。这意味着无论Set有多大，查找一个元素所需的时间几乎是恒定的。

何时利用Set的优势？

批量去重：当你从后端获取大量数据，或者用户输入的数据中可能存在重复项，需要快速清理时。
高效白名单/黑名单检查：比如在一个权限系统中，需要快速判断某个用户ID或资源ID是否在允许访问的列表中。将允许的ID放入Set，然后用has()进行检查，效率极高。
避免重复处理：在一些循环或递归算法中，为了避免对同一个元素进行多次处理，可以维护一个Set来记录已经处理过的元素。

在我看来，Set和Map一样，都是现代JavaScript开发者工具箱中不可或缺的成员。它们不仅仅是语法糖，更是解决特定问题的优化方案。

Map和Set的弱引用版本：WeakMap和WeakSet又是什么？

当我们谈到Map和Set时，通常也会提及它们的“弱引用”版本：WeakMap和WeakSet。这俩兄弟听起来有点神秘，但它们在解决特定内存管理问题时，简直是救星。它们的核心区别在于“弱引用”这三个字。

理解“弱引用”

在JavaScript中，当一个对象被引用时，垃圾回收器（Garbage Collector, GC）就不会回收它，即使它在程序的其他地方已经不再被使用了。这叫“强引用”。如果一个对象只被“弱引用”所持有，那么当没有任何其他强引用指向它时，垃圾回收器就可以把它清理掉，从而释放内存。

WeakMap和WeakSet就是利用了这种弱引用的特性。

WeakMap：弱引用的键值对集合

WeakMap和Map非常相似，都是存储键值对的集合。但它有几个关键的不同点：

键必须是对象：WeakMap的键只能是对象（包括函数），不能是原始值（如字符串、数字、布尔值、Symbol等）。这是因为它要追踪对象的生命周期。
键是弱引用：这是最重要的。WeakMap对键的引用是弱引用。这意味着如果一个对象只被WeakMap作为键引用，而没有其他地方强引用它，那么这个对象就会被垃圾回收。一旦键被回收，WeakMap中对应的键值对也会自动消失。
不可迭代，无size属性：由于键可能随时被垃圾回收，WeakMap的大小是不确定的，因此它没有size属性，也不能被遍历（比如for...of）。你无法获取WeakMap中所有的键或值。
方法受限：WeakMap只有set(), get(), has(), delete()这四个方法。没有clear()。

WeakMap的典型应用场景：

WeakMap主要用于将数据“私有地”关联到对象，而不会阻止这些对象被垃圾回收。

存储对象的私有数据：如果你想为一个对象添加一些额外的数据，但又不希望这些数据成为对象本身的一部分（比如避免枚举），并且希望当这个对象不再被使用时，这些额外数据也能自动被清理，WeakMap是完美的选择。

const privateData = new WeakMap();

class MyClass {
    constructor(id) {
        privateData.set(this, { id: id, count: 0 }); // 将私有数据与实例关联
    }

    increment() {
        const data = privateData.get(this);
        if (data) {
            data.count++;
            console.log(`ID: ${data.id}, Count: ${data.count}`);
        }
    }
}

let instance = new MyClass(101);
instance.increment(); // ID: 101, Count: 1
instance.increment(); // ID: 101, Count: 2

// 当 instance 不再被强引用时，它和 WeakMap 中对应的数据都会被垃圾回收
instance = null; // 移除强引用
// 此时，WeakMap中 {id: 101, count: 2} 这个数据也会被GC清理