当前位置：首页 > ds >正文

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

ds 2025/5/15 8:04:13

文章目录

前言
- 一、Object.keys() 和 Object.values() 基础
- - 1. Object.keys()
  - 2. Object.values()
- 二、与 Object.entries() 的对比
- 三、实际应用场景
- - 1. 遍历对象属性
  - 2. 判断对象是否为空
  - 3. 对象与数组的转换
  - 4. 动态属性操作
  - 5. 过滤对象属性
总结

前言

在 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({})); // trueconsole.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 }