掌握对象的高级用法和现代集合类型
// 传统写法
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}!`);
}
};// 基本解构
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(未受影响)// 创建 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
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 | 对象 |
|---|---|---|
| 键类型 | 任何类型 | 字符串或 Symbol |
| 顺序 | 插入顺序 | 字符串键按插入顺序,Symbol 键按创建顺序 |
| 大小 | size 属性 | 需要手动计算 |
| 遍历 | 原生支持 | 需要使用 Object.keys() 等 |
| 性能 | 频繁增删时更好 | 常规操作时更好 |
// 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 }// 创建 WeakMap
const weakMap = new WeakMap();
// 只能用对象作为键
const obj = {};
weakMap.set(obj, 'value');
// 当对象被垃圾回收时,对应的条目也会被自动移除
console.log(weakMap.get(obj)); // 'value'
// WeakMap 没有 size 属性,也不能遍历// 创建 WeakSet
const weakSet = new WeakSet();
// 只能添加对象
const obj1 = {};
const obj2 = {};
weakSet.add(obj1);
weakSet.add(obj2);
// 当对象被垃圾回收时,对应的元素也会被自动移除
console.log(weakSet.has(obj1)); // true
// WeakSet 没有 size 属性,也不能遍历