🗂️ 第六章:对象与 Map/Set

掌握对象的高级用法和现代集合类型

6.1 对象字面量增强

属性简写

// 传统写法
const name = 'John';
const age = 30;

const person = {
    name: name,
    age: age
};

// 简写写法
const person2 = {
    name,
    age
};

计算属性名

// 计算属性名
const propName = 'age';

const person = {
    name: 'John',
    ['age']: 30, // 字符串字面量
    [propName]: 30, // 变量
    [`${propName}Group`]: 'adult' // 模板字符串
};

方法简写

// 传统写法
const person = {
    name: 'John',
    greet: function() {
        console.log(`Hello, ${this.name}!`);
    }
};

// 方法简写
const person2 = {
    name: 'John',
    greet() {
        console.log(`Hello, ${this.name}!`);
    }
};

6.2 对象解构与深拷贝

对象解构

// 基本解构
const person = {
    name: 'John',
    age: 30,
    address: {
        city: 'New York',
        country: 'USA'
    }
};

const { name, age } = person; // name='John', age=30

// 重命名
const { name: fullName, age: years } = person; // fullName='John', years=30

// 默认值
const { name, age, email = 'unknown@example.com' } = person; // email='unknown@example.com'

// 嵌套解构
const { address: { city, country } } = person; // city='New York', country='USA'

深拷贝

// JSON 方法(简单对象)
const obj = { a: 1, b: { c: 2 } };
const copy1 = JSON.parse(JSON.stringify(obj));

// structuredClone(支持更多类型)
const copy2 = structuredClone(obj);

// 验证深拷贝
obj.b.c = 3;
console.log(copy1.b.c); // 2(未受影响)
console.log(copy2.b.c); // 2(未受影响)

6.3 Map 与 Set

Map 和 Set 是 ES6 引入的现代集合类型,提供了更灵活的数据存储方式。

Map

// 创建 Map
const map = new Map();

// 添加元素
map.set('name', 'John');
map.set(1, 'one');
map.set(true, 'boolean');

// 获取元素
console.log(map.get('name')); // 'John'

// 检查元素
console.log(map.has('name')); // true

// 删除元素
map.delete('name');

// 遍历 Map
for (const [key, value] of map) {
    console.log(key, value);
}

Set

// 创建 Set
const set = new Set();

// 添加元素
set.add(1);
set.add(2);
set.add(1); // 重复元素不会被添加

// 检查元素
console.log(set.has(1)); // true

// 删除元素
set.delete(1);

// 遍历 Set
for (const value of set) {
    console.log(value);
}

Map vs 对象

特性 Map 对象
键类型 任何类型 字符串或 Symbol
顺序 插入顺序 字符串键按插入顺序,Symbol 键按创建顺序
大小 size 属性 需要手动计算
遍历 原生支持 需要使用 Object.keys() 等
性能 频繁增删时更好 常规操作时更好

6.4 ES2026 新特性:Set 与 Map 的集合运算

// Set 集合运算
const set1 = new Set([1, 2, 3]);
const set2 = new Set([3, 4, 5]);

// 并集
const union = set1.union(set2); // Set { 1, 2, 3, 4, 5 }

// 交集
const intersection = set1.intersection(set2); // Set { 3 }

// 差集
const difference = set1.difference(set2); // Set { 1, 2 }

// 对称差集
const symmetricDifference = set1.symmetricDifference(set2); // Set { 1, 2, 4, 5 }

6.5 WeakMap 与 WeakSet

WeakMap 和 WeakSet 是弱引用集合,有助于垃圾回收。

WeakMap

// 创建 WeakMap
const weakMap = new WeakMap();

// 只能用对象作为键
const obj = {};
weakMap.set(obj, 'value');

// 当对象被垃圾回收时,对应的条目也会被自动移除
console.log(weakMap.get(obj)); // 'value'

// WeakMap 没有 size 属性,也不能遍历

WeakSet

// 创建 WeakSet
const weakSet = new WeakSet();

// 只能添加对象
const obj1 = {};
const obj2 = {};

weakSet.add(obj1);
weakSet.add(obj2);

// 当对象被垃圾回收时,对应的元素也会被自动移除
console.log(weakSet.has(obj1)); // true

// WeakSet 没有 size 属性,也不能遍历

动手练习

练习 1:对象字面量增强

  1. 使用属性简写创建对象
  2. 使用计算属性名
  3. 使用方法简写

练习 2:对象解构

  1. 使用基本解构
  2. 使用重命名和默认值
  3. 使用嵌套解构

练习 3:Map 与 Set

  1. 创建并操作 Map
  2. 创建并操作 Set
  3. 比较 Map 和对象的区别

练习 4:集合运算

  1. 测试 Set 的并集运算
  2. 测试 Set 的交集运算
  3. 测试 Set 的差集运算