后台返回的json怎么遍历

后台返回的JSON数据遍历全攻略

在现代Web开发中，前端与后端的数据交互几乎离不开JSON（JavaScript Object Notation）格式，后端接口返回的JSON数据往往包含复杂嵌套的结构，如何高效、安全地遍历这些数据，是前端开发者必须的核心技能，本文将从JSON的基础特性出发，结合JavaScript原生方法、循环语法及现代ES6+特性，系统介绍遍历后台返回JSON数据的多种方式，并附实用场景案例,助你轻松应对各种数据结构。

JSON数据结构：遍历前的“必修课”

要遍历JSON数据，首先要明确其结构特性，JSON本质上是键值对的集合，分为两种核心类型：

• 对象（Object）：用 表示，键为字符串，值可以是任意JSON支持的类型（字符串、数字、布尔值、数组、对象或null）。
• 数组（Array）：用 [] 表示，元素可以是任意JSON支持的类型，元素通过索引（0,1,2...）访问。

后端返回的典型JSON数据可能如下：

{
  "code": 200,
  "message": "success",
  "data": {
    "userList": [
      {
        "id": 1,
        "name": "张三",
        "age": 25,
        "hobbies": ["篮球", "编程"],
        "address": {
          "city": "北京",
          "district": "朝阳区"
        }
      },
      {
        "id": 2,
        "name": "李四",
        "age": 30,
        "hobbies": ["阅读", "旅行"],
        "address": {
          "city": "上海",
          "district": "浦东新区"
        }
      }
    ],
    "total": 2
  }
}

遍历前需明确：目标数据是对象还是数组？是否需要处理嵌套结构？ 基于这些信息,才能选择合适的遍历方法。

遍历JSON数据的“三大核心武器”

原生方法：for...in（遍历对象键）与 for...of（遍历数组值）

（1）for...in：遍历对象的“可枚举属性”

for...in 用于遍历对象的所有可枚举属性（包括原型链上的属性，需配合 hasOwnProperty 过滤），语法：

for (const key in object) {
  if (object.hasOwnProperty(key)) { // 过滤掉原型链属性
    const value = object[key];
    console.log(key, value);
  }
}

示例：遍历用户对象

const user = { id: 1, name: "张三", age: 25 };
for (const key in user) {
  if (user.hasOwnProperty(key)) {
    console.log(`${key}: ${user[key]}`); // 输出: id: 1, name: 张三, age: 25
  }
}

注意：for...in 不适合遍历数组（遍历的是索引，且顺序可能不是数字顺序）,更适合遍历对象键。

（2）for...of：遍历数组/类数组的“元素值”

for...of 用于遍历可迭代对象（数组、字符串、Map、Set等），直接获取元素的值，无需索引，语法：

for (const value of array) {
  console.log(value);
}

示例：遍历用户列表

const userList = [
  { id: 1, name: "张三" },
  { id: 2, name: "李四" }
];
for (const user of userList) {
  console.log(user.name); // 输出: 张三, 李四
}

优势：语法简洁，直接访问元素值,无需手动管理索引。

高阶函数：函数式遍历，代码更简洁

对于数组或对象，JavaScript提供了多个高阶函数，支持函数式遍历，代码更简洁、可读性更强。

（1）数组遍历：forEach、map、filter、reduce

• forEach：基础遍历，无返回值
  遍历数组每个元素，执行回调函数，适合“仅遍历不返回”的场景。

  const hobbiesList = ["篮球", "编程", "阅读"];
  hobbiesList.forEach(hobby => {
    console.log(`爱好: ${hobby}`); // 输出: 爱好: 篮球, 爱好: 编程, 爱好: 阅读
  });

• map：映射新数组，保留原数组
  遍历数组并返回一个新数组，新数组元素为回调函数的返回值，适合“数据转换”场景（如提取某个字段）。

  const userList = [{ id: 1, name: "张三" }, { id: 2, name: "李四" }];
  const names = userList.map(user => user.name);
  console.log(names); // 输出: ["张三", "李四"]

• filter：过滤数组，返回符合条件的元素
  遍历数组并返回一个新数组，仅保留回调函数返回 true 的元素，适合“数据筛选”场景（如筛选成年用户）。

  const users = [{ id: 1, name: "张三", age: 25 }, { id: 2, name: "李四", age: 16 }];
  const adults = users.filter(user => user.age >= 18);
  console.log(adults); // 输出: [{ id: 1, name: "张三", age: 25 }]

• reduce：累计计算，返回最终值
  遍历数组并累计计算，返回一个最终值（如求和、统计数量），适合“聚合操作”场景。

  const scores = [85, 90, 78, 92];
  const total = scores.reduce((sum, score) => sum + score, 0);
  console.log(total); // 输出: 345

（2）对象遍历：Object.keys()、Object.values()、Object.entries()

ES6提供了3个静态方法，可将对象转换为数组，再结合高阶函数遍历：

• Object.keys(obj)：返回对象所有键的数组

  const user = { id: 1, name: "张三", age: 25 };
  const keys = Object.keys(user);
  console.log(keys); // 输出: ["id", "name", "age"]
  keys.forEach(key => console.log(`${key}: ${user[key]}`));

• Object.values(obj)：返回对象所有值的数组

  const values = Object.values(user);
  console.log(values); // 输出: [1, "张三", 25]

• Object.entries(obj)：返回键值对数组（[key, value]）
  最灵活的方式，可直接遍历键值对：

  Object.entries(user).forEach(([key, value]) => {
    console.log(`${key}: ${value}`); // 输出: id: 1, name: 张三, age: 25
  });

递归：处理“无限嵌套”的JSON

当JSON数据存在多层嵌套（如对象中嵌套数组、数组中嵌套对象）时，普通循环难以遍历所有层级，此时需使用递归，递归的核心思想是：函数调用自身，直到遍历到最内层的基本类型（字符串、数字、布尔值等）。

示例：递归遍历嵌套JSON，提取所有值

function deepTraverse(obj) {
  let result = [];
  // 判断是否为对象或数组（需遍历的类型）
  if (typeof obj === 'object' && obj !== null) {
    // 如果是数组，用for...of遍历
    if (Array.isArray(obj)) {
      for (const item of obj) {
        result = result.concat(deepTraverse(item)); // 递归处理数组元素
      }
    } 
    // 如果是对象，用Object.entries遍历
    else {
      for (const [key, value] of Object.entries(obj)) {
        result.push(key); // 可选：将键也加入结果
        result = result.concat(deepTraverse(value)); // 递归处理对象值
      }
    }
  } 
  // 如果是基本类型，直接加入结果
  else {
    result.push(obj);
  }
  return result;
}
// 测试嵌套JSON
const nestedData = {
  a: 1