企业视觉形象设计_腾讯企业邮箱经销商_seo综合查询怎么进入网站_域名备案查询官网

1. Map 基本概念

Map 是 ES6 提供的新的数据结构，它类似于对象，但是"键"的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也可以跟踪键值对的原始插入顺序。

1.1 基本用法

// 创建一个空Map
const map = new Map();// 创建一个带有初始值的Map
const map1 = new Map([['name', 'John'],['age', 25]
]);// 使用对象作为键
const objKey = { id: 1 };
const map2 = new Map();
map2.set(objKey, 'value for object');// Map的大小
console.log(map1.size); // 2let myMap = new Map();
myMap.set("name", "Alice");
myMap.set(1, "one");
myMap.set(true, "boolean");
console.log(myMap); // Map { 'name' => 'Alice', 1 => 'one', true => 'boolean' }

1.2 Map的基本方法

const map = new Map();// 添加键值对
map.set('name', 'John');
map.set('age', 25).set('city', 'New York'); // 支持链式调用// 获取值
console.log(map.get('name')); // 'John'// 检查键是否存在
console.log(map.has('age')); // true// 删除键值对
map.delete('age');// 清空Map
map.clear();// 获取Map的大小
console.log(map.size); // 0

方法	说明
set(key, value)	添加键值对
get(key)	获取键对应的值
delete(key)	删除某个键值对
has(key)	判断某个键是否存在
clear()	清空 Map
size	获取键值对数量

console.log(myMap.get("name")); // Alice
console.log(myMap.has(1)); // true
myMap.delete(true);
console.log(myMap.size); // 2
myMap.clear();
console.log(myMap.size); // 0

2. Map的遍历

2.1 遍历方法

const map = new Map([['name', 'John'],['age', 25],['city', 'New York']
]);// keys() - 返回键名的遍历器
for (let key of map.keys()) {console.log(key);
}// values() - 返回键值的遍历器
for (let value of map.values()) {console.log(value);
}// entries() - 返回键值对的遍历器
for (let [key, value] of map.entries()) {console.log(key, value);
}// forEach() - 使用回调函数遍历
map.forEach((value, key) => {console.log(key, value);
});let map = new Map([["name", "Alice"],["age", 25],["gender", "female"]
]);console.log([...map.keys()]); // ['name', 'age', 'gender']
console.log([...map.values()]); // ['Alice', 25, 'female']
console.log([...map.entries()]); // [['name', 'Alice'], ['age', 25], ['gender', 'female']]

2.2 与对象的转换

// Map转对象
function mapToObject(map) {const obj = {};for (let [key, value] of map) {obj[key] = value;}return obj;
}// 对象转Map
function objectToMap(obj) {return new Map(Object.entries(obj));
}// 使用示例
const map = new Map([['name', 'John'], ['age', 25]]);
const obj = mapToObject(map);
const backToMap = objectToMap(obj);

3. 实际应用场景

3.1 缓存系统

