如何结合Observable使用JavaScript的Map对象？

我希望把Map对象和Observable结合起来，选择Map是为了提升值的查找与访问性能，但不清楚具体该怎么结合。

以下是我创建的Map示例代码：

const contacts = new Map();
contacts.set('Jessie', {phone: "213-555-1234", address: "123 N 1st Ave"})
contacts.has('Jessie') // true
contacts.get('Hilary') // undefined
contacts.set('Hilary', {phone: "617-555-4321", address: "321 S 2nd St"})
contacts.get('Jessie') // {phone: "213-555-1234", address: "123 N 1st Ave"}
contacts.delete('Raymond') // false
contacts.delete('Jessie') // true
console.log(contacts.size) // 1 

实用结合方案（以RxJS为例） #

结合的核心是把Map的操作转化为可观察数据流，同时保留Map高效查找的特性，下面是几种落地方式：

1. 封装可观察的Map类 #

创建一个包装类，内部维护Map实例，将set/delete等操作转化为Observable事件发射，外部可订阅Map的变化：

import { Subject } from 'rxjs';

class ObservableMap {
  constructor(initialEntries = []) {
    this.map = new Map(initialEntries);
    this.change$ = new Subject(); // 发射变化事件的流
  }

  set(key, value) {
    const oldValue = this.map.get(key);
    this.map.set(key, value);
    this.change$.next({
      type: 'set',
      key,
      oldValue,
      newValue: value
    });
    return this;
  }

  delete(key) {
    const oldValue = this.map.get(key);
    const success = this.map.delete(key);
    if (success) {
      this.change$.next({
        type: 'delete',
        key,
        oldValue
      });
    }
    return success;
  }

  get(key) { return this.map.get(key); }
  has(key) { return this.map.has(key); }
  get size() { return this.map.size; }

  destroy() { this.change$.complete(); }
}

// 使用示例
const observableContacts = new ObservableMap([
  ['Jessie', {phone: "213-555-1234", address: "123 N 1st Ave"}]
]);

// 订阅Map变化
observableContacts.change$.subscribe(change => {
  console.log('Map更新:', change);
});

observableContacts.set('Hilary', {phone: "617-555-4321", address: "321 S 2nd St"});
observableContacts.delete('Jessie');

2. 将Map转为Observable序列 #

用from操作符直接把Map转化为Observable，每个发射项是[key, value]格式的数组：

import { from } from 'rxjs';

const contacts = new Map([
  ['Jessie', {phone: "213-555-1234", address: "123 N 1st Ave"}],
  ['Hilary', {phone: "617-555-4321", address: "321 S 2nd St"}]
]);

// 转换为Observable流
const contacts$ = from(contacts);

contacts$.subscribe(([key, value]) => {
  console.log(`${key}的联系方式:`, value);
});

3. 响应式查找Map值 #

通过Observable监听查询键的变化，自动从Map中获取对应值：

import { of, switchMap } from 'rxjs';

const contacts = new Map([
  ['Jessie', {phone: "213-555-1234", address: "123 N 1st Ave"}],
  ['Hilary', {phone: "617-555-4321", address: "321 S 2nd St"}]
]);

// 模拟查询键的流
const searchKey$ = of('Jessie', 'Hilary');

// 响应式获取对应值
const contact$ = searchKey$.pipe(
  switchMap(key => of(contacts.get(key)))
);

contact$.subscribe(contact => {
  console.log('查询结果:', contact);
});

内容的提问来源于stack exchange，提问作者Tabares