对象常用方法

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 删除属性
相关推荐
程序员海军1 小时前
一个 AI 应用开发程序员的一天,都在屏幕前忙些什么?
前端·后端·程序员
程序员黑豆2 小时前
鸿蒙应用开发:Stack堆叠组件实战——实现微信消息角标效果
前端·harmonyos
夏幻灵2 小时前
浏览器原理深度解析:从输入 URL 到页面展现的全流程剖析
前端
闲猫2 小时前
Agent工程实践:从WorkFlow到多Agent协作的落地笔记
java·服务器·前端
带娃的IT创业者3 小时前
重新定义前端构建速度:深度解析 SWC 如何用 Rust 颠覆 JavaScript 工具链
前端·javascript·rust·前端构建·swc
happy_0x3f3 小时前
前端应用的离线暂停更新策略
开发语言·前端·php
你驴我3 小时前
WhatsApp 消息撤回与编辑的幂等性设计实践
java·服务器·前端·后端·python
新中地GIS开发老师4 小时前
零基础WebGIS开发入门 | GeoJSON数据持久化
前端·javascript·gis·webgis·三维gis开发
sunywz4 小时前
【c#】 Web Deploy一键发布,IIS部署全流程
开发语言·前端·c#