js怎么遍历json文件

JavaScript 遍历 JSON 数据的全面指南

在 Web 开发中，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其易读性和与 JavaScript 的天然兼容性而被广泛使用，无论是从服务器获取的 API 响应，还是本地存储的配置文件，数据常以 JSON 格式存在，而遍历 JSON 数据是处理这些数据的核心操作——提取所需信息、转换数据结构、渲染到页面等都离不开它，本文将详细介绍 JavaScript 中遍历 JSON 数据的各种方法，从基础到进阶，并附上实用示例，助你不同场景下的最佳实践。

JSON 数据的基础：对象与数组

在开始遍历前,需明确 JSON 数据的两种核心结构：对象（Object）和数组（Array）。

• 对象：用 表示，键值对形式存储数据，键必须是字符串（可省略引号），值可以是任意类型（字符串、数字、布尔值、数组、对象等）。

  {
    "name": "张三",
    "age": 25,
    "isStudent": false,
    "courses": ["数学", "英语"],
    "address": {
      "city": "北京",
      "district": "朝阳区"
    }
  }

• 数组：用 [] 表示，按顺序存储值的集合，值可以是任意类型（包括对象或数组）。

  [
    {"id": 1, "name": "商品A", "price": 100},
    {"id": 2, "name": "商品B", "price": 200},
    {"id": 3, "name": "商品C", "price": 150}
  ]

遍历的核心思路是：针对对象，遍历其键；针对数组，遍历其索引或元素，下面结合具体方法展开说明。

遍历 JSON 对象的 4 种常用方法

JSON 对本质上是 JavaScript 的 Object 类型，遍历对象主要关注其“键值对”，以下是 4 种常用方法，各有适用场景。

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

for...in 是专门用于遍历对象 enumerable（可枚举）属性的循环方式，会遍历对象自身及从原型链继承的可枚举属性（需注意过滤继承属性）。

语法：

for (const key in object) {
  if (object.hasOwnProperty(key)) { // 过滤继承属性（推荐）
    // 处理 key 和 object[key]
  }
}

示例：

假设有如下 JSON 对象（存储用户信息）：

const user = {
  "name": "张三",
  "age": 25,
  "isStudent": false,
  "courses": ["数学", "英语"],
  "address": {
    "city": "北京",
    "district": "朝阳区"
  }
};

遍历对象并打印键值对：

for (const key in user) {
  if (user.hasOwnProperty(key)) { // 确保只遍历对象自身的属性
    console.log(`键: ${key}, 值:`, user[key]);
  }
}

输出：

键: name, 值: 张三
键: age, 值: 25
键: isStudent, 值: false
键: courses, 值: ["数学", "英语"]
键: address, 值: {city: "北京", district: "朝阳区"}

注意事项：

• for...in 遍历顺序可能因 JavaScript 引擎而异（现代引擎多按属性添加顺序遍历，但不可完全依赖）。
• 必须用 hasOwnProperty 过滤，避免遍历到原型链上的属性（如 toString、valueOf）。

Object.keys() + forEach：获取键后遍历

Object.keys() 方法返回一个包含对象自身可枚举属性名（键）的数组，结合数组方法 forEach 可遍历键，再通过键取值。

语法：

Object.keys(object).forEach(key => {
  // 处理 key 和 object[key]
});

示例：

仍用 user 对象，遍历并打印键值对：

Object.keys(user).forEach(key => {
  console.log(`键: ${key}, 值:`, user[key]);
});

输出：

与 for...in 一致，遍历顺序为 Object.keys() 返回的数组顺序（即属性添加顺序）。

优势：

• 代码更简洁,适合需要数组方法的场景（如 map、filter 后再遍历）。
• 不会遍历原型链属性,无需 hasOwnProperty 过滤。

Object.values()：直接遍历值

如果只需要遍历对象的值（不关心键），Object.values() 返回包含对象自身可枚举值的数组，可直接遍历。

语法：

Object.values(object).forEach(value => {
  // 处理 value
});

示例：

遍历 user 对象的值：

Object.values(user).forEach(value => {
  console.log("值:", value);
});

输出：

值: 张三
值: 25
值: false
值: ["数学", "英语"]
值: {city: "北京", district: "朝阳区"}

适用场景：

• 仅需处理值,无需键的场景（如计算所有值的和、筛选特定值等）。

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

Object.entries() 返回一个包含对象自身可枚举键值对数组的数组（格式为 [[key1, value1], [key2, value2], ...]），适合同时需要键和值的场景。

语法：

Object.entries(object).forEach(([key, value]) => {
  // 处理 key 和 value
});

示例：

遍历 user 对象的键值对：

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

输出：

与 for...in 和 Object.keys() 一致。

优势：

• 代码更直观,通过解构直接获取键和值，减少 object[key] 的重复调用。

遍历 JSON 数组的 3 种常用方法

JSON 数组本质上是 JavaScript 的 Array 类型，遍历数组的核心是访问每个元素，以下是 3 种常用方法，各有特点。

for 循环：基础灵活，适合索引操作

for 循环是最基础的遍历方式，通过索引访问数组元素，适合需要索引的场景（如根据索引修改元素、计算相邻元素关系等）。

语法：

for (let i = 0; i < array.length; i++) {
  // 处理 array[i] 和索引 i
}

示例：

假设有如下 JSON 数组（存储商品列表）：

const products = [
  {"id": 1, "name": "商品A", "price": 100},
  {"id": 2, "name": "商品B", "price": 200},
  {"id": 3, "name": "商品C", "price": 150}
];

遍历数组并打印商品信息（含索引）：

for (let i = 0; i < products.length; i++) {
  const product = products[i];
  console.log(`索引: ${i}, 商品: ${product.name}, 价格: ${product.price}`);
}

输出：

索引: 0, 商品: 商品A, 价格: 100
索引: 1, 商品: 商品B, 价格: 200
索引: 2, 商品: 商品C, 价格: 150

注意事项：

• 需手动管理索引,适合需要精确控制循环逻辑的场景。
• 性能较好,适合超长数组（但现代 JS 引擎中，其他遍历方法性能差距已很小）。

forEach：简洁优雅，无返回值

forEach 是数组内置方法，接收一个回调函数，对数组每个元素执行一次操作，无需手动管理索引。

语法：

array.forEach((value, index, array) => {
  // value: 当前元素
  // index: 当前索引
  // array: 原数组（可选）
});

示例：

遍历 products 数组：

products.forEach((product, index) => {
  console.log(`索引: ${index}, 商品: ${product.name}, 价格: ${product.price}`);
});

输出：

与 for �