JavaScript Map 怎么动态监听数据变化实现通知-js教程-PHP中文网

JavaScript原生Map不支持动态监听，需通过Proxy封装、WeakMap外部关联或响应式框架（如SolidJS、Signals）实现；轮询和修改原型等方法不推荐。

javascript map 怎么动态监听数据变化实现通知

JavaScript 原生 Map 对象本身**不支持动态监听数据变化**，也没有内置的事件机制（如 set、delete 触发回调）。要实现“监听 Map 变化并通知”，必须借助外部手段进行封装或代理。以下是几种实用、可靠的方式：

用 Proxy 封装 Map 实现响应式监听

这是最常用且灵活的方法：用 Proxy 拦截 Map 的关键操作（set、delete、clear），在拦截时触发自定义通知逻辑。

示例：

class ObservableMap extends Map {
  constructor(...args) {
    super(...args);
    this.listeners = new Set();
  }

  onNotify(callback) {
    this.listeners.add(callback);
    return () => this.listeners.delete(callback);
  }

  _notify(type, key, value, oldValue) {
    this.listeners.forEach(cb => cb({ type, key, value, oldValue }));
  }

  set(key, value) {
    const oldValue = this.get(key);
    const result = super.set(key, value);
    this._notify('set', key, value, oldValue);
    return result;
  }

  delete(key) {
    const oldValue = this.get(key);
    const result = super.delete(key);
    if (result) this._notify('delete', key, undefined, oldValue);
    return result;
  }

  clear() {
    const entries = Array.from(this.entries());
    const result = super.clear();
    entries.forEach(([k, v]) => this._notify('delete', k, undefined, v));
    return result;
  }
}

// 使用
const map = new ObservableMap();
map.onNotify(({ type, key, value }) => {
  console.log(`变化: ${type}`, 'key:', key, 'value:', value);
});

map.set('a', 1); // → 变化: set key: a value: 1
map.set('a', 2); // → 变化: set key: a value: 2（oldValue 是 1）
map.delete('a'); // → 变化: delete key: a value: undefined

配合 WeakMap 存储监听器（适合库开发）

如果不想修改原 Map 类型，可用 WeakMap 外部关联监听器，避免内存泄漏，适合构建通用工具函数：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

用 WeakMap 以原始 Map 实例为 key，存储其专属的监听器列表
导出一个 observeMap(map, callback) 函数，返回取消监听方法
所有对目标 Map 的操作需通过你封装的 safeSet/safeDelete 等函数进行（或重写原型——不推荐污染原生对象）

结合现代状态管理思路（如 Signals 或 SolidJS）

在响应式框架生态中，不必手动监听 Map：

SolidJS 的 createStore 支持嵌套响应式结构，Map 可转为普通对象或用 new Map() 配合 store 更新触发 rerender
Preact/React 中，通常把 Map 转成数组（[...map]）或普通对象参与 state；变化时替换整个 Map 实例（利用引用变化触发更新）
Signals（如 @preact/signals）中，可将 Map 包裹为 signal(new Map())，每次 map.value = new Map([...map.value].map(...)) 触发订阅