JavaScript遍历JSON所有Key的常用方法总结

更新时间：2026年05月14日 08:24:35 作者：detayun

这篇文章主要为大家详细介绍了JavaScript遍历JSON所有Key的四种常用方法,并展示了递归遍历嵌套JSON的技巧和各方法的特点,有需要的小伙伴可以了解下

for…in 循环（最常用）

const json = {
  name: "张三",
  age: 25,
  city: "北京"
};

for (let key in json) {
  console.log(key);           // name, age, city
  console.log(json[key]);     // 张三, 25, 北京
}

Object.keys()（推荐 ✅）

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

// 或
Object.keys(json).map(key => {
  console.log(key);
});

Object.entries()（同时获取 key 和 value）

for (let [key, value] of Object.entries(json)) {
  console.log(`${key}: ${value}`);
}

Object.getOwnPropertyNames()（包括不可枚举属性）

Object.getOwnPropertyNames(json).forEach(key => {
  console.log(key);
});

递归遍历嵌套 JSON

function traverseKeys(obj, prefix = '') {
  for (let key in obj) {
    const fullKey = prefix ? `${prefix}.${key}` : key;
    console.log(fullKey);
    
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      traverseKeys(obj[key], fullKey);  // 递归
    }
  }
}

const nestedJson = {
  user: {
    name: "张三",
    address: {
      city: "北京",
      street: "长安街"
    }
  }
};

traverseKeys(nestedJson);
// 输出: user
//       user.name
//       user.address
//       user.address.city
//       user.address.street

方法对比

方法	遍历原型链	包含 Symbol	推荐场景
`for...in`	✅	❌	简单遍历
`Object.keys()`	❌	❌	日常推荐
`Object.entries()`	❌	❌	需要 key+value
`getOwnPropertyNames()`	❌	✅	完整属性

推荐使用 Object.keys() 或 Object.entries()，更安全且语义清晰！

方法补充

在 JavaScript 中，遍历 JSON（即 JavaScript 对象）的所有 Key 有多种常用方法。下面按照推荐程度和使用场景介绍。

1. Object.keys() – 最常用

返回对象自身可枚举属性的 key 数组，不含原型链上的属性。

const obj = { name: 'Alice', age: 25, city: 'Beijing' };
Object.keys(obj).forEach(key =&gt; {
  console.log(key, obj[key]);
});
// 输出: name Alice, age 25, city Beijing

2. for...in – 遍历所有可枚举属性（含原型链）

for (let key in obj) {
  if (obj.hasOwnProperty(key)) { // 过滤掉原型链上的属性
    console.log(key, obj[key]);
  }
}

如果不加 hasOwnProperty 判断，会遍历到继承的属性（如 toString），通常需要避免。

3. Object.entries() – 同时获取键和值

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

4. Object.getOwnPropertyNames() – 包含不可枚举属性

const obj = Object.create({}, {
  visible: { value: 1, enumerable: true },
  hidden:  { value: 2, enumerable: false }
});
Object.getOwnPropertyNames(obj).forEach(key =&gt; console.log(key));
// 输出: visible, hidden （包含不可枚举的 hidden）

5. Reflect.ownKeys() – 包含 Symbol 类型键

const sym = Symbol('id');
const obj = { [sym]: 123, name: 'test' };
Reflect.ownKeys(obj).forEach(key =&gt; console.log(key, obj[key]));
// 输出: name test, Symbol(id) 123

6. 遍历嵌套 JSON 的所有 Key（递归）

如果 JSON 内部还嵌套了对象或数组，需要递归才能获取所有层级的键。

function getAllKeys(obj, prefix = '') {
  let keys = [];
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      const fullKey = prefix ? `${prefix}.${key}` : key;
      keys.push(fullKey);
      const val = obj[key];
      if (val &amp;&amp; typeof val === 'object') {
        keys = keys.concat(getAllKeys(val, fullKey));
      }
    }
  }
  return keys;
}

const json = {
  user: { name: 'John', address: { city: 'NYC', zip: 10001 } },
  active: true
};
console.log(getAllKeys(json));
// 输出: ['user', 'user.name', 'user.address', 'user.address.city', 'user.address.zip', 'active']

方法	自身可枚举	自身不可枚举	原型链	Symbol
`Object.keys()`	✔️	❌	❌	❌
`for...in`	✔️	❌	✔️（需过滤）	❌
`Object.getOwnPropertyNames()`	✔️	✔️	❌	❌
`Reflect.ownKeys()`	✔️	✔️	❌	✔️

日常遍历普通 JSON 对象，Object.keys() 是最简单、最推荐的方法。如果需要同时获取值，使用 Object.entries()。如果需要包含不可枚举或 Symbol 键，再考虑另外两种。

到此这篇关于JavaScript遍历JSON所有Key的常用方法总结的文章就介绍到这了,更多相关JavaScript遍历JSON所有Key内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript表单验证完美代码
用原生JS写一个简单的表单验证功能，代码分为html部分和js部分，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
2017-03-03
JavaScript脚本延迟加载有哪些方式
本文主要介绍了JavaScript脚本延迟加载有哪些方式,主要介绍了五种方式,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
2024-04-04
JS/HTML5游戏常用算法之追踪算法实例详解
这篇文章主要介绍了JS/HTML5游戏常用算法之追踪算法,结合吃豆人游戏的算法原理以实例形式详细分析了追踪算法的相关算法操作技巧与注意事项,需要的朋友可以参考下
2018-12-12
BootStrap表单验证实例代码
这篇文章主要介绍了bootstrap表单验证的实例代码，代码中包括引入的js文件，具体实现方法，大家参考本文
2017-01-01
微信小程序手机号验证码登录的项目实现
本文主要介绍了微信小程序手机号验证码登录的项目实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
快速解决select2在bootstrap模态框中下拉框隐藏的问题
今天小编就为大家分享一篇快速解决select2在bootstrap模态框中下拉框隐藏的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
AngularJs中Bootstrap3 datetimepicker使用实例
这篇文章主要为大家详细介绍了AngularJs中Bootstrap3 datetimepicker使用实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
JS创建对象的写法示例
这篇文章主要介绍了JS创建对象的写法,结合实例形式分析了javascript对象的定义、实现方法与使用技巧,需要的朋友可以参考下
2016-11-11
webpack+express实现文件精确缓存的示例代码
这篇文章主要介绍了webpack+express实现文件精确缓存的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
JavaScript函数的一些注意要点小结及js匿名函数
本文给大家总结了javascript函数的一些注意要点及js匿名函数，主要知识点有：函数的基本语法、函数的参数、函数的重载相关知识，对本文感兴趣的朋友一起学习吧
2015-11-11