Symbol、Set 与 Map：新数据结构探秘

Symbol、Set 与 Map：新数据结构探秘

引言

ECMAScript 6 (ES6) 引入了三种强大的数据结构：Symbol、Set 与 Map，它们解决了 JavaScript 开发中的特定痛点，为我们提供了更多工具来处理复杂的数据操作。

Symbol：唯一标识符的实现

基本概念与特性

Symbol 是 JavaScript 的原始数据类型，表示唯一的、不可变的值。每个 Symbol 值都是唯一的，即使创建时使用了相同的描述。

const sym1 = Symbol('descriptor');
const sym2 = Symbol('descriptor');console.log(sym1 === sym2); // false
console.log(typeof sym1); // "symbol"

Symbol 不会被自动转换为字符串，这是它与其他原始类型的关键区别：

const sym = Symbol('my symbol');
console.log("The symbol is: " + sym); // TypeError: Cannot convert a Symbol value to a string
console.log(`The symbol is: ${sym}`); // TypeError: Cannot convert a Symbol value to a string// 正确的转换方法
console.log("The symbol is: " + sym.toString()); // "The symbol is: Symbol(my symbol)"
console.log(`The symbol is: ${String(sym)}`); // "The symbol is: Symbol(my symbol)"

实际应用场景

1. 对象私有属性

Symbol 最常见的用途是创建对象的"私有"属性，防止属性名冲突：

const privateField = Symbol('privateField');
class MyClass {constructor(privateValue) {this[privateField] = privateValue;}getPrivateValue() {return this[privateField];}
}const instance = new MyClass(42);
console.log(instance.getPrivateValue()); // 42
console.log(instance[privateField]); // 42（如果知道Symbol引用）
console.log(Object.keys(instance)); // []（Symbol属性不出现在这里）

2. 常量定义

使用 Symbol 定义常量可以确保值的唯一性：

const STATUS = {PENDING: Symbol('pending'),FULFILLED: Symbol('fulfilled'),REJECTED: Symbol('rejected')
};// 使用示例
let currentStatus = STATUS.PENDING;// 安全的比较
if (currentStatus === STATUS.PENDING) {// 处理待定状态
}

3. 内置 Symbol 与元编程

ES6 提供了内置 Symbol 值，如 Symbol.iterator，用于自定义对象的迭代行为：

const collection = {items: ['A', 'B', 'C'],[Symbol.iterator]: function* () {for (let item of this.items) {yield item;}}
};for (let item of collection) {console.log(item); // 'A', 'B', 'C'
}

Symbol 与全局注册

除了普通的 Symbol 创建方式，还可以使用 Symbol.for() 在全局 Symbol 注册表中创建和访问 Symbol：

const globalSym = Symbol.for('globalSymbol');
const sameGlobalSym = Symbol.for('globalSymbol');console.log(globalSym === sameGlobalSym); // true// 获取全局Symbol的键
console.log(Symbol.keyFor(globalSym)); // "globalSymbol"
console.log(Symbol.keyFor(Symbol('local'))); // undefined

Set：高效的唯一值集合

基本概念与操作

Set 是一种存储唯一值的集合，可以包含任何类型的值，包括原始值和对象引用。

const uniqueNumbers = new Set([1, 2, 3, 3, 4, 4, 5]);
console.log(uniqueNumbers.size); // 5
console.log([...uniqueNumbers]); // [1, 2, 3, 4, 5]// 添加、检查和删除元素
uniqueNumbers.add(6);
console.log(uniqueNumbers.has(3)); // true
uniqueNumbers.delete(4);

Set 的实际应用

1. 数组去重

Set 提供了数组去重的最简洁解决方案：

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 4, 5]

2. 实现集合操作

利用 Set 可以轻松实现数学集合操作：

const set1 = new Set([1, 2, 3, 4]);
const set2 = new Set([3, 4, 5, 6]);// 交集
const intersection = new Set([...set1].filter(x => set2.has(x))
);
console.log([...intersection]); // [3, 4]// 并集
const union = new Set([...set1, ...set2]);
console.log([...union]); // [1, 2, 3, 4, 5, 6]// 差集
const difference = new Set([...set1].filter(x => !set2.has(x))
);
console.log([...difference]); // [1, 2]

3. 跟踪唯一对象

Set 可以存储对象引用，适用于需要跟踪唯一对象实例的场景：

const objSet = new Set();const obj1 = { id: 1, name: 'Object 1' };
const obj2 = { id: 2, name: 'Object 2' };objSet.add(obj1);
objSet.add(obj2);
objSet.add(obj1); // 重复添加无效console.log(objSet.size); // 2// 检查对象是否已存在
function isObjectTracked(obj) {return objSet.has(obj);
}console.log(isObjectTracked(obj1)); // true

WeakSet：内存友好的特殊 Set

WeakSet 是 Set 的变体，具有以下特点：

• 只能存储对象引用
• 对对象的引用是弱引用，不会阻止垃圾回收
• 不可迭代且无法获取 size

