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

---

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

终身学习，共同成长。

咱们下一期见

💻