json数据类型怎么遍历

JSON数据类型怎么遍历：全面指南与实践技巧

在JavaScript开发中，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，因其易于人阅读和编写，同时也易于机器解析和生成，而被广泛应用于前后端数据交互，JSON数据类型的遍历方法，是每个开发者必备的基础技能，本文将详细介绍JSON数据类型的遍历方法，包括基本概念、常用技巧以及实际应用场景。

JSON数据类型简介

JSON数据主要有两种结构：

对象（Object）：无序的键值对集合，以花括号包裹，键必须是字符串,值可以是任意JSON支持的类型。
数组（Array）：有序的值列表，以方括号[]包裹,值可以是任意JSON支持的类型。

JSON支持的值类型包括：字符串、数字、布尔值、null、对象和数组。

遍历JSON对象的方法

使用for...in循环

for...in循环用于遍历对象的可枚举属性（包括继承的可枚举属性）。

const jsonObj = {
  name: "张三",
  age: 25,
  city: "北京"
};
for (let key in jsonObj) {
  if (jsonObj.hasOwnProperty(key)) { // 过滤掉继承属性
    console.log(`${key}: ${jsonObj[key]}`);
  }
}

优点：简洁直观，适合遍历对象的键。缺点：会遍历原型链上的可枚举属性，需要配合hasOwnProperty过滤。

使用Object.keys() + forEach

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

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

优点：仅遍历对象自身属性，更安全。缺点：需要额外调用Object.keys()方法。

使用Object.entries() + forEach

Object.entries()返回对象自身可枚举属性的键值对数组,适合同时获取键和值。

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

优点：直接获取键值对，代码更简洁。缺点：现代浏览器支持,旧环境需polyfill。

遍历JSON数组的方法

使用for循环

传统的for循环是最基础的遍历方式。

const jsonArr = [
  { id: 1, name: "苹果" },
  { id: 2, name: "香蕉" },
  { id: 3, name: "橙子" }
];
for (let i = 0; i < jsonArr.length; i++) {
  console.log(`ID: ${jsonArr[i].id}, 名称: ${jsonArr[i].name}`);
}

优点：兼容性好，可灵活控制循环流程。缺点：代码稍显冗长。

使用forEach方法

数组的forEach方法为每个元素执行一次回调函数。

const jsonArr = [
  { id: 1, name: "苹果" },
  { id: 2, name: "香蕉" },
  { id: 3, name: "橙子" }
];
jsonArr.forEach((item, index) => {
  console.log(`索引${index}: ID ${item.id}, 名称 ${item.name}`);
});

优点：代码简洁，直接访问元素和索引。缺点：无法中途跳出循环。

使用for...of循环

for...of循环遍历可迭代对象（如数组、字符串等）。

const jsonArr = [
  { id: 1, name: "苹果" },
  { id: 2, name: "香蕉" },
  { id: 3, name: "橙子" }
];
for (const item of jsonArr) {
  console.log(`ID: ${item.id}, 名称: ${item.name}`);
}

优点：语法简洁，直接获取元素值。缺点：无法直接获取索引（需配合entries()）。

使用map/filter/reduce等高阶函数

这些方法不仅遍历数组,还能对数据进行转换或筛选。

const jsonArr = [
  { id: 1, name: "苹果", price: 5 },
  { id: 2, name: "香蕉", price: 3 },
  { id: 3, name: "橙子", price: 4 }
];
// map：提取名称数组
const names = jsonArr.map(item => item.name);
console.log(names); // ["苹果", "香蕉", "橙子"]
// filter：筛选价格大于3的商品
const expensive = jsonArr.filter(item => item.price > 3);
console.log(expensive); // [{id:1,name:"苹果",price:5}, {id:3,name:"橙子",price:4}]
// reduce：计算总价
const total = jsonArr.reduce((sum, item) => sum + item.price, 0);
console.log(total); // 12

优点：函数式编程风格，代码简洁且功能强大。缺点：需要理解函数式编程概念。

嵌套JSON数据的遍历

实际应用中，JSON数据往往是嵌套的（对象中包含数组或对象，数组中又包含对象等），遍历嵌套JSON需要结合上述方法,并注意递归或循环的层次控制。

示例：遍历嵌套JSON

const nestedJson = {
  user: {
    name: "李四",
    hobbies: ["阅读", "旅行"],
    address: {
      city: "上海",
      district: "浦东新区"
    }
  },
  posts: [
    { id: 1, title: "JavaScript入门" },
    { id: 2, title: "JSON解析" }
  ]
};
// 遍历顶层对象
Object.entries(nestedJson).forEach(([key, value]) => {
  if (typeof value === 'object' && !Array.isArray(value)) {
    // 如果是对象
    console.log(`对象键: ${key}`);
    Object.entries(value).forEach(([subKey, subValue]) => {
      if (Array.isArray(subValue)) {
        // 如果是数组
        console.log(`  数组键: ${subKey}`);
        subValue.forEach(item => console.log(`    - ${item}`));
      } else if (typeof subValue === 'object') {
        // 如果是嵌套对象
        console.log(`  对象键: ${subKey}`);
        Object.entries(subValue).forEach(([nestedKey, nestedValue]) => {
          console.log(`    ${nestedKey}: ${nestedValue}`);
        });
      } else {
        console.log(`  ${subKey}: ${subValue}`);
      }
    });
  } else if (Array.isArray(value)) {
    // 如果是数组
    console.log(`数组键: ${key}`);
    value.forEach(item => {
      if (typeof item === 'object') {
        Object.entries(item).forEach(([itemKey, itemValue]) => {
          console.log(`  ${itemKey}: ${itemValue}`);
        });
      } else {
        console.log(`  - ${item}`);
      }
    });
  } else {
    console.log(`${key}: ${value}`);
  }
});

递归遍历嵌套JSON

对于深度嵌套的JSON,递归是更优雅的解决方案：

function traverseJson(obj, indent = 0) {
  const indentStr = ' '.repeat(indent);
  for (let key in obj) {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      console.log(`${indentStr}${key}:`);
      traverseJson(obj[key], indent + 2);
    } else {
      console.log(`${indentStr}${key}: ${obj[key]}`);
    }
  }
}
const nestedJson = {
  user: {
    name: "李四",
    hobbies: ["阅读", "旅行"],
    address: {
      city: "上海",
      district: "浦东新区"
    }
  },
  posts: [
    { id: 1, title: "JavaScript入门" },
    { id: 2, title: "JSON解析" }
  ]
};
traverseJson(nestedJson);