JavaScript 中 Object.keys()、Object.values() 和 Object.entries() 详解

这三个方法是 JavaScript 中用于处理对象属性的重要工具，属于 Object 构造函数的静态方法。

1. Object.keys(obj)

功能：返回一个包含对象所有可枚举自有属性名的数组

语法：Object.keys(obj)

特点：

• 只返回对象自身的属性（不包含原型链上的属性）
• 只返回可枚举属性
• 返回数组元素的顺序与 for...in 循环一致

示例：

const user = {
  name: '张三',
  age: 28,
  profession: '工程师'
};

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

实际应用：

// 检查对象是否为空
function isEmpty(obj) {
  return Object.keys(obj).length === 0;
}

// 获取对象属性数量
const propertyCount = Object.keys(user).length;

2. Object.values(obj)

功能：返回一个包含对象所有可枚举自有属性值的数组

语法：Object.values(obj)

特点：

• ES2017 新增方法
• 返回值顺序与 Object.keys() 保持一致
• 同样不包含原型链上的属性值

示例：

const user = {
  name: '李四',
  age: 32,
  profession: '设计师'
};

const values = Object.values(user);
console.log(values); // ['李四', 32, '设计师']

实际应用：

// 计算属性值总和
const scores = { math: 90, english: 85, science: 92 };
const total = Object.values(scores).reduce((sum, score) => sum + score, 0);

// 检查是否包含特定值
const hasValue = Object.values(user).includes('设计师');

3. Object.entries(obj)

功能：返回一个包含对象所有可枚举自有属性的 [key, value] 数组的数组

语法：Object.entries(obj)

特点：

• 每个元素都是一个包含键值对的数组
• 非常适合转换为 Map 或进行迭代操作
• 顺序与 Object.keys() 一致

示例：

const user = {
  name: '王五',
  age: 25,
  profession: '教师'
};

const entries = Object.entries(user);
console.log(entries);
// [
//   ['name', '王五'],
//   ['age', 25],
//   ['profession', '教师']
// ]

实际应用：

// 转换为Map
const map = new Map(Object.entries(user));

// 对象属性过滤
const filtered = Object.fromEntries(
  Object.entries(user).filter(([key, value]) => typeof value === 'string')
);

// 对象迭代
Object.entries(user).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

三者的比较

注意事项

1. 非对象参数：如果参数不是对象，会先尝试转换为对象

   Object.keys('foo'); // ['0', '1', '2']
   

2. Symbol属性：这三个方法都不包含Symbol属性，要获取Symbol属性需使用 Object.getOwnPropertySymbols()

3. 不可枚举属性：这些方法不会返回不可枚举的属性

4. 性能考虑：对于大型对象，这些方法会创建新数组，可能影响性能

进阶用法

1. 与数组方法结合： ```javascript // 转换属性名 const upperKeys = Object.keys(user).map(key => key.toUpperCase());

// 创建属性统计 const valueTypes = Object.values(user).reduce((acc, value) => { const type = typeof value; acc[type] = (acc[type] || 0) + 1; return acc; }, {});

2. **实现对象浅拷贝**：
```javascript
const shallowCopy = Object.fromEntries(Object.entries(original));

3. 排序对象属性：

   const sorted = Object.fromEntries(
     Object.entries(user).sort(([a], [b]) => a.localeCompare(b))
   );
   

这三个方法极大地简化了JavaScript中对对象的操作，使代码更加简洁和函数式。