怎么遍历一个json对象

如何遍历一个JSON对象：全面指南

在JavaScript开发中,JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，因其易读性和灵活性被广泛使用，无论是处理API返回的数据、解析配置文件，还是操作前端状态，遍历JSON对象都是一项基础且高频的操作，本文将详细介绍遍历JSON对象的核心方法、适用场景及最佳实践，帮助你高效处理各种数据结构。

JSON对象与遍历的基本概念

JSON对象本质上是一个由键（key）和值（value）组成的集合，值可以是字符串、数字、布尔值、数组、对象或null，遍历JSON对象，即访问其所有键值对，对每个值执行特定操作（如打印、计算、修改等），在JavaScript中，JSON对象本质上是普通对象（Object），因此可以使用多种原生方法或循环结构进行遍历。

遍历JSON对象的常用方法

for...in 循环：遍历对象的可枚举属性

for...in 是专门用于遍历对象可枚举属性的循环结构，会遍历对象自身及其原型链上的可枚举属性（需结合hasOwnProperty过滤原型属性）。

语法：

for (let key in obj) {
  if (obj.hasOwnProperty(key)) { // 过滤原型链上的属性
    const value = obj[key];
    // 操作key和value
  }
}

示例：

const user = {
  name: "Alice",
  age: 25,
  hobbies: ["reading", "coding"]
};
for (let key in user) {
  if (user.hasOwnProperty(key)) {
    console.log(`${key}: ${user[key]}`);
  }
}
// 输出：
// name: Alice
// age: 25
// hobbies: ["reading", "coding"]

适用场景：需要遍历对象所有自身属性（包括嵌套对象或数组时需递归处理），或需同时获取键和值的场景。

Object.keys() + forEach/for...of：遍历自身可枚举键

Object.keys() 方法返回一个包含对象自身所有可枚举键的数组，可结合数组遍历方法（如forEach、for...of）操作。

语法：

Object.keys(obj).forEach(key => {
  const value = obj[key];
  // 操作key和value
});
// 或使用 for...of
const keys = Object.keys(obj);
for (const key of keys) {
  const value = obj[key];
  // 操作key和value
}

示例：

const user = {
  name: "Bob",
  age: 30,
  city: "Shanghai"
};
Object.keys(user).forEach(key => {
  console.log(`${key}: ${user[key]}`);
});
// 输出：
// name: Bob
// age: 30
// city: Shanghai

适用场景：仅需遍历对象自身的可枚举属性，无需考虑原型链，且偏好数组式遍历方法（如forEach、map等）。

Object.values()：直接遍历值

如果不需要键,只需获取对象的所有值，可以使用Object.values()，返回一个包含对象自身可枚举值的数组。

语法：

Object.values(obj).forEach(value => {
  // 操作value
});

示例：

const user = {
  name: "Charlie",
  age: 28,
  scores: [90, 85, 95]
};
Object.values(user).forEach(value => {
  console.log(value);
});
// 输出：
// Charlie
// 28
// [90, 85, 95]

适用场景：仅需处理对象的值，无需关心键的场景（如计算总和、过滤有效值等）。

Object.entries() + forEach/for...of：同时获取键和值

Object.entries() 方法返回一个二维数组，每个子数组是[key, value]形式的键值对，适合同时操作键和值。

语法：

Object.entries(obj).forEach(([key, value]) => {
  // 操作key和value
});
// 或使用 for...of
for (const [key, value] of Object.entries(obj)) {
  // 操作key和value
}

示例：

const product = {
  id: 1001,
  name: "Laptop",
  price: 4999
};
Object.entries(product).forEach(([key, value]) => {
  console.log(`${key.toUpperCase()}: ${value}`);
});
// 输出：
// ID: 1001
// NAME: Laptop
// PRICE: 4999

适用场景：需要同时获取键和值，且偏好数组解构赋值的简洁写法。

递归遍历：处理嵌套JSON对象

当JSON对象包含多层嵌套（如对象嵌套对象或数组）时，需使用递归遍历所有层级的键值对。

示例：

const nestedData = {
  user: {
    name: "David",
    contact: {
      email: "david@example.com",
      phone: "123456789"
    }
  },
  orders: [
    { id: 1, items: ["book", "pen"] },
    { id: 2, items: ["laptop"] }
  ]
};
function traverseJSON(obj, indent = 0) {
  const spaces = "  ".repeat(indent);
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      const value = obj[key];
      if (typeof value === "object" && value !== null) {
        console.log(`${spaces}${key}:`);
        traverseJSON(value, indent + 1);
      } else {
        console.log(`${spaces}${key}: ${value}`);
      }
    }
  }
}
traverseJSON(nestedData);
// 输出：
// user:
//   name: David
//   contact:
//     email: david@example.com
//     phone: 123456789
// orders:
//   0:
//     id: 1
//     items: book,pen
//   1:
//     id: 2
//     items: laptop

适用场景：处理复杂嵌套结构（如API返回的多层级数据、配置文件等），需逐层访问所有键值对。

不同方法的对比与选择

注意事项与最佳实践

1. 过滤原型属性：使用for...in时，务必通过obj.hasOwnProperty(key)过滤原型链上的属性，避免遍历到非自身定义的属性（如toString、constructor等）。

2. 处理null或非对象：遍历前需检查对象是否为null或非对象类型（如字符串、数字），否则会抛出错误：

   const data = null;
   if (typeof data === "object" && data !== null) {
     // 安全遍历
   }

3. 性能考虑：for...in遍历原型链时性能较低，若仅需自身属性，优先使用Object.keys()/Object.entries()，对于大型对象，避免在循环内创建不必要的函数或对象。

4. 不可变性：遍历JSON对象时，若需修改值，建议直接修改obj[key]（对象/数组为引用类型，修改会影响原对象）；若需保持不可变性，可先深拷贝再遍历（使用JSON.parse(JSON.stringify(obj))或lodash.cloneDeep）。

遍历JSON对象是JavaScript开发中的基础技能,选择合适的方法取决于具体需求：

• 简单遍历自身属性：Object.keys()/Object.entries() + 数组遍历；
• 需遍历所有属性（含嵌套）：for...in + 递归；
• 仅需值：Object.values()。

这些方法并注意最佳实践,能让你高效处理各种JSON数据结构，提升开发效率。