ES6 Map数据结构的典型使用场景与实战应用

// Map支持任意类型作为键
const map = new Map();
const objKey = { name: 'trae' };
const funcKey = function() { return 'ide'; };
 
map.set(objKey, '对象键值');
map.set(funcKey, '函数键值');
map.set(NaN, '甚至可以是NaN');
 
console.log(map.get(objKey)); // "对象键值"
console.log(map.get(NaN));  // "甚至可以是NaN"

// 使用TRAE IDE的性能分析工具实测
const iterations = 100000;
 
// Map性能测试
console.time('Map插入');
const map = new Map();
for(let i = 0; i < iterations; i++) {
    map.set(i, i * 2);
}
console.timeEnd('Map插入'); // 约2.5ms
 
// Object性能测试  
console.time('Object插入');
const obj = {};
for(let i = 0; i < iterations; i++) {
    obj[i] = i * 2;
}
console.timeEnd('Object插入'); // 约3.8ms
 
// size获取对比
console.time('Map.size');
map.size;
console.timeEnd('Map.size'); // 0.0001ms
 
console.time('Object.keys长度');
Object.keys(obj).length;
console.timeEnd('Object.keys长度'); // 1.2ms

// 使用对象作为键，这是Object无法实现的
const userCache = new Map();
 
class UserCache {
    static set(user, data) {
        // user对象直接作为键，无需序列化
        userCache.set(user, {
            data,
            timestamp: Date.now(),
            expires: Date.now() + 300000 // 5分钟过期
        });
    }
    
    static get(user) {
        const cached = userCache.get(user);
        if (cached && Date.now() < cached.expires) {
            return cached.data;
        }
        userCache.delete(user);
        return null;
    }
}
 
// 使用示例
const currentUser = { id: 1, name: '开发者' };
UserCache.set(currentUser, { permissions: ['read', 'write'] });
 
// TRAE IDE智能提示：当输入UserCache.时会自动提示get/set方法

// 构建多维度索引，提升查询效率
class DataIndex {
    constructor() {
        this.indexes = new Map();
    }
    
    // 创建索引
    createIndex(field) {
        this.indexes.set(field, new Map());
    }
    
    // 添加索引数据
    addToIndex(field, value, record) {
        const fieldIndex = this.indexes.get(field);
        if (!fieldIndex.has(value)) {
            fieldIndex.set(value, new Set());
        }
        fieldIndex.get(value).add(record);
    }
    
    // 快速查询
    query(field, value) {
        return this.indexes.get(field)?.get(value) || new Set();
    }
}
 
// 实际应用：前端表格快速筛选
const tableIndex = new DataIndex();
tableIndex.createIndex('department');
tableIndex.createIndex('status');
 
// 批量数据索引化（TRAE IDE支持批量重构）
users.forEach(user => {
    tableIndex.addToIndex('department', user.dept, user);
    tableIndex.addToIndex('status', user.status, user);
});
 
// 毫秒级查询
const activeUsers = tableIndex.query('status', 'active');

// 专业的事件总线实现
class EventBus {
    constructor() {
        this.listeners = new Map();
    }
    
    on(event, callback, context = null) {
        if (!this.listeners.has(event)) {
            this.listeners.set(event, new Set());
        }
        
        const listener = { callback, context };
        this.listeners.get(event).add(listener);
        
        // 返回取消订阅函数
        return () => this.off(event, callback, context);
    }
    
    off(event, callback, context = null) {
        const listeners = this.listeners.get(event);
        if (!listeners) return;
        
        for (const listener of listeners) {
            if (listener.callback === callback && listener.context === context) {
                listeners.delete(listener);
                break;
            }
        }
        
        if (listeners.size === 0) {
            this.listeners.delete(event);
        }
    }
    
    emit(event, ...args) {
        const listeners = this.listeners.get(event);
        if (!listeners) return;
        
        listeners.forEach(({ callback, context }) => {
            try {
                callback.apply(context, args);
            } catch (error) {
                console.error(`事件${event}处理错误:`, error);
            }
        });
    }
}
 
// 使用TRAE IDE调试事件系统时，可以设置断点查看listeners Map的实时状态

