js如何将json遍历出来

JavaScript如何高效遍历JSON数据：从基础到进阶技巧

在JavaScript开发中,JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，被广泛应用于前后端数据交互，如何高效遍历JSON数据是每个前端开发者必备的技能，本文将详细介绍JavaScript中遍历JSON数据的多种方法，从基础的for循环到现代的迭代器方法，帮助你选择最适合场景的遍历方式。

JSON数据结构简介

JSON数据本质上是由键值对组成的数据结构,可以是对象（Object）或数组（Array）。

const jsonData = {
  name: "张三",
  age: 30,
  hobbies: ["阅读", "旅行", "编程"],
  address: {
    city: "北京",
    district: "朝阳区"
  },
  friends: [
    {name: "李四", age: 28},
    {name: "王五", age: 32}
  ]
};

遍历JSON对象的基本方法

for...in 循环

for...in循环用于遍历对象的可枚举属性（包括继承的属性），适用于遍历JSON对象的键：

for (let key in jsonData) {
  if (jsonData.hasOwnProperty(key)) { // 过滤掉继承的属性
    console.log(`${key}: ${jsonData[key]}`);
  }
}

优点：

简单直观,适合遍历对象的所有键
可以处理动态添加的属性

缺点：

会遍历原型链上的属性（需配合hasOwnProperty检查）
遍历顺序不确定（现代JS引擎按属性创建顺序遍历）

Object.keys() + forEach

Object.keys()返回对象自身可枚举属性的数组，结合forEach进行遍历：

Object.keys(jsonData).forEach(key => {
  console.log(`${key}: ${jsonData[key]}`);
});

优点：

只遍历对象自身的属性
代码简洁,函数式风格

缺点：

需要额外创建一个键的数组

Object.entries() + forEach

Object.entries()返回对象自身可枚举属性的键值对数组：

Object.entries(jsonData).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

优点：

直接获取键值对,代码更简洁
适合需要同时访问键和值的场景

缺点：

同样需要创建中间数组

遍历JSON数组的方法

传统for循环

最基础的数组遍历方式：

const jsonArray = [1, 2, 3, 4, 5];
for (let i = 0; i < jsonArray.length; i++) {
  console.log(jsonArray[i]);
}

优点：

性能最好,适合大数据量遍历
可以灵活控制循环流程

缺点：

代码相对冗长
容易出现索引错误

for...of 循环

ES6引入的for...of循环，可以遍历可迭代对象（包括数组）：

const jsonArray = [1, 2, 3, 4, 5];
for (const item of jsonArray) {
  console.log(item);
}

优点：

代码简洁,直接获取元素值
不需要索引,避免索引错误
适用于任何可迭代对象

缺点：

无法直接获取索引（可通过entries()解决）

Array.prototype.forEach()

数组原生的forEach方法：

const jsonArray = [1, 2, 3, 4, 5];
jsonArray.forEach((item, index) => {
  console.log(`索引${index}: ${item}`);
});

优点：

函数式风格,代码简洁
可以同时获取索引和值
不会改变原数组

缺点：

无法中途break或return
性能略低于for循环

Array.prototype.map()（转换场景）

如果需要在遍历的同时转换数据,map()是更好的选择：

const jsonArray = [1, 2, 3, 4, 5];
const doubled = jsonArray.map(item => item * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

深度遍历嵌套JSON

对于嵌套的JSON结构,需要使用递归或栈/队列进行深度遍历：

递归遍历

function deepTraverse(obj) {
  for (let key in obj) {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      console.log(`进入嵌套对象: ${key}`);
      deepTraverse(obj[key]);
    } else {
      console.log(`${key}: ${obj[key]}`);
    }
  }
}
deepTraverse(jsonData);

栈实现（非递归）

function deepTraverseWithStack(obj) {
  const stack = [obj];
  while (stack.length) {
    const current = stack.pop();
    for (let key in current) {
      if (typeof current[key] === 'object' && current[key] !== null) {
        console.log(`进入嵌套对象: ${key}`);
        stack.push(current[key]);
      } else {
        console.log(`${key}: ${current[key]}`);
      }
    }
  }
}
deepTraverseWithStack(jsonData);

性能优化建议

选择合适的遍历方法：
- 简单对象遍历：for...in或Object.keys()
- 数组遍历：for...of或forEach
- 大数据量：传统for循环性能最佳
避免不必要的遍历：
- 只遍历需要的属性
- 提前终止循环（如使用for循环）
注意内存使用：
- Object.keys()和Object.entries()会创建新数组
- 对于超大对象,考虑使用生成器函数

现代JavaScript遍历方法

Object.values()

只获取对象的值数组：

Object.values(jsonData).forEach(value => {
  console.log(value);
});

Object.getOwnPropertyNames()

获取对象所有属性（包括不可枚举的）：

Object.getOwnPropertyNames(jsonData).forEach(key => {
  console.log(`${key}: ${jsonData[key]}`);
});

Reflect.ownKeys()

获取对象所有键（包括Symbol键）：

Reflect.ownKeys(jsonData).forEach(key => {
  console.log(`${String(key)}: ${jsonData[key]}`);
});

实战示例：处理API返回的JSON数据

假设我们从API获取了以下JSON数据：

const apiResponse = {
  code: 200,
  message: "success",
  data: {
    users: [
      {id: 1, name: "Alice", active: true},
      {id: 2, name: "Bob", active: false}
    ],
    total: 2
  }
};

提取所有活跃用户的名字：

const activeUserNames = apiResponse.data.users
  .filter(user => user.active)
  .map(user => user.name);
console.log(activeUserNames); // ["Alice"]

JavaScript提供了多种遍历JSON数据的方法,每种方法都有其适用场景：

简单对象遍历：for...in、Object.keys()、Object.entries()
数组遍历：for循环、for...of、forEach()
深度遍历：递归或栈/队列实现
现代方法：Object.values()、Reflect.ownKeys()等

选择哪种方法取决于具体需求：

需要键和值：Object.entries()
只需要值：Object.values()或for...of
需要索引：forEach()或传统for循环
性能敏感：传统for循环
函数式风格：forEach()、map()等

这些方法,并根据实际场景灵活运用，将大大提高你处理JSON数据的效率和代码质量。

正文