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

// 核心操作
map.set('name', 'map');       // 添加/更新鍵值對，返回Map本身（支持鏈?zhǔn)秸{(diào)用）
map.get('name');              // 獲取值，不存在則返回undefined
map.has('name');              // 判斷鍵是否存在，返回布爾值
map.delete('name');           // 刪除鍵值對，返回操作結(jié)果
map.clear();                  // 清空所有鍵值對
map.size;                     // 獲取鍵值對數(shù)量（注意：無括號，區(qū)別于數(shù)組length）

// 緩存函數(shù)計算結(jié)果（以函數(shù)和參數(shù)作為復(fù)合鍵）
const cache = new Map();

function compute(keyObj) {
  // 用對象作為鍵，直接關(guān)聯(lián)計算結(jié)果
  if (cache.has(keyObj)) {
    return cache.get(keyObj);
  }
  const result = heavyComputation(keyObj); // 假設(shè)的耗時計算
  cache.set(keyObj, result);
  return result;
}

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

// 按插入順序執(zhí)行流程
for (const [name, step] of steps) {
  console.log(`執(zhí)行步驟：${name}`);
  step();
}

// 對對象數(shù)組去重（根據(jù)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()]; // 去重后的數(shù)組

const pluginConfig = new Map();

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

// 安全獲取配置（避免對象的undefined屬性鏈問題）
function getPluginConfig(name) {
  return pluginConfig.get(name) || defaultConfig;
}

// 函數(shù)式轉(zhuǎn)換：Map → 過濾 → 映射 → 數(shù)組
const filtered = [...new Map([[1, 'a'], [2, 'b'], [3, 'c']])
  .entries()]
  .filter(([k]) => k > 1)
  .map(([k, v]) => ({ [k]: v }));

// 存儲不同用戶在不同場景下的權(quán)限
const permissions = new Map();

// 復(fù)合鍵：[userId, scene]
permissions.set([1, 'admin'], ['read', 'write']);
permissions.set([1, 'guest'], ['read']);

// 查詢權(quán)限
function getPermission(userId, scene) {
  // 注意：數(shù)組作為鍵時需引用相同實例，或用字符串序列化
  const key = [...permissions.keys()].find(k => k[0] === userId && k[1] === scene);
  return key ? permissions.get(key) : [];
}

// 優(yōu)化方案：用字符串序列化復(fù)合鍵
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); }
}

// 應(yīng)用：中英文映射
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));
    }
    // 設(shè)置新定時器
    const timeout = setTimeout(() => this.delete(key), ttl);
    this.timeouts.set(key, timeout);
  }

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

// 應(yīng)用：臨時緩存
const tempCache = new TTLMap();
tempCache.set('tempData', 'value', 2000); // 2秒后自動刪除

class PathMap extends Map {
  // 以數(shù)組作為路徑鍵，如 ['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(); // 存儲更新監(jiān)聽器
  }

  set(key, value) {
    const oldValue = this.get(key);
    if (oldValue !== value) {
      super.set(key, value);
      this.notify(key, value, oldValue); // 觸發(fā)更新
    }
  }

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

  subscribe(listener) {
    this.listeners.add(listener);
    return () => this.listeners.delete(listener); // 返回取消訂閱函數(shù)
  }
}

// 應(yīng)用：組件狀態(tài)管理
const state = new ReactiveMap();
const unsubscribe = state.subscribe((key, value) => {
  console.log(`狀態(tài)${key}更新為${value}`);
});
state.set('count', 1); // 觸發(fā)通知

// 統(tǒng)計不同部門不同性別的員工數(shù)量
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);
}

// 結(jié)果：Map { "IT|male" => 1, "IT|female" => 1, "HR|female" => 1 }

// 錯誤方案：用對象存儲，鍵會被轉(zhuǎn)為字符串，導(dǎo)致所有元素共用一個鍵
const clickCounts = {};
document.querySelectorAll('button').forEach(btn => {
  clickCounts[btn] = 0; // 所有 btn 都會被轉(zhuǎn)為 "[object HTMLButtonElement]"
  btn.onclick = () => clickCounts[btn]++; // 所有按鈕的計數(shù)會疊加
});

// 正確方案：用 Map 精準(zhǔn)關(guān)聯(lián) 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()]; // 快速轉(zhuǎn)為數(shù)組
  }
}

// 路由規(guī)則按注冊順序匹配（先注冊的規(guī)則優(yōu)先級高）
const routes = new Map();

// 注冊路由（順序：首頁 → 列表 → 詳情）
routes.set('/', () => renderHome());
routes.set('/list', () => renderList());
routes.set('/detail/:id', () => renderDetail());

// 匹配當(dāng)前路徑（按注冊順序查找第一個匹配的規(guī)則）
function matchRoute(path) {
  for (const [routePath, handler] of routes) {
    if (pathMatches(routePath, path)) { // 假設(shè)的匹配函數(shù)
      return handler();
    }
  }
}

// 危險方案：用戶輸入的鍵可能包含 __proto__
const userConfig = {};
const userInputKey = '__proto__'; // 惡意用戶輸入
userConfig[userInputKey] = 'polluted'; 
console.log({}.toString); // 可能被污染（取決于環(huán)境）

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

// 從用戶權(quán)限映射中篩選出“編輯權(quán)限”并轉(zhuǎn)為對象
const userPermissions = new Map([
  ['user1', ['read', 'write']],
  ['user2', ['read']],
  ['user3', ['write']]
]);

// 直接轉(zhuǎn)換：Map → 數(shù)組 → 過濾 → 轉(zhuǎn)為對象
const canWriteUsers = Object.fromEntries(
  [...userPermissions].filter(([_, permissions]) => permissions.includes('write'))
);
// 結(jié)果：{ user1: ['read', 'write'], user3: ['write'] }