// 高效的数据去重和频率统计
class DataAnalyzer {
    static getUniqueItems(array) {
        return [...new Set(array)];
    }
    
    static getFrequencyMap(array) {
        const frequency = new Map();
        array.forEach(item => {
            frequency.set(item, (frequency.get(item) || 0) + 1);
        });
        return frequency;
    }
    
    static getTopKFrequent(array, k) {
        const frequency = this.getFrequencyMap(array);
        return [...frequency.entries()]
            .sort(([,a], [,b]) => b - a)
            .slice(0, k);
    }
}
 
// 实战：分析用户行为数据
const userActions = ['click', 'scroll', 'click', 'hover', 'scroll', 'click'];
const topActions = DataAnalyzer.getTopKFrequent(userActions, 2);
console.log('最热门操作:', topActions); // [['click', 3], ['scroll', 2]]

// LRU缓存实现，Map的天然有序性完美适配
class LRUCache {
    constructor(capacity) {
        this.capacity = capacity;
        this.cache = new Map();
    }
    
    get(key) {
        if (!this.cache.has(key)) return -1;
        
        const value = this.cache.get(key);
        // 删除后重新插入，移动到末尾
        this.cache.delete(key);
        this.cache.set(key, value);
        
        return value;
    }
    
    put(key, value) {
        if (this.cache.has(key)) {
            this.cache.delete(key);
        } else if (this.cache.size >= this.capacity) {
            // 删除最久未使用的（Map的第一个元素）
            const firstKey = this.cache.keys().next().value;
            this.cache.delete(firstKey);
        }
        
        this.cache.set(key, value);
    }
    
    // TRAE IDE可视化：查看缓存命中率
    getHitRate() {
        return this.hitCount / (this.hitCount + this.missCount) || 0;
    }
}
 
// 使用示例：API响应缓存
const apiCache = new LRUCache(100); // 缓存100个响应

// 高性能状态管理器 - 专为大型应用设计
class AdvancedStateManager {
    constructor() {
        this.state = new Map();
        this.computed = new Map();
        this.watchers = new Map();
        this.middleware = [];
    }
    
    // 设置状态，支持路径式访问
    set(path, value) {
        const keys = Array.isArray(path) ? path : path.split('.');
        const lastKey = keys.pop();
        
        let current = this.state;
        for (const key of keys) {
            if (!current.has(key)) {
                current.set(key, new Map());
            }
            current = current.get(key);
        }
        
        const oldValue = current.get(lastKey);
        current.set(lastKey, value);
        
        // 触发计算属性更新
        this.updateComputed(keys.concat(lastKey));
        
        // 触发监听器
        this.notifyWatchers(keys.concat(lastKey), value, oldValue);
    }
    
    // 获取状态，支持默认值
    get(path, defaultValue) {
        const keys = Array.isArray(path) ? path : path.split('.');
        
        let current = this.state;
        for (const key of keys) {
            if (!current || !current.has(key)) {
                return defaultValue;
            }
            current = current.get(key);
        }
        
        return current;
    }
    
    // 计算属性缓存
    computed(path, computeFn) {
        this.computed.set(path, {
            compute: computeFn,
            cache: new Map(),
            dependencies: new Set()
        });
        
        return () => {
            const cache = this.computed.get(path).cache;
            if (cache.has('value')) {
                return cache.get('value');
            }
            
            const value = computeFn.call(this);
            cache.set('value', value);
            return value;
        };
    }
    
    // 监听状态变化
    watch(path, callback) {
        if (!this.watchers.has(path)) {
            this.watchers.set(path, new Set());
        }
        this.watchers.get(path).add(callback);
        
        // 返回取消监听函数
        return () => {
            this.watchers.get(path).delete(callback);
        };
    }
    
    // 批量更新，优化性能
    batchUpdate(updates) {
        const notifications = [];
        
        updates.forEach(({ path, value }) => {
            const oldValue = this.get(path);
            this.set(path, value);
            notifications.push({ path, value, oldValue });
        });
        
        // 批量通知，避免重复计算
        notifications.forEach(({ path, value, oldValue }) => {
            this.notifyWatchers(path.split('.'), value, oldValue);
        });
    }
    
