JavaScript Map函数的二度补充(附详细代码)

// 初始化方式
const map = new Map();
const mapFromArray = new Map([['key1', 'value1'], ['key2', 'value2']]);
const mapFromMap = new Map(existingMap);

// 核心操作
map.set('name', 'map');       // 添加/更新键值对，返回Map本身（支持链式调用）
map.get('name');              // 获取值，不存在则返回undefined
map.has('name');              // 判断键是否存在，返回布尔值
map.delete('name');           // 删除键值对，返回操作结果
map.clear();                  // 清空所有键值对
map.size;                     // 获取键值对数量（注意：无括号，区别于数组length）

// 缓存函数计算结果（以函数和参数作为复合键）
const cache = new Map();

function compute(keyObj) {
  // 用对象作为键，直接关联计算结果
  if (cache.has(keyObj)) {
    return cache.get(keyObj);
  }
  const result = heavyComputation(keyObj); // 假设的耗时计算
  cache.set(keyObj, result);
  return result;
}

const steps = new Map([
  ['init', () => console.log('初始化')],
  ['process', () => console.log('处理中')],
  ['complete', () => console.log('完成')]
]);

// 按插入顺序执行流程
for (const [name, step] of steps) {
  console.log(`执行步骤：${name}`);
  step();
}

// 对对象数组去重（根据id字段）
const users = [
  { id: 1, name: 'a' },
  { id: 1, name: 'b' },
  { id: 2, name: 'c' }
];

const uniqueUsers = new Map();
users.forEach(user => {
  if (!uniqueUsers.has(user.id)) {
    uniqueUsers.set(user.id, user);
  }
});
[...uniqueUsers.values()]; // 去重后的数组

const pluginConfig = new Map();

// 注册插件配置
pluginConfig.set('logger', { level: 'info' });
pluginConfig.set('router', { mode: 'history' });

// 安全获取配置（避免对象的undefined属性链问题）
function getPluginConfig(name) {
  return pluginConfig.get(name) || defaultConfig;
}

// 函数式转换：Map → 过滤 → 映射 → 数组
const filtered = [...new Map([[1, 'a'], [2, 'b'], [3, 'c']])
  .entries()]
  .filter(([k]) => k > 1)
  .map(([k, v]) => ({ [k]: v }));

// 存储不同用户在不同场景下的权限
const permissions = new Map();

// 复合键：[userId, scene]
permissions.set([1, 'admin'], ['read', 'write']);
permissions.set([1, 'guest'], ['read']);

// 查询权限
function getPermission(userId, scene) {
  // 注意：数组作为键时需引用相同实例，或用字符串序列化
  const key = [...permissions.keys()].find(k => k[0] === userId && k[1] === scene);
  return key ? permissions.get(key) : [];
}

// 优化方案：用字符串序列化复合键
permissions.set(`${1}|admin`, ['read', 'write']); // 键为"1|admin"

class TwoWayMap {
  constructor() {
    this.forward = new Map(); // key → value
    this.backward = new Map(); // value → key
  }

  set(key, value) {
    this.forward.set(key, value);
    this.backward.set(value, key);
  }

  get(key) { return this.forward.get(key); }
  getKey(value) { return this.backward.get(value); }
}

// 应用：中英文映射
const dict = new TwoWayMap();
dict.set('hello', '你好');
dict.get('hello'); // "你好"
dict.getKey('你好'); // "hello"

class TTLMap extends Map {
  set(key, value, ttl = 1000) { // ttl：毫秒
    super.set(key, value);
    // 清除旧定时器
    if (this.timeouts.has(key)) {
      clearTimeout(this.timeouts.get(key));
    }
    // 设置新定时器
    const timeout = setTimeout(() => this.delete(key), ttl);
    this.timeouts.set(key, timeout);
  }

  constructor() {
    super();
    this.timeouts = new Map(); // 存储定时器
  }
}

// 应用：临时缓存
const tempCache = new TTLMap();
tempCache.set('tempData', 'value', 2000); // 2秒后自动删除

class PathMap extends Map {
  // 以数组作为路径键，如 ['a', 'b', 'c']
  setPath(path, value) {
    super.set([...path], value);
  }

  getPath(path) {
    return super.get([...path]);
  }

