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 |
删除属性 |