Set 和 WeakSet， Map 和 WeakMap 详解

c_and_v2023-10-19 14:10

当涉及到 JavaScript 中的数据结构时，Set、WeakSet、Map 和 WeakMap 是常用的四种类型。它们在许多方面都非常有用，因此让我们深入探讨它们，理解它们的特点、用途和如何正确使用它们。

Set（集合）

Set 是 JavaScript 中的一种集合数据结构，它允许你存储唯一的值。这意味着 Set 中不会包含重复的值。这个特性使得 Set 在多种情况下非常有用。

创建 Set

你可以使用 new Set() 构造函数来创建一个新的 Set 实例。

javascript 复制代码 
const mySet = new Set();

添加元素

你可以使用 add 方法将元素添加到 Set 中。

javascript 复制代码 
mySet.add(1);
mySet.add(2);
mySet.add(1); // 重复元素不会被添加

删除元素

你可以使用 delete 方法删除 Set 中的元素。

javascript 复制代码 
mySet.delete(1);

遍历 Set

Set 支持多种遍历方法，包括 for...of 循环和 forEach 方法。

javascript 复制代码 
for (const item of mySet) {
  console.log(item);
}

mySet.forEach((item) => {
  console.log(item);
});

使用场景

  1. 去重数组: 使用 Set 可以轻松去除数组中的重复元素。
javascript 复制代码 
const arrayWithDuplicates = [1, 2, 2, 3, 4, 4, 5];
const uniqueValues = new Set(arrayWithDuplicates);
const uniqueArray = Array.from(uniqueValues);
console.log(uniqueArray); // [1, 2, 3, 4, 5]
  1. 跟踪已访问元素: 如果你需要跟踪某些元素是否已经被访问，Set 是一个很好的选择。
javascript 复制代码 
const visitedNodes = new Set();
// 在访问节点后添加到 Set 中
visitedNodes.add(node);
// 检查节点是否已访问
if (visitedNodes.has(node)) {
  // 已访问
}

WeakSet（弱引用集合）

WeakSet 也是一种集合数据结构，但它不同于 Set 的地方在于它只能存储对象，并且存储的对象是弱引用的。这意味着如果没有其他引用指向对象，它们可以被垃圾回收。弱引用集合通常在需要避免内存泄漏的情况下使用。

创建 WeakSet

你可以使用 new WeakSet() 构造函数来创建一个新的 WeakSet 实例。

javascript 复制代码 
const myWeakSet = new WeakSet();

添加对象

你可以使用 add 方法将对象添加到 WeakSet 中。

javascript 复制代码 
const obj1 = { name: "John" };
const obj2 = { name: "Jane" };

myWeakSet.add(obj1);
myWeakSet.add(obj2);

使用场景

  1. DOM 元素引用: WeakSet 可以用于存储 DOM 元素引用，以确保页面中不再使用的元素能够被垃圾回收。
javascript 复制代码 
const elementSet = new WeakSet();
const element = document.querySelector('#myElement');
elementSet.add(element);
  1. 缓存数据: WeakSet 可以用于缓存数据，当相关对象被垃圾回收时，缓存中的数据也会被自动清除。
javascript 复制代码 
const cache = new WeakSet();

function getCachedData(obj) {
  if (cache.has(obj)) {
    return cache.get(obj);
  }

  const data = fetchData(obj);
  cache.add(obj);
  cache.set(obj, data);
  return data;
}

Map（映射）

Map 是一种键值对的数据结构，允许你将任意类型的值与一个键相关联。这使得 Map 在需要建立关联的情况下非常有用。

创建 Map

你可以使用 new Map() 构造函数来创建一个新的 Map 实例。

javascript 复制代码 
const myMap = new Map();

添加键值对

你可以使用 set 方法将键值对添加到 Map 中。

javascript 复制代码 
myMap.set("name", "John");
myMap.set("age", 30);

获取值

你可以使用 get 方法获取与键相关联的值。

javascript 复制代码 
console.log(myMap.get("name")); // "John"

遍历 Map

Map 支持多种遍历方法，包括 for...of 循环和 forEach 方法。

javascript 复制代码 
for (const [key, value] of myMap) {
  console.log(`${key}: ${value}`);
}

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

使用场景

  1. 存储配置选项: Map 可以用于存储配置选项，其中键是选项的名称，值是选项的值。
javascript 复制代码 
const config = new Map();
config.set("theme", "dark");
config.set("fontSize", 16);
  1. 记录对象属性: Map 可以用于记录对象的属性，其中键是属性名，值是属性值。
javascript 复制代码 
const person = new Map();
person.set("name", "John");
person.set("age", 30);