    // 调试辅助：获取状态树
    getStateTree() {
        const tree = {};
        this.buildTree(this.state, tree);
        return tree;
    }
    
    buildTree(map, target) {
        for (const [key, value] of map) {
            if (value instanceof Map) {
                target[key] = {};
                this.buildTree(value, target[key]);
            } else {
                target[key] = value;
            }
        }
    }
}
 
// 使用示例：复杂应用状态管理
const store = new AdvancedStateManager();
 
// 设置嵌套状态
store.set('user.profile.name', 'TRAE用户');
store.set('user.profile.level', 5);
store.set('app.theme', 'dark');
 
// 计算属性：用户等级描述
const levelDescription = store.computed('user.levelDesc', function() {
    const level = this.get('user.profile.level');
    const levels = ['新手', '初级', '中级', '高级', '专家', '大师'];
    return levels[level] || '未知等级';
});
 
// 监听状态变化
const unwatch = store.watch('user.profile', (newVal, oldVal) => {
    console.log('用户信息更新:', newVal, oldVal);
});
 
// 批量更新，优化性能
store.batchUpdate([
    { path: 'user.profile.name', value: '新用户名' },
    { path: 'user.profile.level', value: 6 },
    { path: 'app.theme', value: 'light' }
]);

// 1. 及时清理不需要的Map
class MemoryOptimizedCache {
    constructor() {
        this.cache = new Map();
        this.accessTime = new Map();
        this.maxSize = 1000;
    }
    
    set(key, value) {
        if (this.cache.size >= this.maxSize) {
            this.cleanup();
        }
        
        this.cache.set(key, value);
        this.accessTime.set(key, Date.now());
    }
    
    cleanup() {
        const now = Date.now();
        const toDelete = [];
        
        for (const [key, accessTime] of this.accessTime) {
            if (now - accessTime > 300000) { // 5分钟未访问
                toDelete.push(key);
            }
        }
        
        toDelete.forEach(key => {
            this.cache.delete(key);
            this.accessTime.delete(key);
        });
    }
}

// 高效的Map迭代方式对比
const map = new Map(Array.from({length: 10000}, (_, i) => [i, i * 2]));
 
// 方法1：for...of（最快）
console.time('for...of');
for (const [key, value] of map) {
    // 处理逻辑
}
console.timeEnd('for...of');
 
// 方法2：forEach（稍慢）
console.time('forEach');
map.forEach((value, key) => {
    // 处理逻辑
});
console.timeEnd('forEach');
 
// 方法3：展开运算符（最慢，避免大数据量）
console.time('spread');
[...map].forEach(([key, value]) => {
    // 处理逻辑
});
console.timeEnd('spread');

// 使用TRAE IDE开发TypeScript时，可以获得完整的类型提示
interface CacheEntry<T> {
    data: T;
    timestamp: number;
    expires: number;
}
 
class TypedCache<K, V> {
    private cache: Map<K, CacheEntry<V>> = new Map();
    
    set(key: K, value: V, ttl: number = 300000): void {
        this.cache.set(key, {
            data: value,
            timestamp: Date.now(),
            expires: Date.now() + ttl
        });
    }
    
    get(key: K): V | null {
        const entry = this.cache.get(key);
        if (!entry || Date.now() > entry.expires) {
            this.cache.delete(key);
            return null;
        }
        return entry.data;
    }
    
    // TRAE IDE会智能提示泛型类型
    getAllValid(): Map<K, V> {
        const valid = new Map<K, V>();
        for (const [key, entry] of this.cache) {
            if (Date.now() <= entry.expires) {
                valid.set(key, entry.data);
            }
        }
        return valid;
    }
}

// 综合性能对比（基于Chrome v120测试）
const testSize = 100000;
 
const performanceData = {
    '插入操作': {
        Map: '2.1ms',
        Object: '3.4ms',
        提升: '38%'
    },
    '删除操作': {
        Map: '1.8ms', 
        Object: '8.9ms',
        提升: '80%'
    },
    'size获取': {
        Map: '0.001ms',
        Object: '12ms',
        提升: '99.99%'
    },
    '键值遍历': {
        Map: '4.2ms',
        Object: '4.8ms',
        提升: '12%'
    }
};
 
console.table(performanceData);