前端怎么遍历json数据的

前端遍历JSON数据的实用方法与技巧

在Web前端开发中,JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其易读、易解析的特点，被广泛应用于前后端数据交互，而遍历JSON数据（无论是对象还是数组）是前端开发中的基础操作，例如渲染列表、提取特定字段、处理响应数据等场景均离不开遍历，本文将系统介绍前端遍历JSON数据的多种方法，并结合代码示例说明其适用场景与注意事项。

JSON数据类型：对象与数组

在遍历之前,需明确JSON数据的两种核心结构：

• 对象（Object）：键值对集合，如 {"name": "张三", "age": 18}，键必须是字符串，值可以是任意类型（包括嵌套的对象或数组）。
• 数组（Array）：有序值列表，如 ["apple", "banana", {"color": "red"}]，元素可以是任意类型，包括嵌套的对象或数组。

遍历方法需根据数据类型选择,例如对象更适合用 for...in 或 Object 方法，数组则优先用 for 循环、forEach 或迭代器方法。

遍历JSON对象的方法

for...in 循环：遍历对象的可枚举属性

for...in 会遍历对象自身及原型链上的可枚举属性，适合遍历普通JSON对象（不涉及原型链污染时）。

const userInfo = { name: "李四", age: 25, city: "北京" };
for (const key in userInfo) {
  if (Object.prototype.hasOwnProperty.call(userInfo, key)) { // 过滤掉原型链属性
    console.log(`${key}: ${userInfo[key]}`);
  }
}
// 输出：
// name: 李四
// age: 25
// city: 北京

注意：需配合 hasOwnProperty 判断，避免遍历到原型链上的属性（如 toString、constructor）。

Object.keys() + forEach：遍历对象自身键

Object.keys() 返回对象自身可枚举键的数组，再结合 forEach 遍历，避免 for...in 的原型链问题。

const product = { id: 101, price: 99.9, category: "electronics" };
Object.keys(product).forEach(key => {
  console.log(`${key}: ${product[key]}`);
});
// 输出：
// id: 101
// price: 99.9
// category: electronics

Object.values()：直接遍历对象值

若仅需获取对象的值,无需键，可用 Object.values() 返回值数组后遍历。

const settings = { theme: "dark", fontSize: 16, lang: "zh-CN" };
Object.values(settings).forEach(value => {
  console.log(value);
});
// 输出：
// dark
// 16
// zh-CN

Object.entries() + forEach：同时遍历键和值

Object.entries() 将对象转为 [key, value] 数组，适合同时需要键和值的场景。

const order = { orderId: "A1001", amount: 200, status: "pending" };
Object.entries(order).forEach(([key, value]) => {
  console.log(`${key} => ${value}`);
});
// 输出：
// orderId => A1001
// amount => 200
// status => pending

for...of + Object.entries()：现代遍历语法

for...of 可遍历迭代器对象（如 Object.entries() 返回的数组），语法更简洁，适合需要提前终止遍历的场景（配合 break）。

const config = { timeout: 5000, retries: 3, async: true };
for (const [key, value] of Object.entries(config)) {
  if (key === "timeout") {
    console.log(`配置${key}为: ${value}ms`);
    break; // 提前终止
  }
}
// 输出：配置timeout为: 5000ms

遍历JSON数组的方法

for 循环：基础灵活，兼容性最好

传统的 for 循环可精确控制索引，适合需要索引值或提前终止的场景，且在所有浏览器中均可运行。

const fruits = ["苹果", "香蕉", "橙子"];
for (let i = 0; i < fruits.length; i++) {
  console.log(`索引${i}: ${fruits[i]}`);
}
// 输出：
// 索引0: 苹果
// 索引1: 香蕉
// 索引2: 橙子

forEach：无中断遍历，简洁高效

forEach 是数组原型上的方法，遍历数组元素，无法通过 break 或 return 终止，适合“全量处理”场景。

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((num, index) => {
  console.log(`索引${index}: ${num * 2}`);
});
// 输出：
// 索引0: 2
// 索引1: 4
// 索引2: 6
// 索引3: 8
// 索引4: 10

for...of：现代遍历语法，推荐首选

for...of 可遍历数组、字符串等可迭代对象，直接获取元素值，无需索引，语法简洁且支持 break 和 continue。

const users = [
  { id: 1, name: "张三" },
  { id: 2, name: "李四" },
  { id: 3, name: "王五" }
];
for (const user of users) {
  if (user.id === 2) {
    console.log(`找到用户: ${user.name}`);
    break;
  }
}
// 输出：找到用户: 李四

for...in：谨慎用于数组（不推荐）

for...in 遍历数组时，遍历的是索引（字符串类型），且可能遍历到原型链上的属性，容易引发问题：

const arr = [10, 20, 30];
Array.prototype.customProp = "自定义属性"; // 添加原型属性
for (const key in arr) {
  console.log(key, arr[key]); // 会输出 "customProp" 和 "自定义属性"
}
// 输出：
// 0 10
// 1 20
// 2 30
// customProp 自定义属性

遍历数组时,尽量避免 for...in，优先用 for、forEach 或 for...of。

迭代器方法：高阶函数处理数据

数组提供多个高阶遍历方法,支持函数式编程，适合数据转换或过滤场景：

• map()：遍历并返回新数组（不改变原数组）

  const prices = [100, 200, 300];
  const pricesWithTax = prices.map(price => price * 1.1);
  console.log(pricesWithTax); // [110, 220, 330]

• filter()：过滤符合条件的元素

  const scores = [85, 92, 78, 90];
  const passedScores = scores.filter(score => score >= 80);
  console.log(passedScores); // [85, 92, 90]

• find() / findIndex()：查找第一个匹配元素/索引

  const books = [
    { title: "JS高级程序设计", author: "Nicholas" },
    { title: "Vue.js实战", author: "梁灏" }
  ];
  const vueBook = books.find(book => book.title.includes("Vue"));
  console.log(vueBook); // { title: "Vue.js实战", author: "梁灏" }

• reduce() / reduceRight()：累积计算（如求和、扁平化数组）

  const nums = [1, 2, 3, 4];
  const sum = nums.reduce((acc, cur) => acc + cur, 0);
  console.log(sum); // 10

嵌套JSON数据的遍历：递归与深度优先

若JSON数据包含嵌套结构（如对象嵌套数组或数组嵌套对象），需用递归实现深度遍历。

示例：遍历嵌套的树形结构

const