如何遍历json里的数组

轻松：如何遍历JSON中的数组

在现代Web开发和数据处理中，JSON（JavaScript Object Notation）已成为一种轻量级、易于读写的数据交换格式，它通常以键值对的形式组织数据，其中值可以是字符串、数字、布尔值、null，甚至是更复杂的数组或对象，当我们从API获取数据或处理本地存储的信息时，经常会遇到需要遍历JSON数组，以提取、处理或展示其中每一个元素的场景。

本文将详细介绍如何在不同编程环境中，特别是JavaScript中,高效地遍历JSON里的数组。

准备工作：一个标准的JSON数组示例

为了方便演示，我们假设从服务器获取了以下JSON格式的数据，它是一个用户列表，每个用户是一个对象，整个列表被包裹在一个名为 users 的数组中。

{
  "status": "success",
  "message": "User list retrieved",
  "users": [
    { "id": 1, "name": "Alice", "email": "alice@example.com", "age": 30 },
    { "id": 2, "name": "Bob", "email": "bob@example.com", "age": 24 },
    { "id": 3, "name": "Charlie", "email": "charlie@example.com", "age": 35 }
  ],
  "total_count": 3
}

我们的目标是遍历 users 这个数组,并打印出每个用户的姓名和邮箱。

核心步骤：解析JSON字符串

在很多情况下，我们从网络或文件中获取的JSON数据是一个字符串，在遍历它之前，我们必须先将这个字符串解析成程序可以理解的数据结构——在JavaScript中,就是对象和数组。

我们可以使用 JSON.parse() 方法来完成这个转换。

const jsonString = `{
  "status": "success",
  "message": "User list retrieved",
  "users": [
    { "id": 1, "name": "Alice", "email": "alice@example.com", "age": 30 },
    { "id": 2, "name": "Bob", "email": "bob@example.com", "age": 24 },
    { "id": 3, "name": "Charlie", "email": "charlie@example.com", "age": 35 }
  ],
  "total_count": 3
}`;
// 将JSON字符串解析为JavaScript对象
const dataObject = JSON.parse(jsonString);
// dataObject.users 就是一个我们可以操作的JavaScript数组
const userArray = dataObject.users;
console.log(userArray);
// 输出:
// [
//   { id: 1, name: 'Alice', email: 'Alice@example.com', age: 30 },
//   { id: 2, name: 'Bob', email: 'Bob@example.com', age: 24 },
//   { id: 3, name: 'Charlie', email: 'Charlie@example.com', age: 35 }
// ]

四种主流的数组遍历方法

现在我们已经得到了一个标准的JavaScript数组 userArray,接下来介绍四种最常用的遍历方法。

for...of 循环 (现代、简洁)

for...of 循环是ES6引入的语法，专门用于遍历可迭代对象（如数组、字符串、Map等），它语法简洁，直接获取数组中的每个元素,是日常开发中最推荐的方式。

console.log("--- 使用 for...of 循环 ---");
for (const user of userArray) {
  // user 直接代表数组中的每一个对象
  console.log(`姓名: ${user.name}, 邮箱: ${user.email}`);
}
// 输出:
// 姓名: Alice, 邮箱: alice@example.com
// 姓名: Bob, 邮箱: bob@example.com
// 姓名: Charlie, 邮箱: charlie@example.com

forEach() 方法 (函数式、优雅)

forEach() 是数组的一个内置方法，它接受一个回调函数作为参数，这个回调函数会为数组中的每一个元素执行一次，它非常适合执行带有副作用的操作,比如修改DOM元素或打印日志。

console.log("\n--- 使用 forEach() 方法 ---");
userArray.forEach(function(user) {
  console.log(`姓名: ${user.name}, 邮箱: ${user.email}`);
});
// 使用箭头函数可以更简洁
userArray.forEach(user => {
  console.log(`姓名: ${user.name}, 邮箱: ${user.email}`);
});
// 输出:
// 姓名: Alice, 邮箱: alice@example.com
// 姓名: Bob, 邮箱: bob@example.com
// 姓名: Charlie, 邮箱: charlie@example.com

for 循环 (传统、灵活)

传统的 for 循环通过索引来访问数组元素，虽然语法略显繁琐，但它的优势在于可以自由控制循环的起点和终点,并且在需要知道当前元素索引时非常方便。

console.log("\n--- 使用传统的 for 循环 ---");
for (let i = 0; i < userArray.length; i++) {
  // userArray[i] 访问索引为 i 的元素
  const user = userArray[i];
  console.log(`姓名: ${user.name}, 邮箱: ${user.email}`);
}
// 输出:
// 姓名: Alice, 邮箱: alice@example.com
// 姓名: Bob, 邮箱: bob@example.com
// 姓名: Charlie, 邮箱: charlie@example.com

map() 方法 (转换数据、不可变)

map() 方法与 forEach() 类似，也接受一个回调函数，但它的目的不是遍历执行操作，而是创建一个新数组，新数组中的元素是原数组中每个元素经过回调函数处理后的结果，它遵循函数式编程中的不可变原则,非常适合数据转换场景。

console.log("\n--- 使用 map() 方法 (数据转换) ---");
// 目标：提取所有用户的姓名，生成一个新数组
const names = userArray.map(user => user.name);
console.log("所有用户的姓名列表:", names);
// 输出: 所有用户的姓名列表: [ 'Alice', 'Bob', 'Charlie' ]
// 你也可以在 map 内部进行复杂操作
const userSummary = userArray.map(user => ({
  fullName: user.name,
  contact: user.email
}));
console.log("用户摘要信息:", userSummary);
// 输出:信息: [
//   { fullName: 'Alice', contact: 'alice@example.com' },
//   { fullName: 'Bob', contact: 'bob@example.com' },
//   { fullName: 'Charlie', contact: 'charlie@example.com' }
// ]

如何选择？一张图帮你决策

简单总结：

• 只是想看看每个元素是什么，或者做点什么（比如打印） -> 用 for...of 或 forEach()。
• 需要根据旧数组得到一个新数组 -> 用 map()。
• 需要用到元素的索引，或者想从中间开始/结束遍历 -> 用传统的 for 循环。

遍历JSON数组是开发者必须的核心技能,关键步骤在于：

1. 解析：使用 JSON.parse() 将JSON字符串转换为JavaScript对象和数组。
2. 访问：通过点表示法（）或方括号法（[]）定位到你要遍历的数组。
3. 遍历：根据你的具体需求，选择最合适的遍历工具（for...of, forEach(), for, map()）。

了这些方法，你就能自如地处理来自API、配置文件或任何来源的JSON数据,为你的应用注入强大的数据处理能力。