什么是 observable-map？
Observable-map 是一个可以监测元素变化的 JavaScript Map 类型。当添加、删除或修改元素时，observable-map 会自动通知观察者，使其可以及时得知 Map 内部的变化情况。
Observable-map 支持 ES6 中的所有 Map 方法，同时还支持以下方法：
observe(callback)：添加一个观察者，callback 参数是一个函数，会在添加、删除或修改元素时被调用。unobserve(callback)：移除一个观察者。clearObservers()：移除所有观察者。peek(key)：返回指定 key 的 value，不会触发观察者的回调。
安装 observable-map
使用 npm 安装：
npm install observable-map
在代码中引入 observable-map：
const ObservableMap = require("observable-map");
或者在前端中使用 ES6 模块化：
import ObservableMap from "observable-map";
使用 observable-map
创建 observable-map
创建 observable-map 的方式和普通的 Map 类型一样：
const map = new ObservableMap();
添加观察者
使用 map.observe() 方法添加观察者，示例代码如下：
map.observe((key, value, action) => {
console.log(`${action} element with key ${key} and value ${value}`);
});修改 map 中的元素
observable-map 支持 Map 中的所有方法，并且会自动触发观察者。示例代码如下：
map.set("key1", "value1"); // 触发添加元素的观察者
console.log(map); // 输出 ObservableMap { 'key1' => 'value1' }
map.delete("key1"); // 触发删除元素的观察者
console.log(map); // 输出 ObservableMap {}移除观察者
使用 map.unobserve() 方法移除观察者，示例代码如下：
-- -------------------- ---- ------- ----- -------- - ----- ------ ------- -- - ---------------------- ------- ---- --- ------ --- ----- ----------- -- ---------------------- -- ----- --------------- ---------- -- ---------- ------------------------ -- ----- --------------- ---------- -- ------ ----------------- -- -- ------------- - ------ -- --------- ------ -- -------- -
清除所有观察者
使用 map.clearObservers() 方法清除所有观察者，示例代码如下：
-- -------------------- ---- ------- ----------------- ------ ------- -- - ---------------------- ------- ---- --- ------ --- ----- ----------- --- -------------- --------- -- -------- --------------------- -- ------- -------------- ---------- -- ------ ----------------- -- -- ------------- - ----- -- -------- -
获取指定 key 的值
使用 map.peek() 方法获取指定 key 的值，不会触发观察者的回调。如果 key 不存在，返回 undefined。示例代码如下：
map.set("key1", "value1");
map.set("key2", "value2");
console.log(map.peek("key1")); // 输出 value1
console.log(map.peek("key3")); // 输出 undefined总结
observable-map 是一个非常方便的工具，它可以监测 Map 中元素的变化并及时通知观察者。使用 observable-map 可以大大提高开发效率，减少调试难度。需要注意的是，在使用 observable-map 时，要按照文档规范使用，避免因为不当使用而产生不必要的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f9d3d1de16d83a66ffb