JavaScript的Object.keys方法怎么用？如何遍历对象？-html教程-PHP中文网

JavaScript的Object.keys方法怎么用？如何遍历对象？

星降

发布： 2025-07-12 17:21:01

原创

655人浏览过

object.keys在javascript中用于获取对象自身所有可枚举属性的键名数组。其核心用法是传入一个对象，返回字符串数组，便于遍历对象属性。例如，const keys = object.keys(userprofile); 可输出所有键名，并结合foreach或for...of循环访问属性值。与for...in相比，object.keys仅返回自身属性，无需额外过滤原型链属性，更安全可靠。此外，es6还提供了object.values()和object.entries()，分别用于获取属性值数组和键值对数组，适用于不同场景：1. 仅需键名时用object.keys；2. 仅需值时用object.values；3. 需要键值对时用object.entries；4. 极少数情况才使用for...in并配合hasownproperty判断。

JavaScript的Object.keys方法怎么用？如何遍历对象？

Object.keys 方法在 JavaScript 里其实挺直接的，它就是用来获取一个对象自身所有可枚举属性的键名（也就是属性名）的数组。拿到这个键名数组后，你就能很方便地遍历这个对象的属性了。

解决方案

Object.keys() 的核心用法就是传入一个对象，它会返回一个包含该对象所有自身可枚举属性名（字符串形式）的数组。拿到这个数组后，你就可以用各种数组遍历方法来访问对象的每个属性。

比如，我们有一个用户信息对象：

立即学习“Java免费学习笔记（深入）”；

const userProfile = {
  name: '张三',
  age: 30,
  city: '北京',
  occupation: '前端工程师'
};

// 获取所有键名
const keys = Object.keys(userProfile);
console.log(keys); // 输出: ["name", "age", "city", "occupation"]

// 遍历这些键名，并访问对应的值
keys.forEach(key => {
  console.log(`${key}: ${userProfile[key]}`);
});

/*
输出:
name: 张三
age: 30
city: 北京
occupation: 前端工程师
*/

// 或者使用 for...of 循环，这种方式在处理数组时也很常见
for (const key of keys) {
  console.log(`属性名：${key}，属性值：${userProfile[key]}`);
}

登录后复制

这方法好用就在于它给你一个规整的数组，这样你就能利用 JavaScript 数组的强大功能去处理对象的属性了。

Object.keys 与 for...in 有什么区别？我应该用哪个？

这确实是个常见的问题，很多人刚接触时会混淆。简单来说，Object.keys 和 for...in 都能遍历对象的属性，但它们处理的“范围”和“方式”有本质区别。

for...in 循环会遍历对象自身以及它原型链上所有可枚举的属性。这意味着如果你不小心，可能会遍历到一些你根本不想要的属性，比如从 Object.prototype 继承来的方法。在老代码或者某些特定场景下，你可能还会看到有人用 hasOwnProperty 来过滤：

const myObject = {
  a: 1,
  b: 2
};

// 假设我们给原型链上加个属性
Object.prototype.protoProp = '我很老了';

for (const key in myObject) {
  // 这种判断通常是必要的，避免遍历到原型链上的属性
  if (myObject.hasOwnProperty(key)) {
    console.log(`for...in (自身属性): ${key}: ${myObject[key]}`);
  } else {
    console.log(`for...in (原型链属性): ${key}: ${myObject[key]}`);
  }
}
// 输出:
// for...in (自身属性): a: 1
// for...in (自身属性): b: 2
// for...in (原型链属性): protoProp: 我很老了 (如果没加hasOwnProperty判断，这个也会被遍历到)

登录后复制

而 Object.keys 就“干净”多了。它只返回对象自身的可枚举属性的键名数组，完全不会涉及到原型链上的属性。这在大多数现代 JavaScript 开发中是更推荐的做法，因为它更可预测，也更安全，避免了不必要的副作用。你不需要额外去判断 hasOwnProperty，因为它已经帮你做好了。

所以，我的建议是：如果你只需要遍历对象自身的属性，并且不关心原型链上的东西，那么 Object.keys 几乎总是更好的选择。它更清晰，更符合直觉，也减少了出错的可能性。只有在非常特殊的情况下，比如你需要检查原型链上的属性，或者处理一些遗留代码，才可能会考虑 for...in。

除了 Object.keys，还有哪些遍历对象的方法？

JavaScript 提供了好几种方法来遍历对象，每种都有其适用场景。了解它们能让你在不同需求下选择最合适的工具。