WeakMap（弱引用映射）

WeakMap 是一种键值对数据结构，与 Map 的不同之处在于它的键必须是对象，而值可以是任何数据类型。键是弱引用的，这意味着如果没有其他引用指向键对象，它们可以被垃圾回收。弱引用映射通常在需要与对象关联数据但不影响对象垃圾回收的情况下使用。

创建 WeakMap

你可以使用 new WeakMap() 构造函数来创建一个新的 WeakMap 实例。

javascript 复制代码 
const myWeakMap = new WeakMap();

添加键值对

你可以使用 set 方法将键值对添加到 WeakMap 中。

javascript 复制代码 
const keyObject

 = {};
myWeakMap.set(keyObject, "Value associated with keyObject");

使用场景

  1. 私有对象数据: WeakMap 可用于存储对象的私有数据，这些数据不应该被直接访问。
javascript 复制代码 
const privateData = new WeakMap();

class MyObject {
  constructor() {
    privateData.set(this, { secret: "This is a secret" });
  }

  getSecret() {
    return privateData.get(this).secret;
  }
}
  1. 元数据: WeakMap 可用于存储对象的元数据，而不会阻止垃圾回收。
javascript 复制代码 
const metadata = new WeakMap();
const element = document.querySelector("#myElement");
metadata.set(element, { createdBy: "John" });

Set 和 WeakSet 的比较

Set 和 WeakSet 都用于存储一组唯一的值，但它们之间有几个关键区别：

  1. 数据类型: Set 可以存储任何数据类型的值，而 WeakSet 只能存储对象。

  2. 弱引用: WeakSet 中存储的对象是弱引用的，这意味着如果没有其他引用指向这些对象，它们可以被垃圾回收。Set 中的值没有这种特性，它们会一直存在，直到被显式删除。

  3. 遍历: Set 支持迭代和遍历，而 WeakSet 不支持迭代。这是因为弱引用对象的生命周期不稳定，无法可靠遍历。

  4. 使用场景: Set 适用于需要存储唯一的非对象值的情况，而 WeakSet 适用于需要存储对象的弱引用的情况，通常用于跟踪对象是否存活或存储临时数据。

Map 和 WeakMap 的比较

Map 和 WeakMap 都用于存储键值对，但它们之间也有几个关键区别：

  1. 键类型: Map 可以使用任何数据类型作为键，而 WeakMap 的键必须是对象。

  2. 弱引用: WeakMap 中的键是弱引用的，这意味着如果没有其他引用指向键对象，它们可以被垃圾回收。Map 中的键没有这种特性，它们会一直存在，直到被显式删除。

  3. 遍历: Map 支持迭代和遍历，而 WeakMap 不支持迭代。这是因为弱引用对象的生命周期不稳定，无法可靠遍历。

  4. 使用场景: Map 适用于需要建立键值对映射的情况，而 WeakMap 适用于需要与对象关联数据但不影响对象垃圾回收的情况，通常用于私有对象数据或元数据。

弱引用的重要性

弱引用是 Set 和 Map 中的一个关键概念，以及 WeakSet 和 WeakMap 的主要特点。弱引用允许对象在不再被引用时被垃圾回收，这对于避免内存泄漏和有效管理内存非常重要。

弱引用的使用场景：

  • 缓存数据: 在需要缓存数据的情况下，如果使用普通的 Set 或 Map，数据会一直保留在内存中，即使它们不再被使用。但如果使用 WeakSet 或 WeakMap，当相关对象被垃圾回收时，缓存中的数据也会被自动清除。

  • DOM 元素引用: 当在网页中操作 DOM 元素时，有时需要保持对元素的引用，但当元素不再可见或被移除时，引用应该自动失效，以便释放内存。这是 WeakSet 的一个常见用例。

  • 私有对象数据: 在 JavaScript 中没有直接支持私有属性的机制，但使用 WeakMap 可以存储对象的私有数据，这些数据对外部代码不可见。

  • 元数据: 有时需要将元数据与对象关联，但不希望元数据阻止对象被垃圾回收。在这种情况下，WeakMap 是一个理想的选择。

性能考虑