const weakSet = new WeakSet();
let obj = { data: 'some data' };weakSet.add(obj);
console.log(weakSet.has(obj)); // true// 当对象没有其他引用时，会被垃圾回收
obj = null;
// weakSet 中的对象引用将在下一次垃圾回收时被移除

WeakSet 主要用于存储 DOM 元素或需要被自动垃圾回收的对象集合。

Map：增强的键值对集合

基本概念与操作

Map 是键值对的集合，与普通对象不同，Map 的键可以是任何类型的值，包括函数、对象或任何原始值。

const userMap = new Map();// 添加键值对
userMap.set('name', 'Alice');
userMap.set(42, 'Answer');
userMap.set(true, 'Boolean key');const userObject = { id: 1001 };
userMap.set(userObject, 'Object as key');// 获取值
console.log(userMap.get('name')); // "Alice"
console.log(userMap.get(userObject)); // "Object as key"// 检查和删除
console.log(userMap.has(42)); // true
userMap.delete(true);
console.log(userMap.size); // 3

Map 与普通对象的比较

Map 相比普通对象有以下优势：

1. 键的类型：Map 的键可以是任何类型，对象仅限于字符串和 Symbol
2. 顺序保证：Map 会保持键的插入顺序
3. 性能：在频繁添加和删除键值对的场景中，Map 表现更佳
4. 内置迭代：Map 是可迭代的，可直接用于循环

// 迭代 Map
const fruitInventory = new Map([['apples', 5],['bananas', 10],['oranges', 2]
]);// 遍历键值对
for (const [fruit, count] of fruitInventory) {console.log(`${fruit}: ${count}`);
}// 仅遍历键
for (const fruit of fruitInventory.keys()) {console.log(fruit);
}// 仅遍历值
for (const count of fruitInventory.values()) {console.log(count);
}

Map 的实际应用场景

1. 数据缓存系统

Map 适合实现高效的缓存：