class Cache {constructor() {this.cache = new Map();}set(key, value, ttl = 60000) { // 默认缓存1分钟const expires = Date.now() + ttl;this.cache.set(key, { value, expires });}get(key) {const data = this.cache.get(key);if (!data) return null;if (Date.now() > data.expires) {this.cache.delete(key);return null;}return data.value;}clear() {this.cache.clear();}
}// 使用示例
const cache = new Cache();
cache.set('user', { id: 1, name: 'John' }, 5000); // 缓存5秒
console.log(cache.get('user')); // { id: 1, name: 'John' }

3.2 状态管理

class StateManager {constructor() {this.states = new Map();this.listeners = new Map();}setState(key, value) {this.states.set(key, value);if (this.listeners.has(key)) {this.listeners.get(key).forEach(listener => listener(value));}}getState(key) {return this.states.get(key);}subscribe(key, callback) {if (!this.listeners.has(key)) {this.listeners.set(key, new Set());}this.listeners.get(key).add(callback);}
}// 使用示例
const store = new StateManager();
store.subscribe('theme', theme => console.log(`Theme changed to ${theme}`));
store.setState('theme', 'dark'); // 输出: Theme changed to dark

3.3 事件总线

class EventBus {constructor() {this.events = new Map();}on(event, callback) {if (!this.events.has(event)) {this.events.set(event, new Set());}this.events.get(event).add(callback);}off(event, callback) {if (this.events.has(event)) {this.events.get(event).delete(callback);}}emit(event, data) {if (this.events.has(event)) {this.events.get(event).forEach(callback => callback(data));}}
}// 使用示例
const bus = new EventBus();
bus.on('userLogin', user => console.log(`${user.name} logged in`));
bus.emit('userLogin', { name: 'John' }); // 输出: John logged in

3.4 数据结构映射

class BiMap {constructor() {this.forward = new Map();this.reverse = new Map();}set(key, value) {this.forward.set(key, value);this.reverse.set(value, key);}getByKey(key) {return this.forward.get(key);}getByValue(value) {return this.reverse.get(value);}
}// 使用示例
const userRoles = new BiMap();
userRoles.set('john', 'admin');
console.log(userRoles.getByKey('john')); // 'admin'
console.log(userRoles.getByValue('admin')); // 'john'

4. WeakMap

WeakMap 是一种特殊的 Map，它只接受对象作为键，并且键是弱引用。

4.1 基本用法

const wm = new WeakMap();
let key = { id: 1 };
wm.set(key, 'value');console.log(wm.get(key)); // 'value'
key = null; // key对象可被垃圾回收

4.2 实际应用场景

// 使用 WeakMap 存储私有数据
const privateData = new WeakMap();class User {constructor(name, age) {privateData.set(this, { name, age });}getName() {return privateData.get(this).name;}getAge() {return privateData.get(this).age;}
}const user = new User('John', 25);
console.log(user.getName()); // 'John'

4.3 Map 与 WeakMap 的区别**

特性	Map	WeakMap
是否存储值	✅ 是	✅ 是
是否存储对象	✅ 是	✅ 仅能存对象
是否支持遍历	✅ 是	❌ 不能遍历
是否允许自动垃圾回收	❌ 否	✅ 是

📌 WeakMap 适用于 存储对象的私有数据，对象若被其他变量引用解除，会被自动回收，不会造成内存泄漏。

let weakMap = new WeakMap();
let obj = { name: "John" };
weakMap.set(obj, "privateData");
console.log(weakMap.get(obj)); // privateData
obj = null; // 当对象无引用时会被垃圾回收

5. 性能考虑

5.1 Map vs Object

特性	Map	Object
键的类型	任意类型	仅字符串或 Symbol
是否有默认原型	❌ 否	✅ 是（Object.prototype）
遍历顺序	按插入顺序	无序（ES6 之后部分实现有序）
适合场景	需要键值存储，键可为任意类型	传统键值对、JSON 结构

// Map 在频繁增删键值对时性能更好
const map = new Map();
const obj = {};console.time('Map');
for (let i = 0; i < 1000000; i++) {map.set(i, i);map.delete(i);
}
console.timeEnd('Map');console.time('Object');
for (let i = 0; i < 1000000; i++) {obj[i] = i;delete obj[i];
}
console.timeEnd('Object');let obj = {};
obj["1"] = "one";
obj[1] = "number one";
console.log(obj); // { '1': 'number one' }  因为 Object 的键被转换为字符串let map = new Map();
map.set("1", "one");
map.set(1, "number one");
console.log(map); // Map { '1' => 'one', 1 => 'number one' }

5.2 内存优化

// 及时清理不需要的数据
function processData(data) {const map = new Map();// 处理数据...map.clear(); // 及时清空释放内存
}

6. 最佳实践

1. 需要非字符串键时使用 Map
2. 需要保持键值对顺序时使用 Map
3. 频繁增删键值对时使用 Map
4. 存储私有数据时考虑使用 WeakMap
5. 需要遍历键值对时使用 Map
6. 注意内存管理，及时清理不需要的数据