如何循环json的key值

如何循环遍历 JSON 对象的 Key 值：全面指南

在 JavaScript 开发中，JSON（JavaScript Object Notation）是一种常用的数据交换格式，无论是处理 API 响应、配置文件还是前端数据状态，我们经常需要遍历 JSON 对象的 key 值（属性名），本文将详细介绍多种循环遍历 JSON 对象 key 值的方法，包括其原理、适用场景及代码示例,帮助你根据实际需求选择最合适的方案。

JSON 对象与 JavaScript 对象的关系

首先需要明确：JSON 对象本质上是 JavaScript 对象的子集，JSON 格式要求严格（如属性名必须用双引号包裹、值只能是字符串、数字、布尔值、数组、对象或 null），而 JavaScript 对象的语法更灵活（属性名可用单引号或双引号、值可以是任意 JavaScript 类型），但在实际开发中，我们通常将符合 JSON 格式的字符串通过 JSON.parse() 转换为 JavaScript 对象后，再进行遍历操作，本文讨论的“JSON 对象 key 值遍历”，实际指的是对 JavaScript 对象属性名的遍历。

循环遍历 JSON 对象 key 值的常用方法

方法 1：for...in 循环

for...in 是 JavaScript 中专门用于遍历对象可枚举属性（包括原型链上的属性）的循环语句，它是遍历对象 key 值最直接的方式之一。

基本语法

for (const key in object) {
  // 执行逻辑，key 为当前属性名
}

示例代码

const jsonData = {
  name: "Alice",
  age: 25,
  city: "New York"
};
for (const key in jsonData) {
  console.log(key); // 输出：name, age, city
}

注意事项

1. 遍历原型链属性：for...in 会遍历对象及其原型链上的所有可枚举属性，如果只想遍历对象自身的属性，需要结合 Object.prototype.hasOwnProperty() 判断：

   for (const key in jsonData) {
     if (Object.prototype.hasOwnProperty.call(jsonData, key)) {
       console.log(key); // 确保只遍历对象自身的 key
     }
   }

   （推荐使用 Object.hasOwn(obj, key) 替代，它是 ES2022 引入的新方法，更简洁：if (Object.hasOwn(jsonData, key))）

2. 属性顺序：for...in 的遍历顺序不一定与对象属性的声明顺序一致（尽管现代 JavaScript 引擎通常按声明顺序遍历普通对象），如果需要严格按顺序遍历，建议使用 Object.keys() + forEach（见方法 2）。

方法 2：Object.keys() + forEach 或 for...of

Object.keys() 方法返回一个包含对象自身可枚举属性名的数组（不包括原型链属性），配合数组遍历方法（如 forEach 或 for...of）可以更灵活地处理 key 值。

基本语法

const keys = Object.keys(object); // 获取对象自身的 key 数组
keys.forEach(key => {
  // 执行逻辑
});

或使用 for...of 遍历 key 数组：

for (const key of Object.keys(object)) {
  // 执行逻辑
}

示例代码

const jsonData = {
  name: "Bob",
  age: 30,
  city: "London"
};
// 使用 forEach
Object.keys(jsonData).forEach(key => {
  console.log(key); // 输出：name, age, city（按声明顺序）
});
// 使用 for...of
for (const key of Object.keys(jsonData)) {
  console.log(key); // 输出：name, age, city
}

优点

• 只遍历对象自身的属性,无需手动过滤原型链属性。
• 遍历顺序与 Object.keys() 返回的数组顺序一致（对普通对象而言，通常为声明顺序）。
• 可直接结合数组的其他方法（如 map、filter）进行链式操作。

方法 3：Object.entries() + forEach 或 for...of

Object.entries() 方法返回一个包含对象自身可枚举属性键值对的数组，每个元素是一个形如 [key, value] 的数组，如果同时需要 key 和 value,此方法更高效。

基本语法

Object.entries(object).forEach(([key, value]) => {
  // 执行逻辑，key 为属性名，value 为属性值
});

或使用 for...of：

for (const [key, value] of Object.entries(object)) {
  // 执行逻辑
}

示例代码

const jsonData = {
  name: "Charlie",
  age: 35,
  city: "Paris"
};
Object.entries(jsonData).forEach(([key, value]) => {
  console.log(`Key: ${key}, Value: ${value}`);
  // 输出：
  // Key: name, Value: Charlie
  // Key: age, Value: 35
  // Key: city, Value: Paris
});

适用场景

• 当遍历时需要同时获取 key 和 value 时，比 Object.keys() + 额外访问 object[key] 更简洁。
• 适合需要处理键值对的逻辑（如格式化输出、数据转换等）。

方法 4：Object.getOwnPropertyNames()

Object.getOwnPropertyNames() 方法返回一个包含对象所有自身属性名的数组，包括不可枚举属性（如通过 Object.defineProperty 定义的可枚举属性为 false 的属性）。

基本语法

const keys = Object.getOwnPropertyNames(object);
keys.forEach(key => {
  // 执行逻辑
});

示例代码

const jsonData = { a: 1 };
Object.defineProperty(jsonData, "b", {
  value: 2,
  enumerable: false // 不可枚举属性
});
console.log(Object.getOwnPropertyNames(jsonData)); // 输出：["a", "b"]
Object.getOwnPropertyNames(jsonData).forEach(key => {
  console.log(key); // 输出：a, b（包括不可枚举属性）
});

与 Object.keys() 的区别

• Object.keys() 只返回可枚举属性，Object.getOwnPropertyNames() 返回所有属性（包括不可枚举）。
• 如果遍历目标是普通 JSON 对象（通常属性均为可枚举），Object.keys() 更常用；若涉及特殊属性（如内置对象或自定义不可枚举属性），可使用 Object.getOwnPropertyNames()。

方法 5：Reflect.ownKeys()

Reflect.ownKeys() 是 ES6 引入的方法，返回一个包含对象所有自身属性名的数组，包括不可枚举属性和 Symbol 类型属性（其他方法如 Object.keys() 和 Object.getOwnPropertyNames() 均不返回 Symbol 属性）。

基本语法

Reflect.ownKeys(object).forEach(key => {
  // 执行逻辑，key 可能是字符串或 Symbol
});

示例代码

const jsonData = { a: 1 };
const symbolKey = Symbol("secret");
jsonData[symbolKey] = "hidden"; // Symbol 属性
console.log(Reflect.ownKeys(jsonData)); // 输出：["a", Symbol(secret)]
Reflect.ownKeys(jsonData).forEach(key => {
  console.log(key); // 输出：a, Symbol(secret)
});

适用场景

• 当对象包含 Symbol 类型的属性名时,这是唯一能遍历到所有自身属性的方法。
• 适用于需要全面处理对象所有属性（包括特殊类型）的场景。

方法对比与选择建议