对象常用方法

1. 创建对象

复制代码
// 方式1:字面量(最常用)
const user = {
  name: '张三',
  age: 18,
  city: '上海'
};

// 方式2:new Object()
const user2 = new Object();
user2.name = '李四';
user2.age = 20;

// 方式3:动态属性名
const key = 'age';
const user3 = {
  name: '王五',
  [key]: 25  // 计算属性名
};

2. 访问属性

复制代码
const user = {
  name: '张三',
  age: 18,
  'first-name': '张'  // 特殊属性名
};

// 点号访问(最常用)
console.log(user.name);  // '张三'
console.log(user.age);   // 18

// 方括号访问(特殊字符、变量)
console.log(user['first-name']);  // '张'
const key = 'age';
console.log(user[key]);  // 18

3. 添加/修改属性

复制代码
const user = { name: '张三' };

// 添加新属性
user.age = 18;
user.city = '上海';

// 修改已有属性
user.name = '李四';

console.log(user);  // { name: '李四', age: 18, city: '上海' }

4. 删除属性

复制代码
const user = {
  name: '张三',
  age: 18,
  city: '上海'
};

delete user.age;
console.log(user);  // { name: '张三', city: '上海' }

5. Object.keys() - 获取所有键(属性名)

复制代码
const user = {
  name: '张三',
  age: 18,
  city: '上海'
};

const keys = Object.keys(user);
console.log(keys);  // ['name', 'age', 'city']

6. Object.values() - 获取所有值

复制代码
const user = {
  name: '张三',
  age: 18,
  city: '上海'
};

const values = Object.values(user);
console.log(values);  // ['张三', 18, '上海']

7. Object.entries() - 获取键值对数组

复制代码
const user = {
  name: '张三',
  age: 18,
  city: '上海'
};

const entries = Object.entries(user);
console.log(entries);
// [['name', '张三'], ['age', 18], ['city', '上海']]

// 遍历对象
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}
// name: 张三
// age: 18
// city: 上海

8. Object.assign() - 合并对象

复制代码
const obj1 = { name: '张三', age: 18 };
const obj2 = { city: '上海', age: 20 };

// 合并(后面的覆盖前面的)
const merged = Object.assign({}, obj1, obj2);
console.log(merged);
// { name: '张三', age: 20, city: '上海' }

// 或使用扩展运算符(更常用)
const merged2 = { ...obj1, ...obj2 };
console.log(merged2);
// { name: '张三', age: 20, city: '上海' }

9. Object.freeze() - 冻结对象(不可修改)

复制代码
const user = {
  name: '张三',
  age: 18
};

Object.freeze(user);
user.age = 20;        // 无效(严格模式下会报错)
user.city = '上海';    // 无效
delete user.name;     // 无效
console.log(user);    // { name: '张三', age: 18 }

10. Object.seal() - 密封对象(可修改,不可添加/删除)

复制代码
const user = {
  name: '张三',
  age: 18
};

Object.seal(user);
user.age = 20;        // ✅ 可以修改
user.city = '上海';    // ❌ 不能添加
delete user.name;     // ❌ 不能删除
console.log(user);    // { name: '张三', age: 20 }

11. hasOwnProperty() - 检查是否有该属性

复制代码
const user = {
  name: '张三',
  age: 18
};

console.log(user.hasOwnProperty('name'));  // true
console.log(user.hasOwnProperty('city'));  // false

// 或使用 in 操作符(包括继承的属性)
console.log('name' in user);  // true

12. 对象解构赋值

复制代码
const user = {
  name: '张三',
  age: 18,
  city: '上海'
};

// 提取属性
const { name, age } = user;
console.log(name);  // '张三'
console.log(age);   // 18

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

// 设置默认值
const { city, gender = '未知' } = user;
console.log(gender);  // '未知'

// 函数参数解构
function printUser({ name, age }) {
  console.log(`${name} 今年 ${age} 岁`);
}
printUser(user);  // 张三 今年 18 岁

13. 对象遍历

复制代码
const user = {
  name: '张三',
  age: 18,
  city: '上海'
};

// 方式1:for...in(包括继承的属性)
for (let key in user) {
  console.log(key, user[key]);
}

// 方式2:Object.keys() + forEach(推荐)
Object.keys(user).forEach(key => {
  console.log(key, user[key]);
});

// 方式3:Object.entries()(推荐)
Object.entries(user).forEach(([key, value]) => {
  console.log(key, value);
});

14. 对象拷贝

复制代码
const user = {
  name: '张三',
  age: 18,
  address: {
    city: '上海',
    district: '浦东'
  }
};