在使用 Set、WeakSet、Map 和 WeakMap 时，需要考虑性能方面的因素。以下是一些性能相关的考虑：

  1. Set 和 WeakSet 的性能: Set 和 WeakSet 的插入、删除和查找操作通常都是 O(1) 复杂度，这意味着它们在大多数情况下都非常高效。但请注意，由于 WeakSet 的弱引用特性，一些操作可能会更慢，因为需要额外的处理来跟踪对象的生命周期。

  2. Map 和 WeakMap 的性能: Map 和 WeakMap 也具有非常好的性能，插入、删除和查找操作通常都是 O(1) 复杂度。然而，与 Set 和 WeakSet 类似，WeakMap 也需要额外的处理来跟踪对象的生命周期，因此一些操作可能会更慢。

  3. 内存消耗: WeakSet 和 WeakMap 对内存消耗的影响较小，因为它们允许对象在不再被引用时被垃圾回收。在需要大量临时数据存储或缓存的情况下，WeakSet 和 WeakMap 可能是更好的选择。

  4. 遍历性能: Map 和 WeakMap 可以通过迭代和遍历来访问它们的键和值，但 WeakSet 和 WeakMap 不支持迭代。因此，在需要频繁遍历的情况下，应该选择使用 Map。

  5. 数据量和复杂性: 在小型

数据集和简单需求下，性能差异可能不明显。但在处理大型数据集或具有复杂数据关系的情况下，性能可能会成为关键因素。

最佳实践

在选择 Set、WeakSet、Map 或 WeakMap 时，以下是一些最佳实践和注意事项：

  1. 根据需求选择: 首先明确你的需求。如果需要存储唯一的非对象值或键值对，那么 Set 和 Map 是更常见的选择。如果需要弱引用对象或需要与对象关联数据，那么考虑使用 WeakSet 和 WeakMap。

  2. 小心使用 WeakSet 和 WeakMap: WeakSet 和 WeakMap 非常有用，但也容易被误用。确保了解它们的弱引用特性以及何时使用它们。

  3. 避免滥用弱引用: 弱引用允许对象在不再被引用时被垃圾回收，但这也可能导致不期望的行为。确保在正确的上下文中使用弱引用，避免意外的数据丢失。

  4. 性能优化: 在处理大量数据或需要频繁遍历的情况下，进行性能测试和优化是重要的。选择适合你需求的数据结构，并考虑性能因素。

  5. 兼容性考虑: 在使用 Set、WeakSet、Map 和 WeakMap 时，确保你的目标环境支持这些功能。在一些旧版浏览器中，可能需要使用 polyfill 或替代方法。

示例：使用 Set 和 Map 解决问题

为了更具体地理解 Set 和 Map 的应用，让我们看两个示例：一个使用 Set 解决去重问题，另一个使用 Map 解决配置选项的问题。

示例 1：使用 Set 去重

考虑一个包含重复元素的数组，我们想要去除重复元素。使用 Set，这变得非常简单：

javascript 复制代码 
const arrayWithDuplicates = [1, 2, 2, 3, 4, 4, 5];

const uniqueValues = new Set(arrayWithDuplicates);

const uniqueArray = Array.from(uniqueValues);

console.log(uniqueArray); // [1, 2, 3, 4, 5]

Set 自动去除了重复的元素，使我们获得了一个只包含唯一值的数组。

示例 2：使用 Map 存储配置选项

假设我们正在开发一个应用程序，并需要存储一些配置选项，以便用户可以自定义应用程序的外观和行为。我们可以使用 Map 来存储这些选项，其中键是选项的名称，值是选项的值：

javascript 复制代码 
const config = new Map();

config.set("theme", "dark");
config.set("fontSize", 16);
config.set("showBackgroundImage", true);

// 获取和修改配置选项
console.log(config.get("theme")); // "dark"

config.set("fontSize", 18);
console.log(config.get("fontSize")); // 18

使用 Map 来存储配置选项使得代码清晰易懂，并且可以轻松添加、删除和修改选项。

结论

Set、WeakSet、Map 和 WeakMap 是 JavaScript 中有用的数据结构，它们在不同的场景和需求下发挥着重要作用。选择正确的数据结构取决于你的需求，你可以根据是否需要唯一值、是否需要弱引用、是否需要键值对映射等因素来做出选择。了解它们的特点和用途可以帮助你更好地解决问题，并优化代码的性能和可维护性。无论是处理小型数据集还是大型应用程序，这些数据结构都是有用的工具，可以让你更轻松地处理和管理数据。

相关推荐
web行路人27 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00129 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼9211 小时前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
周亚鑫2 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
落魄小二2 小时前
el-table 表格索引不展示问题
javascript·vue.js·elementui
y5236482 小时前
Javascript监控元素样式变化
开发语言·javascript·ecmascript
fruge2 小时前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia2 小时前
vue中如何关闭eslint检测？
前端·javascript·vue.js
嚣张农民2 小时前
JavaScript中Promise分别有哪些函数？
前端·javascript·面试
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解