如何用for遍历json对象

如何用for遍历JSON对象

在JavaScript开发中，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，被广泛应用于前后端数据交互，当我们需要处理JSON对象中的数据时，遍历其属性是常见的需求，本文将详细介绍如何使用for循环（包括for...in循环和传统的for循环结合Object方法）遍历JSON对象,并对比不同场景下的适用方法。

JSON对象的基本结构

在遍历之前，我们先明确JSON对象的定义，JSON对象本质上是一个JavaScript对象，由键（key）和值（value）组成，其中键必须是字符串（或可转换为字符串的值），值可以是字符串、数字、布尔值、数组、对象甚至null。

const user = {
  id: 1,
  name: "张三",
  age: 25,
  hobbies: ["阅读", "运动"],
  address: {
    city: "北京",
    district: "朝阳区"
  }
};

遍历JSON对象,即访问其中的每一个键值对。

使用`for...in`循环遍历JSON对象

for...in是JavaScript中专门用于遍历对象可枚举属性的循环方式,语法简洁且直接针对对象的键。

基本语法

for (const key in object) {
  // 执行逻辑
}

key：遍历过程中，当前属性的键（字符串类型）。
object：要遍历的对象（此处为JSON对象）。

实例演示

以下是用for...in遍历上述user对象的示例：

const user = {
  id: 1,
  name: "张三",
  age: 25,
  hobbies: ["阅读", "运动"],
  address: {
    city: "北京",
    district: "朝阳区"
  }
};
for (const key in user) {
  // 获取当前键对应的值
  const value = user[key];
  console.log(`键: ${key}, 值: ${value}`);
}

输出结果：

键: id, 值: 1
键: name, 值: 张三
键: age, 值: 25
键: hobbies, 值: 阅读,运动
键: address, 值: [object Object]

注意事项

遍历顺序：for...in的遍历顺序可能与对象属性的声明顺序不一致（尤其在某些引擎或复杂对象中），如果需要按特定顺序（如升序）遍历，需额外处理（如先获取键数组排序）。
原型链属性：for...in会遍历对象及其原型链上的所有可枚举属性，如果只想遍历对象自身的属性，需结合hasOwnProperty()判断：
```
for (const key in user) {
  if (user.hasOwnProperty(key)) {
    console.log(`键: ${key}, 值: ${user[key]}`);
  }
}
```

使用传统`for`循环结合`Object`方法

虽然for...in适合遍历对象键，但有时我们需要更灵活的控制（如按索引遍历、处理键的排序等），此时可结合Object提供的方法，将对象的键转换为数组，再用传统for循环遍历。

`Object.keys()` + 传统`for`循环

Object.keys()返回一个包含对象自身可枚举键的数组，配合传统for循环可按数组索引遍历。

语法

const keys = Object.keys(object);
for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  const value = object[key];
  // 执行逻辑
}

实例

const user = { /* 同上 */ };
const keys = Object.keys(user);
for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  const value = user[key];
  console.log(`键: ${key}, 值: ${value}`);
}

输出结果：与for...in一致，但遍历顺序严格按Object.keys()返回的键顺序（通常与声明顺序一致）。

`Object.entries()` + 传统`for`循环

Object.entries()返回一个二维数组，每个子数组是[key, value]的形式，可直接同时获取键和值,减少重复访问对象的操作。

语法

const entries = Object.entries(object);
for (let i = 0; i < entries.length; i++) {
  const [key, value] = entries[i];
  // 执行逻辑
}

实例

const user = { /* 同上 */ };
const entries = Object.entries(user);
for (let i = 0; i < entries.length; i++) {
  const [key, value] = entries[i];
  console.log(`键: ${key}, 值: ${value}`);
}

输出结果：与上述方法一致，但代码更简洁（无需通过user[key]取值）。

适用场景对比

方法	优点	缺点	适用场景
`for...in`	语法简洁，直接遍历对象键	可能遍历原型链属性，顺序不确定	简单遍历对象自身属性，无需关心顺序
`Object.keys()` + `for`	可控制遍历顺序，不遍历原型链	需额外数组存储键，代码稍多	需按特定顺序遍历，或结合数组方法处理
`Object.entries()` + `for`	同时获取键值，代码简洁	需额外数组存储键值对	需频繁访问键值对，或对键值对批量处理

嵌套JSON对象的遍历

如果JSON对象中包含嵌套对象（如user.address），需在遍历时递归处理嵌套结构,以下是一个递归遍历示例：

const deepUser = {
  id: 1,
  name: "张三",
  contact: {
    email: "zhangsan@example.com",
    phone: "13800138000",
    address: {
      city: "北京",
      district: "朝阳区",
      street: "某某街道123号"
    }
  }
};
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(deepUser);

输出结果：

id: 1
name: 张三
contact: [对象]
  email: zhangsan@example.com
  phone: 13800138000
  address: [对象]
    city: 北京
    district: 朝阳区
    street: 某某街道123号

遍历JSON对象是JavaScript开发中的基础操作,选择合适的方法需根据具体需求：

简单遍历对象自身属性：优先使用for...in，注意配合hasOwnProperty()过滤原型链属性。
需控制顺序或批量处理键值对：使用Object.keys()或Object.entries()结合传统for循环,更灵活且可避免原型链问题。
处理嵌套对象：采用递归方式,逐层遍历每个层级的属性。

这些方法，能让你在不同场景下高效处理JSON数据，为后续的数据操作（如过滤、转换、渲染）打下坚实基础。

正文

如何用for遍历json对象