Object.values() 如果你只关心对象属性的“值”而不是“键”，那么 Object.values() 是你的首选。它会返回一个包含对象所有自身可枚举属性值的数组。

const product = {
  name: '智能手表',
  price: 1299,
  color: '黑色'
};

const values = Object.values(product);
console.log(values); // 输出: ["智能手表", 1299, "黑色"]

values.forEach(value => {
  console.log(`产品信息：${value}`);
});

登录后复制

Object.entries() 这个方法非常强大，它返回一个包含对象所有自身可枚举属性的 [key, value] 对数组。当你既需要键又需要值，并且希望以一种结构化的方式处理时，Object.entries() 配合数组解构赋值简直是绝配。

const config = {
  theme: 'dark',
  fontSize: '16px',
  language: 'zh-CN'
};

const entries = Object.entries(config);
console.log(entries);
// 输出: [["theme", "dark"], ["fontSize", "16px"], ["language", "zh-CN"]]

entries.forEach(([key, value]) => { // 使用数组解构赋值
  console.log(`配置项：${key} = ${value}`);
});
/*
输出:
配置项：theme = dark
配置项：fontSize = 16px
配置项：language = zh-CN
*/

登录后复制

这种方式在需要将对象转换为 Map 或进行复杂转换时特别有用。

for...in (再次强调其局限性) 前面已经提到了，虽然它能遍历，但因为会触及原型链，并且遍历顺序不保证（尽管现代 JS 引擎通常会保持插入顺序），所以在大多数情况下，它不如 Object.keys/values/entries 来得直接和安全。但它确实是一种遍历方式，尤其是在处理一些旧代码或者需要检查原型链属性时。
```
const data = { a: 1, b: 2 };
for (const prop in data) {
  if (Object.prototype.hasOwnProperty.call(data, prop)) { // 推荐的更严谨的判断方式
    console.log(`for...in (带hasOwnProperty): ${prop}: ${data[prop]}`);
  }
}
```
登录后复制

总的来说，ES6 引入的 Object.keys, Object.values, Object.entries 极大地简化了对象的遍历操作，让代码更具可读性和健壮性。

在实际开发中，如何选择合适的遍历方法？

选择哪种遍历方法，很大程度上取决于你的具体需求和对代码可读性的考量。

当你只需要属性名（键）时：毫无疑问，使用 Object.keys()。这是最直接、最清晰的方式。比如，你想动态生成一个表头，或者需要根据属性名进行某种查找。
```
// 场景：生成用户权限列表的键名
const permissions = {
  canEdit: true,
  canDelete: false,
  canView: true
};
const permissionKeys = Object.keys(permissions); // ["canEdit", "canDelete", "canView"]
```
登录后复制

当你只需要属性值时： Object.values() 是理想选择。例如，你可能想把一个对象里的所有数值加起来，或者把所有字符串值拼接起来。

// 场景：计算购物车商品总价
const cartItems = {
  item1: 100,
  item2: 50,
  item3: 200
};
const total = Object.values(cartItems).reduce((sum, price) => sum + price, 0); // 350

登录后复制

当你同时需要属性名和属性值时： Object.entries() 结合数组解构赋值是最佳实践。这种方式在处理配置项、渲染列表、或者需要对键值对进行转换时非常方便。它提供了最完整的信息，而且结构清晰。

// 场景：将对象转换为URL查询参数字符串
const params = {
  page: 1,
  limit: 10,
  sort: 'createdAt'
};
const queryString = Object.entries(params)
  .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
  .join('&');
// 输出: "page=1&limit=10&sort=createdAt"

登录后复制

极少数情况下，需要遍历原型链上的可枚举属性时：这时你可能需要 for...in，但务必配合 hasOwnProperty 进行判断，以避免处理到不属于对象自身的属性。这通常发生在处理一些老旧的或者特定框架/库创建的对象时。但说实话，在大多数现代应用开发中，你很少会直接面对这种需求。

总结一下，现代 JavaScript 开发中，Object.keys、Object.values 和 Object.entries 几乎可以满足你所有遍历对象自身属性的需求，它们让代码更健壮、更易读。选择哪一个，就看你当前任务是需要键、值，还是两者兼顾。它们各自的侧重点非常明确，用起来也直观。

以上就是JavaScript的Object.keys方法怎么用？如何遍历对象？的详细内容，更多请关注php中文网其它相关文章！