js如何遍历json并打印

JavaScript 遍历 JSON 对象并打印其内容的几种方法**

在 JavaScript 开发中，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，因其易于人阅读和编写，也易于机器解析和生成，而被广泛应用，我们经常需要从 API 获取数据、从配置文件读取信息，这些数据通常以 JSON 格式存在，当我们得到一个 JSON 对象后，遍历并打印其内容是常见的操作，这有助于我们了解数据结构、调试代码或展示数据给用户，本文将详细介绍几种在 JavaScript 中遍历 JSON 对象并打印其内容的方法。

我们需要明确一点：在 JavaScript 中，JSON 对象本质上就是 JavaScript 的对象（Object）或数组（Array），遍历 JSON 对象的方法与遍历普通 JavaScript 对象和数组的方法是一致的。

假设我们有以下 JSON 对象作为示例：

const userJson = {
  id: 1,
  name: "张三",
  age: 30,
  email: "zhangsan@example.com",
  isStudent: false,
  courses: ["JavaScript", "React", "Node.js"],
  address: {
    city: "北京",
    district: "朝阳区"
  }
};

使用 for...in 循环遍历对象属性

for...in 循环用于遍历对象的可枚举属性（包括继承的可枚举属性，但通常我们只关心对象自身的属性），对于数组，它会遍历索引。

遍历并打印 userJson 的顶层属性：

console.log("使用 for...in 循环遍历顶层属性：");
for (let key in userJson) {
  // 使用 hasOwnProperty 确保只遍历对象自身的属性，避免遍历到原型链上的属性
  if (userJson.hasOwnProperty(key)) {
    const value = userJson[key];
    console.log(`属性名: ${key}, 属性值: ${value}`);
  }
}

输出：

使用 for...in 循环遍历顶层属性：
属性名: id, 属性值: 1
属性名: name, 属性值: 张三
属性名: age, 属性值: 30
属性名: email, 属性值: zhangsan@example.com
属性名: isStudent, 属性值: false
属性名: courses, 属性值: JavaScript,React,Node.js
属性名: address, 属性值: [object Object] // 注意：对象和数组直接打印会显示 [object Object]

注意：

• 对于对象类型的值（如 address），直接 console.log(value) 会得到 [object Object]，这通常不是我们想要的具体内容，如果需要打印对象内部的属性，可以在循环内部进行判断，如果是对象，则递归遍历。
• 对于数组类型的值（如 courses），直接 console.log(value) 会将数组元素以逗号连接的形式打印出来。

使用 Object.keys()、Object.values()、Object.entries()

ES6 为 Object 对象添加了一些静态方法，可以更方便地获取对象的键、值或键值对数组。

Object.keys(obj)

返回一个包含对象自身所有可枚举属性键名的数组。

console.log("\n使用 Object.keys() 遍历：");
const keys = Object.keys(userJson);
keys.forEach(key => {
  console.log(`属性名: ${key}, 属性值: ${userJson[key]}`);
});

Object.values(obj)

返回一个包含对象自身所有可枚举属性值的数组。

console.log("\n使用 Object.values() 遍历：");
const values = Object.values(userJson);
values.forEach(value => {
  console.log(`属性值: ${value}`);
});

Object.entries(obj)

返回一个包含对象自身所有可枚举属性的键值对数组,其中每个元素是一个 [key, value] 的数组。

console.log("\n使用 Object.entries() 遍历：");
const entries = Object.entries(userJson);
entries.forEach(([key, value]) => { // 使用解构赋值
  console.log(`属性名: ${key}, 属性值: ${value}`);
});

这三种方法都只遍历对象自身的可枚举属性，不会遍历原型链上的属性。 对于打印嵌套对象或数组，同样需要额外处理。

递归遍历（处理嵌套 JSON）

JSON 对象中包含嵌套的对象或数组，并且我们希望打印出所有层级的属性和值，那么就需要使用递归的方法。

function printJson(obj, indent = 0) {
  const indentStr = '  '.repeat(indent); // 用于缩进，美化输出
  if (Array.isArray(obj)) {
    console.log(`${indentStr}[`);
    obj.forEach(item => {
      printJson(item, indent + 1);
    });
    console.log(`${indentStr}]`);
  } else if (typeof obj === 'object' && obj !== null) {
    console.log(`${indentStr}{`);
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        console.log(`${indentStr}  "${key}":`);
        printJson(obj[key], indent + 2);
      }
    }
    console.log(`${indentStr}}`);
  } else {
    // 基本类型
    console.log(`${indentStr}${obj}`);
  }
}
console.log("\n使用递归方法遍历并打印嵌套 JSON：");
printJson(userJson);

输出（简化版，实际会有缩进）：

使用递归方法遍历并打印嵌套 JSON：
{
  "id":
    1
  "name":
    "张三"
  "age":
    30
  "email":
    "zhangsan@example.com"
  "isStudent":
    false
  "courses":
    [
      "JavaScript"
      "React"
      "Node.js"
    ]
  "address":
    {
      "city":
        "北京"
      "district":
        "朝阳区"
    }
}

这个递归函数能够处理对象和数组,并通过缩进清晰地展示嵌套结构。

使用 JSON.stringify() 进行格式化打印

我们只是想快速、清晰地看到一个 JSON 对象的完整结构，而不需要自定义遍历逻辑，这时可以使用 JSON.stringify() 方法，它可以一个 JSON 对象转换为 JSON 字符串，并且支持格式化。

console.log("\n使用 JSON.stringify() 格式化打印 JSON：");
// 第三个参数是缩进空格数，用于美化输出
console.log(JSON.stringify(userJson, null, 2));

输出：

{
  "id": 1,
  "name": "张三",
  "age": 30,
  "email": "zhangsan@example.com",
  "isStudent": false,
  "courses": [
    "JavaScript",
    "React",
    "Node.js"
  ],
  "address": {
    "city": "北京",
    "district": "朝阳区"
  }
}

JSON.stringify() 还可以接受第二个参数，一个替换函数，可以在序列化过程中修改值。

遍历 JSON 对象并打印内容是 JavaScript 开发中的基础技能，选择哪种方法取决于你的具体需求：

1. for...in 循环：适合遍历对象的所有可枚举属性（包括原型链，需配合 hasOwnProperty），简单直接。
2. Object.keys() / Object.values() / Object.entries()：ES6 提供的更现代、更安全（不遍历原型链）的方式，配合 forEach 或 for...of 使用非常方便。
3. 递归遍历：当 JSON 对象存在多层嵌套，且需要打印所有层级内容时，递归是最佳选择，可以灵活控制输出格式。
4. JSON.stringify()：适合快速、清晰地查看整个 JSON 对象的结构，无需编写遍历逻辑，格式化输出效果很好。

在实际开发中,根据 JSON 的复杂程度和你的打印目的，选择最合适的方法，甚至可以结合多种方法以达到最佳效果，希望本文介绍的方法能帮助你更好地处理和调试 JSON 数据！