class SimpleCache {constructor(maxSize = 100) {this.cache = new Map();this.maxSize = maxSize;}get(key) {if (!this.cache.has(key)) return undefined;// 获取值并更新位置（LRU 实现）const value = this.cache.get(key);this.cache.delete(key);this.cache.set(key, value);return value;}set(key, value) {// 如果键已存在，先删除if (this.cache.has(key)) {this.cache.delete(key);}// 如果达到最大容量，删除最旧的项else if (this.cache.size >= this.maxSize) {const oldestKey = this.cache.keys().next().value;this.cache.delete(oldestKey);}this.cache.set(key, value);return this;}
}const cache = new SimpleCache(2);
cache.set('key1', 'value1');
cache.set('key2', 'value2');
console.log(cache.get('key1')); // "value1"
cache.set('key3', 'value3'); // 会删除 'key2'
console.log(cache.get('key2')); // undefined

2. 关联数据存储

Map 非常适合存储关联数据，尤其是当需要使用对象作为键时：

const userRoles = new Map();const user1 = { id: 1, name: 'Alice' };
const user2 = { id: 2, name: 'Bob' };userRoles.set(user1, ['admin', 'editor']);
userRoles.set(user2, ['user']);function getUserRoles(user) {return userRoles.get(user) || [];
}console.log(getUserRoles(user1)); // ["admin", "editor"]

3. 状态管理与有限状态机

Map 可用于实现状态管理逻辑：

const taskStateMachine = new Map([['idle', { next: ['running'], handler: () => console.log('Task is idle') }],['running', { next: ['paused', 'completed', 'failed'], handler: () => console.log('Task is running') }],['paused', { next: ['running', 'canceled'], handler: () => console.log('Task is paused') }],['completed', { next: [], handler: () => console.log('Task completed') }],['failed', { next: ['idle'], handler: () => console.log('Task failed') }],['canceled', { next: ['idle'], handler: () => console.log('Task canceled') }]
]);class Task {constructor() {this.currentState = 'idle';}transition(newState) {const currentStateData = taskStateMachine.get(this.currentState);if (!currentStateData.next.includes(newState)) {throw new Error(`Invalid state transition from ${this.currentState} to ${newState}`);}this.currentState = newState;const stateData = taskStateMachine.get(newState);stateData.handler();return this;}
}const task = new Task();
task.transition('running').transition('paused').transition('running').transition('completed');
// 输出:
// Task is running
// Task is paused
// Task is running
// Task completed

WeakMap：内存高效的特殊 Map

WeakMap 是 Map 的变体，键必须是对象，且对这些对象的引用是弱引用：

const weakMap = new WeakMap();
let key = { id: 1 };weakMap.set(key, 'Data associated with object');
console.log(weakMap.get(key)); // "Data associated with object"// 当对象没有其他引用时，会被垃圾回收
key = null;
// weakMap 中的键值对将在下一次垃圾回收时被移除

WeakMap 的主要应用场景：

1. 私有数据存储：将对象关联到私有数据，而不影响对象的生命周期

const privateData = new WeakMap();class User {constructor(name, age) {this.name = name;privateData.set(this, { age });}getAge() {return privateData.get(this).age;}setAge(age) {privateData.get(this).age = age;}
}const user = new User('Alice', 30);
console.log(user.name); // "Alice"
console.log(user.getAge()); // 30

2. DOM 节点关联数据：存储与 DOM 元素相关的数据，不会造成内存泄漏

const nodeData = new WeakMap();function addHandler(node, handler) {nodeData.set(node, { handler });node.addEventListener('click', handler);
}function removeHandler(node) {const data = nodeData.get(node);if (data) {node.removeEventListener('click', data.handler);// WeakMap会自动清理，当node被移除时}
}// 使用示例
const button = document.getElementById('my-button');
addHandler(button, () => console.log('Button clicked'));

性能考量与最佳实践

性能对比

各数据结构的性能特点：

操作	Object	Map	Set
查找	O(1)	O(1)	O(1)
插入	O(1)	O(1)	O(1)
删除	O(1)	O(1)	O(1)
迭代	O(n)	O(n)	O(n)

Map 在频繁增删键值对的场景中比普通对象更高效，尤其是当键的数量非常大时。

内存占用

• WeakMap 和 WeakSet 对内存友好，适用于需要关联数据但不应阻止垃圾回收的场景
• 大型 Map 和 Set 集合在不再需要时应明确清空（使用 clear() 方法）

使用建议

选择 Symbol 的场景：

• 需要确保属性名唯一性
• 实现对象的"私有"属性
• 需要使用元编程能力

选择 Set 的场景：

• 需要存储唯一值集合
• 频繁检查值是否存在
• 需要高效实现数学集合操作

选择 Map 的场景：

• 键不限于字符串类型
• 需要频繁添加/删除键值对
• 需要维护插入顺序
• 需要直接迭代键值对

选择 WeakMap/WeakSet 的场景：

• 存储对对象的引用但不阻止垃圾回收
• 实现关联数据存储，特别是涉及 DOM 元素时

实际项目中的综合应用

下面展示一个将这三种数据结构结合使用的实际应用示例：构建一个轻量级组件系统。

// 使用 Symbol 定义内部操作标识
const RENDER = Symbol('render');
const STATE = Symbol('state');
const EVENTS = Symbol('events');// 使用 WeakMap 存储组件私有数据
const componentData = new WeakMap();class Component {constructor(element, initialState = {}) {// 初始化组件数据componentData.set(this, {element,[STATE]: new Map(Object.entries(initialState)),[EVENTS]: new Map()});this[RENDER]();}// 私有渲染方法[RENDER]() {const data = componentData.get(this);const state = Object.fromEntries(data[STATE]);data.element.innerHTML = this.template(state);// 重新绑定事件data[EVENTS].forEach((handler, event) => {data.element.addEventListener(event, handler);});}// 模板方法（子类实现）template(state) {throw new Error('Component subclass must implement template method');}// 获取状态getState(key) {const data = componentData.get(this);return data[STATE].get(key);}// 设置状态并重新渲染setState(key, value) {const data = componentData.get(this);data[STATE].set(key, value);this[RENDER]();return this;}// 添加事件处理on(event, handler) {const data = componentData.get(this);// 存储事件处理函数data[EVENTS].set(event, handler);return this;}
}// 使用示例：计数器组件
class Counter extends Component {constructor(element) {super(element, { count: 0 });this.on('click', () => {this.setState('count', this.getState('count') + 1);});}template(state) {return `<div class="counter"><p>Count: ${state.count}</p><button>Increment</button></div>`;}
}// 使用
const counterElement = document.getElementById('counter');
const counter = new Counter(counterElement);

浏览器兼容性

这些数据结构在现代浏览器中有良好的支持：

• Symbol：支持情况良好，IE11 不支持
• Set/Map：所有现代浏览器都支持，IE11 有部分支持
• WeakSet/WeakMap：所有现代浏览器都支持，IE11 不支持

对于需要支持旧浏览器的项目，可以使用核心-js 等 polyfill 库提供兼容支持。

总结与最佳实践

Symbol、Set 与 Map 这三种 ES6 数据结构极大地增强了 JavaScript 处理复杂数据的能力：

• Symbol 提供了创建唯一标识符的机制，解决了属性名冲突问题，并为元编程提供了基础
• Set 提供了高效的唯一值集合，简化了去重和集合操作
• Map 提供了真正的键值对集合，允许任何类型的键，适合更复杂的数据关联场景

在实际项目中，建议遵循以下建议：

1. 明确选择数据结构的使用场景，避免过度使用
2. 注意内存管理，特别是在处理大量数据时
3. 考虑浏览器兼容性，必要时使用 polyfill
4. 结合实际业务需求，灵活组合使用这些数据结构

充分利用这些现代数据结构，可以编写出更简洁、高效且易于维护的 JavaScript 代码。

进阶学习资源

• MDN Web Docs: Symbol
• MDN Web Docs: Set
• MDN Web Docs: Map
• ECMAScript 6 规范
• Exploring ES6

---

如果你觉得这篇文章有帮助，欢迎点赞收藏，也期待在评论区看到你的想法和建议！👇

终身学习，共同成长。

咱们下一期见

💻