// 浅拷贝(只复制第一层)
const shallowCopy = { ...user };
shallowCopy.address.city = '北京';  // 会影响原对象
console.log(user.address.city);  // '北京'

// 深拷贝(完全独立)
const deepCopy = JSON.parse(JSON.stringify(user));
deepCopy.address.city = '深圳';  // 不会影响原对象
console.log(user.address.city);  // '北京'
// 注意:JSON方法无法复制函数、undefined、Symbol等

15. 对象方法

复制代码
const user = {
  name: '张三',
  age: 18,
  // 方法简写
  sayHello() {
    console.log(`你好,我是${this.name}`);
  },
  // 传统写法
  sayAge: function() {
    console.log(`我今年${this.age}岁`);
  }
};

user.sayHello();  // 你好,我是张三
user.sayAge();    // 我今年18岁

实际开发组合使用示例

复制代码
// 场景:从用户列表中筛选出成年人,并提取姓名和年龄
const users = [
  { name: '张三', age: 16, city: '上海' },
  { name: '李四', age: 20, city: '北京' },
  { name: '王五', age: 25, city: '广州' },
  { name: '赵六', age: 17, city: '深圳' }
];

// 筛选并转换
const adults = users
  .filter(user => user.age >= 18)
  .map(({ name, age }) => ({ name, age }));  // 解构提取

console.log(adults);
// [{ name: '李四', age: 20 }, { name: '王五', age: 25 }]

// 按年龄分组
const grouped = users.reduce((acc, user) => {
  const key = user.age >= 18 ? 'adults' : 'minors';
  if (!acc[key]) acc[key] = [];
  acc[key].push(user);
  return acc;
}, {});

console.log(grouped);
// {
//   adults: [{ name: '李四', age: 20 }, { name: '王五', age: 25 }],
//   minors: [{ name: '张三', age: 16 }, { name: '赵六', age: 17 }]
// }

常用操作技巧

复制代码
// 1. 对象转数组
const obj = { a: 1, b: 2, c: 3 };
const arr = Object.entries(obj).map(([key, value]) => ({ key, value }));
console.log(arr);  // [{ key: 'a', value: 1 }, ...]

// 2. 数组转对象
const users = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }];
const objFromArr = users.reduce((acc, user) => {
  acc[user.id] = user;
  return acc;
}, {});
console.log(objFromArr);
// { 1: { id: 1, name: '张三' }, 2: { id: 2, name: '李四' } }

// 3. 检查对象是否为空
const emptyObj = {};
const isEmpty = Object.keys(emptyObj).length === 0;
console.log(isEmpty);  // true

// 4. 条件添加属性
const isAdmin = true;
const user = {
  name: '张三',
  age: 18,
  ...(isAdmin && { role: 'admin' })  // 条件添加
};
console.log(user);  // { name: '张三', age: 18, role: 'admin' }

快速参考表

方法 返回 用途
Object.keys(obj) 数组 获取所有属性名
Object.values(obj) 数组 获取所有属性值
Object.entries(obj) 二维数组 获取键值对数组
Object.assign(target, ...sources) 目标对象 合并对象
Object.freeze(obj) 冻结的对象 禁止修改
Object.seal(obj) 密封的对象 禁止添加/删除
obj.hasOwnProperty(key) boolean 检查是否有该属性
delete obj.key boolean 删除属性
相关推荐
计算机魔术师12 小时前
新兴多智能体系统的模式与问题
前端
用户0595401744613 小时前
AI Agent 上下文污染踩坑实录:用 pytest + Redis 揪出 3 类记忆串号 bug,排查 6 小时
前端·css
满栀58513 小时前
状态管理:Redux、Vuex、Pinia 核心区别
前端·javascript·typescript
一拳不是超人14 小时前
DeepSeek Harness 为什么敢说"一切皆插件"?拆透 Cordis 引擎的五大核心机制
前端·人工智能·agent
IT_陈寒14 小时前
Python的GIL让我多写了500行代码
前端·人工智能·后端
风骏时光牛马14 小时前
AI智能体能力调度微服务
前端
Eloudy16 小时前
ReAct 原理简介
前端·javascript·人工智能·react.js·agent·gpu
ZJU_统一阿萨姆17 小时前
【DSH】如何将 DeepSeek Harness 嵌入生产环境?万字解构 DeepSeek Agent Harness 的运行机制与安全边界
前端·javascript·安全
用户9210802628617 小时前
4. 前端地图大量点位实时更新优化:后端推增量,前端做 diff
前端
SoaringHeart17 小时前
Flutter最佳实践:Web项目中文字体首次加载乱码问题解决
前端·flutter