js如何遍历读取json全部数据

JavaScript全面指南：如何遍历读取JSON全部数据

在JavaScript开发中，处理JSON（JavaScript Object Notation）数据是一项常见任务，JSON因其轻量级和易于阅读的特点，成为Web应用程序中数据交换的主要格式，本文将详细介绍多种遍历和读取JSON全部数据的方法,帮助开发者这一核心技能。

JSON数据基础

在开始遍历之前，我们先简单回顾一下JSON的基本结构，JSON数据可以是对象（使用花括号{}）或数组（使用方括号[]）的形式,也可以是两者的嵌套组合。

{
  "name": "张三",
  "age": 30,
  "hobbies": ["阅读", "游泳", "编程"],
  "address": {
    "city": "北京",
    "district": "朝阳区"
  },
  "contacts": [
    {
      "type": "email",
      "value": "zhangsan@example.com"
    },
    {
      "type": "phone",
      "value": "13800138000"
    }
  ]
}

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

for...in循环是遍历对象可枚举属性的传统方法,它会遍历对象及其原型链上的可枚举属性。

const jsonData = {
  "name": "张三",
  "age": 30,
  "city": "北京"
};
for (let key in jsonData) {
  if (jsonData.hasOwnProperty(key)) { // 确保只遍历对象自身的属性
    console.log(`${key}: ${jsonData[key]}`);
  }
}

优点：

简单直观，适合遍历简单对象
可以访问属性名和属性值

缺点：

会遍历原型链上的属性（需配合hasOwnProperty检查）
不适合遍历数组（虽然可以工作,但不推荐）

使用Object.keys()与forEach结合

Object.keys()方法返回一个包含对象自身可枚举属性名的数组，可以与forEach方法结合使用。

const jsonData = {
  "name": "张三",
  "age": 30,
  "city": "北京"
};
Object.keys(jsonData).forEach(key => {
  console.log(`${key}: ${jsonData[key]}`);
});

优点：

只遍历对象自身的属性
代码简洁，适合现代JavaScript风格

缺点：

需要额外的方法调用
不适合遍历数组（除非目标是数组的索引）

使用Object.entries()与解构赋值

Object.entries()方法返回一个包含对象自身可枚举属性[key, value]对的数组,可以与解构赋值结合使用。

const jsonData = {
  "name": "张三",
  "age": 30,
  "city": "北京"
};
Object.entries(jsonData).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

优点：

直接获取键值对，代码更简洁
只遍历对象自身的属性
解构赋值使代码更易读

缺点：

不适合遍历数组（除非目标是数组的索引）

使用for...of循环遍历数组

当JSON数据是数组或包含数组时，可以使用for...of循环遍历数组元素。

const jsonArray = [
  { "name": "张三", "age": 30 },
  { "name": "李四", "age": 25 },
  { "name": "王五", "age": 28 }
];
for (const item of jsonArray) {
  console.log(`姓名: ${item.name}, 年龄: ${item.age}`);
}

优点：

直接遍历数组元素，无需索引
适合遍历任何可迭代对象
代码简洁易读

缺点：

不直接适用于对象（除非先转换为数组）

递归遍历嵌套JSON

对于复杂的嵌套JSON结构,递归是一种强大的遍历方法。

function traverseJSON(data, indent = 0) {
  const indentStr = ' '.repeat(indent);
  if (Array.isArray(data)) {
    console.log(`${indentStr}[数组]`);
    data.forEach(item => traverseJSON(item, indent + 2));
  } else if (typeof data === 'object' && data !== null) {
    console.log(`${indentStr}{对象}`);
    Object.entries(data).forEach(([key, value]) => {
      console.log(`${indentStr}  ${key}:`);
      traverseJSON(value, indent + 4);
    });
  } else {
    console.log(`${indentStr}${data}`);
  }
}
const complexJSON = {
  "name": "张三",
  "age": 30,
  "hobbies": ["阅读", "游泳"],
  "address": {
    "city": "北京",
    "district": "朝阳区"
  }
};
traverseJSON(complexJSON);

优点：

可以处理任意深度的嵌套结构
可以灵活处理数组和对象的混合结构
可以添加自定义逻辑处理不同类型的数据

缺点：

需要编写递归函数，代码量较大
需要注意处理循环引用的情况（可能导致栈溢出）

使用JSON.stringify()的replacer参数

JSON.stringify()方法可以接受一个replacer函数作为第二个参数,该函数会在序列化过程中被调用。

const complexJSON = {
  "name": "张三",
  "age": 30,
  "hobbies": ["阅读", "游泳"],
  "address": {
    "city": "北京",
    "district": "朝阳区"
  }
};
JSON.stringify(complexJSON, (key, value) => {
  console.log(`键: ${key}, 值: ${JSON.stringify(value)}`);
  return value; // 返回原始值，正常序列化
});

优点：

可以在序列化过程中访问所有键值对
可以修改值或过滤某些属性
适合在序列化前处理数据

缺点：

主要用于序列化，遍历是副作用
不适合直接修改原始数据

使用第三方库（如Lodash）

对于复杂的项目,使用成熟的工具库如Lodash可以简化遍历操作。

const _ = require('lodash');
const complexJSON = {
  "name": "张三",
  "age": 30,
  "hobbies": ["阅读", "游泳"],
  "address": {
    "city": "北京",
    "district": "朝阳区"
  }
};
// 遍历所有值
_.forEach(complexJSON, (value, key) => {
  console.log(`${key}: ${JSON.stringify(value)}`);
});
// 递归遍历
_.forEach(complexJSON, (value, key) => {
  if (_.isObject(value) && !_.isArray(value)) {
    console.log(`${key} 是一个对象:`);
    _.forEach(value, (subValue, subKey) => {
      console.log(`  ${subKey}: ${JSON.stringify(subValue)}`);
    });
  }
});

优点：

提供丰富的遍历方法
处理边缘情况更可靠
代码更简洁，功能更强大

缺点：

需要引入外部库
增加项目依赖

性能比较与最佳实践

不同的遍历方法在性能上有所差异，以下是简单的性能比较（从快到慢）：

传统for循环（最快）
for...of循环
Object.keys() + forEach
for...in循环
递归遍历（取决于嵌套深度）

最佳实践建议：

简单对象：使用Object.keys()或Object.entries()结合forEach
数组遍历：使用for...of循环
嵌套结构：使用递归或Lodash等工具库
需要高性能：考虑传统for循环
需要修改数据：考虑JSON.stringify()的replacer参数

实际应用示例

假设我们需要从一个复杂的API响应中提取特定信息：

const apiResponse = {
  "status": "success",
  "data": {
    "users": [
      {
        "id": 1,
        "name": "张三",
        "profile": {
          "age": 30,
          "hobbies": ["阅读", "游泳"]
        }
      },
      {
        "id": 2,
        "name": "李四",
        "profile": {
          "age": 25,
          "hobbies": ["编程", "游戏"]
        }
      }
    ],
    "metadata": {
      "total": 2,
      "page": 1
    }
  }
};
// 提取所有用户的爱好
function extractAllHobbies(data) {
  let allHobbies = [];
  if (data.data && data.data.users) {
    data.data.users.forEach(user => {
      if (user.profile && user.profile.hobbies) {
        allHobbies = allHobbies.concat(user.profile.hobbies);
      }

wps下载 wps官网 wps

WhatsApp网页版

WhatsApp中文版