  // 从嵌套对象初始化
  fromNested(obj, parentPath = []) {
    for (const [key, value] of Object.entries(obj)) {
      const currentPath = [...parentPath, key];
      if (typeof value === 'object' && value !== null) {
        this.fromNested(value, currentPath);
      } else {
        this.setPath(currentPath, value);
      }
    }
  }
}

// 使用
const nestedObj = { a: { b: { c: 1 } }, d: 2 };
const pathMap = new PathMap();
pathMap.fromNested(nestedObj);
pathMap.getPath(['a', 'b', 'c']); // 1（无需判空）

class ReactiveMap extends Map {
  constructor() {
    super();
    this.listeners = new Set(); // 存储更新监听器
  }

  set(key, value) {
    const oldValue = this.get(key);
    if (oldValue !== value) {
      super.set(key, value);
      this.notify(key, value, oldValue); // 触发更新
    }
  }

  notify(key, newValue, oldValue) {
    this.listeners.forEach(listener => {
      listener(key, newValue, oldValue);
    });
  }

  subscribe(listener) {
    this.listeners.add(listener);
    return () => this.listeners.delete(listener); // 返回取消订阅函数
  }
}

// 应用：组件状态管理
const state = new ReactiveMap();
const unsubscribe = state.subscribe((key, value) => {
  console.log(`状态${key}更新为${value}`);
});
state.set('count', 1); // 触发通知

// 统计不同部门不同性别的员工数量
const employees = [
  { dept: 'IT', gender: 'male' },
  { dept: 'IT', gender: 'female' },
  { dept: 'HR', gender: 'female' }
];

const stats = new Map();

for (const emp of employees) {
  const key = `${emp.dept}|${emp.gender}`;
  stats.set(key, (stats.get(key) || 0) + 1);
}

// 结果：Map { "IT|male" => 1, "IT|female" => 1, "HR|female" => 1 }

// 错误方案：用对象存储，键会被转为字符串，导致所有元素共用一个键
const clickCounts = {};
document.querySelectorAll('button').forEach(btn => {
  clickCounts[btn] = 0; // 所有 btn 都会被转为 "[object HTMLButtonElement]"
  btn.onclick = () => clickCounts[btn]++; // 所有按钮的计数会叠加
});

// 正确方案：用 Map 精准关联 DOM 元素
const clickCounts = new Map();
document.querySelectorAll('button').forEach(btn => {
  clickCounts.set(btn, 0);
  btn.onclick = () => clickCounts.set(btn, clickCounts.get(btn) + 1);
});

class OnlineUsers {
  constructor() {
    this.users = new Map(); // 键：用户ID（number），值：用户信息对象
  }

  userOnline(userId, info) {
    this.users.set(userId, info);
  }

  userOffline(userId) {
    this.users.delete(userId);
  }

  getOnlineCount() {
    return this.users.size; // 直接获取，无需计算
  }

  getOnlineUsers() {
    return [...this.users.values()]; // 快速转为数组
  }
}

// 路由规则按注册顺序匹配（先注册的规则优先级高）
const routes = new Map();

// 注册路由（顺序：首页 → 列表 → 详情）
routes.set('/', () => renderHome());
routes.set('/list', () => renderList());
routes.set('/detail/:id', () => renderDetail());

// 匹配当前路径（按注册顺序查找第一个匹配的规则）
function matchRoute(path) {
  for (const [routePath, handler] of routes) {
    if (pathMatches(routePath, path)) { // 假设的匹配函数
      return handler();
    }
  }
}

// 危险方案：用户输入的键可能包含 __proto__
const userConfig = {};
const userInputKey = '__proto__'; // 恶意用户输入
userConfig[userInputKey] = 'polluted'; 
console.log({}.toString); // 可能被污染（取决于环境）

// 安全方案：用 Map 存储，键名无特殊含义
const userConfig = new Map();
userConfig.set(userInputKey, 'safe'); 
console.log(Map.prototype.get('__proto__')); // undefined（无原型污染）

// 从用户权限映射中筛选出“编辑权限”并转为对象
const userPermissions = new Map([
  ['user1', ['read', 'write']],
  ['user2', ['read']],
  ['user3', ['write']]
]);

// 直接转换：Map → 数组 → 过滤 → 转为对象
const canWriteUsers = Object.fromEntries(
  [...userPermissions].filter(([_, permissions]) => permissions.includes('write'))
);
// 结果：{ user1: ['read', 'write'], user3: ['write'] }