0

0

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

星降

星降

发布时间:2025-07-12 17:21:01

|

876人浏览过

|

来源于php中文网

原创

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 里其实挺直接的,它就是用来获取一个对象自身所有可枚举属性的键名(也就是属性名)的数组。拿到这个键名数组后,你就能很方便地遍历这个对象的属性了。

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

解决方案

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

比如,我们有一个用户信息对象:

立即学习Java免费学习笔记(深入)”;

JavaScript的Object.keys方法怎么用?如何遍历对象?
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.keysfor...in 有什么区别?我应该用哪个?

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

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

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

造次
造次

Liblib打造的AI原创IP视频创作社区

下载
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 提供了好几种方法来遍历对象,每种都有其适用场景。了解它们能让你在不同需求下选择最合适的工具

  1. 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}`);
    });
  2. 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 或进行复杂转换时特别有用。

  3. 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 极大地简化了对象的遍历操作,让代码更具可读性和健壮性。

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

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

  1. 当你只需要属性名(键)时: 毫无疑问,使用 Object.keys()。这是最直接、最清晰的方式。比如,你想动态生成一个表头,或者需要根据属性名进行某种查找。

    // 场景:生成用户权限列表的键名
    const permissions = {
      canEdit: true,
      canDelete: false,
      canView: true
    };
    const permissionKeys = Object.keys(permissions); // ["canEdit", "canDelete", "canView"]
  2. 当你只需要属性值时Object.values() 是理想选择。例如,你可能想把一个对象里的所有数值加起来,或者把所有字符串值拼接起来。

    // 场景:计算购物车商品总价
    const cartItems = {
      item1: 100,
      item2: 50,
      item3: 200
    };
    const total = Object.values(cartItems).reduce((sum, price) => sum + price, 0); // 350
  3. 当你同时需要属性名和属性值时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"
  4. 极少数情况下,需要遍历原型链上的可枚举属性时: 这时你可能需要 for...in,但务必配合 hasOwnProperty 进行判断,以避免处理到不属于对象自身的属性。这通常发生在处理一些老旧的或者特定框架/库创建的对象时。但说实话,在大多数现代应用开发中,你很少会直接面对这种需求。

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

103

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

195

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

221

2025.12.24

php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

71

2025.12.04

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

529

2023.09.20

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

298

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

212

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1498

2023.10.24

Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

10

2026.01.27

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.2万人学习

Pandas 教程
Pandas 教程

共15课时 | 1.0万人学习

ASP 教程
ASP 教程

共34课时 | 4.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号