对象基础与操作

对象是键值对的集合，用于组织和管理相关数据。

对象字面量

基本语法

JavaScript

const user = {
  name: 'Tom',
  age: 25,
  isActive: true
};

属性简写

JavaScript

const name = 'Tom';
const age = 25;

const user = { name, age };
// 等价于 { name: name, age: age }

计算属性名

JavaScript

const key = 'email';
const user = {
  [key]: 'tom@example.com',
  ['user_' + 'id']: 1001
};

console.log(user.email);      // 'tom@example.com'
console.log(user.user_id);    // 1001

方法简写

JavaScript

const user = {
  name: 'Tom',
  greet() {
    console.log('Hi, ' + this.name);
  }
};

user.greet();  // 'Hi, Tom'

属性访问与修改

点号访问

JavaScript

const user = { name: 'Tom', age: 25 };
console.log(user.name);     // 'Tom'
console.log(user.age);      // 25

方括号访问

JavaScript

console.log(user['name']);   // 'Tom'

const key = 'age';
console.log(user[key]);      // 25（动态属性名）

属性修改与新增

JavaScript

user.age = 26;               // 修改已有属性
user.email = 'tom@test.com'; // 新增属性

属性删除

JavaScript

delete user.age;
console.log(user.age);  // undefined

属性检查

JavaScript

console.log('name' in user);           // true
console.log(user.hasOwnProperty('name')); // true
console.log(user.age !== undefined);   // true

可选链

JavaScript

const user = { profile: { name: 'Tom' } };
console.log(user.profile?.name);     // 'Tom'
console.log(user.address?.city);     // undefined（不报错）

对象遍历

for...in

遍历自身和原型链上的可枚举属性：

JavaScript

const user = { name: 'Tom', age: 25 };

for (const key in user) {
  console.log(key, user[key]);
}

Object.keys / values / entries

JavaScript

const user = { name: 'Tom', age: 25 };

console.log(Object.keys(user));     // ['name', 'age']
console.log(Object.values(user));   // ['Tom', 25]
console.log(Object.entries(user));  // [['name','Tom'], ['age',25]]

for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}

遍历方式对比

方式	遍历范围	返回值
for...in	自身+原型	key
Object.keys	自身可枚举	key数组
Object.values	自身可枚举	value数组
Object.entries	自身可枚举	[k,v]数组

解构赋值

对象解构

JavaScript

const user = { name: 'Tom', age: 25, city: 'Beijing' };

const { name, age } = user;
console.log(name, age);  // Tom 25

// 重命名
const { name: userName, age: userAge } = user;
console.log(userName);   // 'Tom'

// 默认值
const { email = 'unknown' } = user;
console.log(email);  // 'unknown'

// 剩余属性
const { city, ...rest } = user;
console.log(rest);  // { name: 'Tom', age: 25 }

嵌套解构

JavaScript

const user = {
  name: 'Tom',
  address: {
    city: 'Beijing',
    street: 'Main St'
  }
};

const { address: { city } } = user;
console.log(city);  // 'Beijing'

函数参数解构

JavaScript

function printUser({ name, age, email = 'N/A' }) {
  console.log(`${name}, ${age}, ${email}`);
}

printUser({ name: 'Tom', age: 25 });  // 'Tom, 25, N/A'

要点总结

对象字面量支持属性简写、计算属性名和方法简写
点号访问简单明确，方括号支持动态键名
可选链 ?. 安全访问深层属性，避免报错
Object.entries 配合 for...of 是推荐的遍历方式
解构赋值简化属性提取，支持重命名、默认值和嵌套