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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解es6超好用的语法糖Decorator

    详解es6超好用的语法糖Decorator

    这篇文章主要介绍了详解es6超好用的语法糖Decorator,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • JavaScript的介绍和简单语法(示例代码)

    JavaScript的介绍和简单语法(示例代码)

    JavaScript是一种广泛使用的脚本语言,为网页添加交互性和动态功能提供了强大的支持,在本文中,我们将深入了解JavaScript的基本概念和用法,包括它在HTML中的书写位置、注释和结束符的使用,以及一种常用的函数——alert语句,感兴趣的朋友一起看看吧
    2023-09-09
  • javascript动态加载三

    javascript动态加载三

    首先是通过同步策略来实现模块加载与回调函数之间进行分离,接着是通过异步策略来实现模块加载与回调函数之间进行分离
    2012-08-08
  • easywasmplayer实现视频流播放示例详解

    easywasmplayer实现视频流播放示例详解

    这篇文章主要为大家介绍了easywasmplayer实现视频流播放示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • JavaScript不刷新实现浏览器的前进后退功能

    JavaScript不刷新实现浏览器的前进后退功能

    这篇文章主要介绍了JavaScript不刷新实现浏览器的前进后退功能,本文给出了HTML5解决方案、老旧浏览器的写法等方法,需要的朋友可以参考下
    2014-11-11
  • 批量实现面向对象的实例代码

    批量实现面向对象的实例代码

    本文为大家详细介绍下面向对象的继承以及如何实现批量实现面向对象,感兴趣的可以参考下哈,希望对大家有所帮助
    2013-07-07
  • 深入浅析javascript立即执行函数

    深入浅析javascript立即执行函数

    在Javascript中,任何function在执行的时候都会创建一个执行上下文,因为为function声明的变量和function有可能只在该function内部,这个上下文,在调用function的时候,提供了一种简单的方式来创建自由变量或私有子function。
    2015-10-10
  • Js类的构建与继承案例详解

    Js类的构建与继承案例详解

    这篇文章主要介绍了Js类的构建与继承案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • webpack开发跨域问题解决办法

    webpack开发跨域问题解决办法

    本篇文章主要介绍了webpack开发跨域问题解决办法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JS中的art-template模板如何使用if判断

    JS中的art-template模板如何使用if判断

    这篇文章主要介绍了JS中的art-template模板如何使用if判断,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论