JS 中 Object.keys() 和 Object.values() 的深度解析与应用

---

前言

在 JavaScript 开发中，操作对象（Object）是日常任务之一。Object.keys() 和 Object.values() 是两个常用的内置方法，用于获取对象的键或值。虽然它们看起来简单，但在实际开发中有许多值得探讨的细节和应用场景。本文将深入解析这两个方法，并结合实际案例展示它们的用法。

---

一、Object.keys() 和 Object.values() 基础

1. Object.keys()

Object.keys() 方法返回一个由给定对象的所有可枚举自身属性的键（key）组成的数组。

	const obj = { a: 1, b: 2, c: 3 };
	const keys = Object.keys(obj);
	console.log(keys); // 输出: ['a', 'b', 'c']

特点：

• 返回的是数组。
• 仅包含对象自身的可枚举属性（不包括原型链上的属性）。
• 属性顺序遵循对象的属性遍历顺序（ES2015 规范：数字键按升序排列，其他键按插入顺序排列）。

2. Object.values()

Object.values() 方法返回一个由给定对象的所有可枚举自身属性的值（value）组成的数组。

	const obj = { a: 1, b: 2, c: 3 };
	const values = Object.values(obj);
	console.log(values); // 输出: [1, 2, 3]

特点：

• 返回的是数组。
• 仅包含对象自身的可枚举属性。
• 属性顺序与 Object.keys() 一致。

---

二、与 Object.entries() 的对比

除了 Object.keys() 和 Object.values()，还有一个相关的方法 Object.entries()，它返回一个由对象的键值对组成的数组。

	const obj = { a: 1, b: 2, c: 3 };
	const entries = Object.entries(obj);
	console.log(entries); // 输出: [['a', 1], ['b', 2], ['c', 3]]

对比：

• Object.keys(obj) → ['a', 'b', 'c']
• Object.values(obj) → [1, 2, 3]
• Object.entries(obj) → [['a', 1], ['b', 2], ['c', 3]]

---

三、实际应用场景

1. 遍历对象属性

通常我们会使用 for...in 循环遍历对象，但 for...in 会遍历原型链上的属性。使用 Object.keys() 或 Object.values() 可以更安全地遍历对象自身的属性。

	const obj = { a: 1, b: 2, c: 3 };
	// 使用 Object.keys() 遍历键
	Object.keys(obj).forEach(key => {
	  console.log(`${key}: ${obj[key]}`);
	});
	// 使用 Object.values() 遍历值
	Object.values(obj).forEach(value => {
	  console.log(value);
	});

2. 判断对象是否为空

通过检查 Object.keys(obj).length 是否为 0，可以判断对象是否为空。

	function isEmpty(obj) {
	  return Object.keys(obj).length === 0;
	}	 
	console.log(isEmpty({})); // true
	console.log(isEmpty({ a: 1 })); // false

3. 对象与数组的转换

Object.keys() 和 Object.values() 可以用于对象与数组之间的转换。

	// 对象转数组（键或值）
	const obj = { a: 1, b: 2, c: 3 };

	const keysArray = Object.keys(obj); // ['a', 'b', 'c']
	const valuesArray = Object.values(obj); // [1, 2, 3]	 

	// 数组转对象（需要额外逻辑）
	const keys = ['a', 'b', 'c'];
	const values = [1, 2, 3];
	const newObj = Object.fromEntries(keys.map((key, index) => [key, values[index]]));
	console.log(newObj); // { a: 1, b: 2, c: 3 }

4. 动态属性操作

结合 Object.keys() 和 Object.values()，可以动态操作对象的属性。

	const user = { name: 'Alice', age: 25, role: 'admin' };
	// 动态更新属性
	Object.keys(user).forEach(key => {
	  if (key === 'age') {
	    user[key] += 1; // 年龄加 1
	  }
	});

	console.log(user); // { name: 'Alice', age: 26, role: 'admin' }

5. 过滤对象属性

可以通过 Object.keys() 获取键，然后过滤键或值。

	const obj = { a: 1, b: 2, c: 3, d: 4 };
	// 过滤出值大于 2 的属性
	const filteredObj = Object.fromEntries(
	  Object.entries(obj).filter(([key, value]) => value > 2)
	);
	console.log(filteredObj); // { c: 3, d: 4 }

---

总结

Object.keys() 和 Object.values() 是 JavaScript 中操作对象的强大工具，它们提供了简洁的方式获取对象的键或值。以下是它们的几个核心用途：

1. 遍历对象属性：更安全地遍历对象自身的属性。
2. 判断对象是否为空：通过检查 Object.keys(obj).length。
3. 对象与数组的转换：在对象和数组之间灵活转换。
4. 动态属性操作：结合其他方法动态操作对象。
5. 过滤对象属性：根据条件过滤属性。

在实际开发中，合理使用这些方法可以提升代码的可读性和可维护性。希望本文能帮助你更好地理解和应用 Object.keys() 和 Object.values()！