JavaScript遍历对象并获取key和value的几种常见方法

 更新时间:2025年07月10日 09:58:49   作者:超人不会飞-_-||  
在JavaScript中,遍历对象的属性和值是常见的操作,特别是在处理数据对象或者进行对象的序列化时,这里我们将深入探讨几种JavaScript遍历对象并获取key和value的几种常见方法,需要的朋友可以参考下

在 JavaScript 中,有多种方法可以遍历对象的属性并获取每个属性的键(key)和值(value)。以下是几种常见的方法:

使用 for…in 循环

for…in 循环用于遍历对象的可枚举属性(包括原型链上的属性)。

const obj = { a: 1, b: 2, c: 3 };

for (const key in obj) {
  if (obj.hasOwnProperty(key)) { // 检查属性是否属于对象本身,而不是原型链上的
    const value = obj[key];
    console.log(key, value);
  }
}

使用 Object.keys() 方法

Object.keys() 方法返回一个数组,该数组包含对象自身的所有可枚举属性键。

const obj = { a: 1, b: 2, c: 3 };

Object.keys(obj).forEach(key => {
  const value = obj[key];
  console.log(key, value);
});

使用 Object.entries() 方法

Object.entries() 方法返回一个数组,数组中的每个元素都是一个包含键和值的数组。

const obj = { a: 1, b: 2, c: 3 };

Object.entries(obj).forEach(([key, value]) => {
  console.log(key, value);
});

使用 Object.getOwnPropertyNames() 方法

Object.getOwnPropertyNames() 方法返回一个数组,该数组包含对象自身的所有属性键(无论是否可枚举)。

const obj = { a: 1, b: 2, c: 3 };

Object.getOwnPropertyNames(obj).forEach(key => {
  const value = obj[key];
  console.log(key, value);
});

使用 Object.getOwnPropertySymbols() 方法

Object.getOwnPropertySymbols() 方法返回一个数组,该数组包含对象自身的所有 Symbol 类型的属性键。

const obj = { a: 1, b: 2, [Symbol('c')]: 3 };

Object.getOwnPropertySymbols(obj).forEach(sym => {
  const value = obj[sym];
  console.log(sym, value);
});

使用 Reflect.ownKeys() 方法

Reflect.ownKeys() 方法返回一个数组,该数组包含对象自身的所有属性键(包括不可枚举属性和 Symbol 类型的属性键)。

const obj = { a: 1, b: 2, [Symbol('c')]: 3 };

Reflect.ownKeys(obj).forEach(key => {
  const value = obj[key];
  console.log(key, value);
});

总结

  • 使用 for…in 循环可以遍历对象的所有可枚举属性,但需要配合 hasOwnProperty 方法来排除原型链上的属性。
  • Object.keys() 方法返回一个包含对象自身所有可枚举属性键的数组。
  • Object.entries() 方法返回一个包含对象自身所有可枚举属性键和值的数组。
  • Object.getOwnPropertyNames() 方法返回一个包含对象自身所有属性键(无论是否可枚举)的数组。
  • Object.getOwnPropertySymbols() 方法返回一个包含对象自身所有 Symbol 类型属性键的数组。
  • Reflect.ownKeys() 方法返回一个包含对象自身所有属性键(包括不可枚举属性和 Symbol 类型的属性键)的数组。

到此这篇关于JavaScript遍历对象并获取key和value的几种常见方法的文章就介绍到这了,更多相关JavaScript遍历对象并获取key和value内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript中ahooks 处理 DOM 的方法

    JavaScript中ahooks 处理 DOM 的方法

    这篇文章主要介绍了JavaScript中ahooks处理DOM的方法,主要通过ahooks对DOM类Hooks使用规范,以及源码中是如何去做处理的,具体详细介绍需要的小伙伴可以参考一下下面文章内容
    2022-06-06
  • 微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】

    微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】

    这篇文章主要介绍了微信小程序实现发送模板消息功能,结合实例形式分析了微信小程序实现通过openid推送消息给用户相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • Ionic默认的Tabs模板使用实例

    Ionic默认的Tabs模板使用实例

    这篇文章主要为大家详细介绍了Ionic默认的Tabs模板使用实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • html+js实现简单的计算器代码(加减乘除)

    html+js实现简单的计算器代码(加减乘除)

    下面小编就为大家带来一篇html+js实现简单的计算器代码(加减乘除)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • javascript中in运算符用法分析

    javascript中in运算符用法分析

    这篇文章主要介绍了javascript中in运算符用法,实例分析了in运算符的相关使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • js propertychange和oninput事件

    js propertychange和oninput事件

    项目中常遇到输入框检查的需求,比如即时搜索,用change事件?change事件失去焦点才发生,无法做到即时。keypresss事件?能监听到键盘,但监听不到鼠标复制粘贴,不完美
    2014-09-09
  • js 将线性数据转为树形的示例代码

    js 将线性数据转为树形的示例代码

    这篇文章主要介绍了js 将线性数据转为树形的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • xml 封装与解析(javascript和C#中)

    xml 封装与解析(javascript和C#中)

    xml 封装与解析 javascript和C#中的分别实现代码。
    2009-07-07
  • 通过JavaScript实现CSS和JS文件的动态加载

    通过JavaScript实现CSS和JS文件的动态加载

    在现代Web开发中,动态加载CSS和JavaScript文件是一个常见的需求,这种技术可以用来优化页面加载速度,减少初始加载时间,并提高用户体验,本文将详细介绍如何通过JavaScript实现CSS和JS文件的动态加载,包括不同的加载方法、注意事项以及最佳实践
    2024-11-11
  • 一文解析ChatGPT 之 Fetch 请求

    一文解析ChatGPT 之 Fetch 请求

    这篇文章主要为大家介绍了ChatGPT 之 Fetch请求的内容解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03

最新评论