JavaScript 中的 Map 与 Set 的迭代器失效与并发修改问题

字数 1986

更新时间 2026-01-01 00:46:04

JavaScript 中的 Map 与 Set 的迭代器失效与并发修改问题

描述

在 JavaScript 中，Map 和 Set 作为内建的集合类型，提供了多种迭代方法（如 forEach、for...of、keys()、values()、entries()）。但在迭代过程中，如果对集合进行修改（增加、删除或更新元素），可能会导致迭代器失效，进而引发不可预期的行为，如跳过元素、重复遍历或抛出错误。这个问题在多线程环境（如 Web Workers 中使用 SharedArrayBuffer 时）或复杂的异步操作中尤为突出。本知识点将深入探讨迭代器失效的原因、表现以及如何安全地并发修改。

解题过程

第一步：理解 Map 和 Set 的迭代器工作原理

Map 和 Set 的迭代器是基于集合的“快照”或“实时视图”吗？

Map 和 Set 的迭代器是实时视图：

当我们调用 map.keys()、map.values()、map.entries() 或 set.values() 等方法时，返回的迭代器对象并不会创建集合的副本。
迭代器内部保存了对原始集合的引用，并在每次调用 next() 时实时计算下一个值。
因此，如果在迭代过程中集合被修改，迭代器的行为会受到影响。

例子：

const map = new Map([[1, 'a'], [2, 'b']]);
const iterator = map.values();
console.log(iterator.next().value); // 'a'
map.delete(1);
console.log(iterator.next().value); // 'b'（正常，因为删除的元素已经遍历过）

第二步：迭代中增删元素的典型问题

在遍历集合时修改集合，可能会导致以下问题：

元素被跳过：如果在遍历到某个元素之前删除了它，迭代器可能会跳过下一个元素。
元素重复遍历：如果在遍历过程中增加了元素，新元素可能会被重复遍历或遗漏。
无限循环：在特定情况下，如在 forEach 中增加元素，可能导致无限循环。

例子（元素被跳过）：

const set = new Set([1, 2, 3]);
for (const value of set) {
  console.log(value);
  if (value === 1) {
    set.delete(2); // 删除尚未遍历的元素2
  }
}
// 输出: 1, 3（元素2被跳过）

原因：Set 的迭代器内部使用了一个指针来跟踪当前位置。删除元素2后，集合的内部结构可能调整，导致指针移动异常，从而跳过元素2。

第三步：并发修改的线程安全问题

在 JavaScript 主线程中，由于单线程特性，迭代和修改是顺序执行的，问题相对可控。但在多线程环境（如 Web Workers + SharedArrayBuffer）中，如果多个线程同时迭代和修改同一个集合，会导致数据竞争和未定义行为。

SharedArrayBuffer 与并发修改：

SharedArrayBuffer 允许在多个 Worker 之间共享内存，但 Map 和 Set 本身不是线程安全的数据结构。
如果多个线程同时操作同一个 Map/Set（通过共享内存传递数据），迭代器可能会失效，甚至导致内存错误。

例子（伪代码）：

// 主线程
const sharedBuffer = new SharedArrayBuffer(1024);
const map = new Map();
// 将 map 数据写入 sharedBuffer（简化示例）
// 启动 Worker
worker.postMessage(sharedBuffer);

// Worker 线程
onmessage = function(event) {
  const buffer = event.data;
  // 从 buffer 重建 map（实际中需要序列化/反序列化）
  const map = rebuildMap(buffer);
  for (const [key, value] of map) {
    // 如果主线程此时删除了一个元素，迭代可能出错
  }
};

注意：实际中 Map/Set 不能直接通过 SharedArrayBuffer 共享，需要序列化为可共享格式（如数组）。这里仅为示意并发访问问题。

第四步：安全地并发修改策略

为了避免迭代器失效，我们可以采用以下策略：

策略1：使用快照

在迭代前创建集合的副本，迭代副本，修改原集合。
优点：简单安全，适用于小型集合。
缺点：内存开销大，不适用于大型集合。

例子：

const map = new Map([[1, 'a'], [2, 'b']]);
const snapshot = new Map(map); // 创建快照
for (const [key, value] of snapshot) {
  if (key === 1) {
    map.delete(2); // 安全地修改原集合
  }
}

策略2：收集修改，迭代后执行

在迭代过程中记录需要进行的修改（如待删除的键），迭代结束后再执行。
优点：避免迭代器失效，内存效率高。
缺点：需要额外的数据结构记录修改。

例子：

const set = new Set([1, 2, 3]);
const toDelete = [];
for (const value of set) {
  if (value === 1) {
    toDelete.push(2); // 记录待删除元素
  }
}
toDelete.forEach(v => set.delete(v)); // 迭代后执行删除

策略3：使用不可变数据结构

使用如 Immutable.js 库提供的不可变 Map/Set，它们天生支持安全并发。
优点：线程安全，易于推理。
缺点：需要引入额外库，API 与原生不同。

例子：

import { Map } from 'immutable';
let map = Map({ a: 1, b: 2 });
map.forEach((value, key) => {
  if (key === 'a') {
    map = map.delete('b'); // 返回新 Map，原 Map 不变
  }
});

策略4：在 Web Workers 中避免共享集合

在多线程环境中，使用消息传递（postMessage）代替共享内存，避免直接操作共享集合。
将集合数据序列化为简单数组或对象进行传递，在每个线程中维护独立副本。

例子：

// 主线程
const mapData = Array.from(map.entries());
worker.postMessage(mapData);

// Worker 线程
onmessage = function(event) {
  const map = new Map(event.data); // 创建独立 Map
  // 安全迭代
};

第五步：V8 引擎中的实现细节（进阶）

在 V8 引擎中，Map 和 Set 的迭代器失效问题与底层数据结构相关：

哈希表设计：Map/Set 通常基于哈希表实现。当删除元素时，哈希表可能进行“压缩”操作，移动其他元素填补空缺，导致迭代器指针错位。
迭代器状态：迭代器内部保存了当前桶（bucket）的索引和位置。如果底层哈希表在迭代期间重建（如扩容），迭代器可能指向无效内存地址。
V8 的优化：为减少失效问题，V8 在某些情况下会延迟哈希表的重组，但无法完全避免。

理解这些底层细节有助于预见问题，但实际编程中应依赖前述策略而非引擎行为。

总结

Map 和 Set 的迭代器失效源于它们的实时视图特性，在单线程顺序修改中可能导致元素跳过或重复，在多线程并发中可能导致更严重错误。通过快照、延迟修改、不可变数据结构或消息传递等策略，可以安全地处理并发修改。在实际应用中，应根据集合大小、性能要求和并发场景选择合适策略。

相似文章

全屏