如何用each遍历json

轻松：如何使用 each 遍历 JSON 数据**

在 JavaScript 开发中，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，被广泛应用于前后端数据交互，当我们从服务器获取 JSON 数据，或者需要在客户端处理 JSON 结构的数据时，常常需要对其中的元素进行遍历操作。each 方法（通常指 jQuery 中的 $.each() 函数，或者在某些上下文中指 Array.prototype.forEach()）提供了一种简洁高效的方式来遍历 JSON 对象或数组，本文将详细介绍如何使用 each 来遍历 JSON 数据。

JSON 数据的基本结构

我们需要明确 JSON 的两种基本结构：

1. JSON 对象：由键值对组成，用花括号 包围。

   {
     "name": "张三",
     "age": 30,
     "city": "北京"
   }

2. JSON 数组：由有序的值列表组成，用方括号 [] 包围，数组中的元素也可以是对象、数组、字符串、数字等。

   [
     { "name": "李四", "age": 25 },
     { "name": "王五", "age": 28 },
     { "name": "赵六", "age": 35 }
   ]

   或者一个简单的字符串数组：

   ["apple", "banana", "orange"]

使用 jQuery 的 $.each() 方法遍历 JSON

$.each() 是 jQuery 提供的一个通用遍历方法，它可以遍历对象和数组。

遍历 JSON 对象

当遍历 JSON 对象时，$.each() 会接收两个参数：对象本身和回调函数，回调函数又接收两个参数：键名 (key) 和 对应的值 (value)。

示例代码：

// 假设我们有一个 JSON 对象
var person = {
  "name": "张三",
  "age": 30,
  "city": "北京"
};
// 使用 $.each() 遍历
$.each(person, function(key, value) {
  console.log(key + ": " + value);
});

输出结果：

name: 张三
age: 30
city: 北京

遍历 JSON 数组

当遍历 JSON 数组时，$.each() 会接收两个参数：数组本身和回调函数，回调函数接收两个参数：索引 (index) 和 对应的元素 (element)，如果数组元素是对象，我们可以在回调函数内部进一步访问其属性。

示例代码 1：遍历简单数组

var fruits = ["apple", "banana", "orange"];
$.each(fruits, function(index, value) {
  console.log("索引 " + index + ": " + value);
});

输出结果：

索引 0: apple
索引 1: banana
索引 2: orange

示例代码 2：遍历对象数组

var users = [
  { "name": "李四", "age": 25 },
  { "name": "王五", "age": 28 },
  { "name": "赵六", "age": 35 }
];
$.each(users, function(index, user) {
  console.log("用户 " + (index + 1) + ": " + user.name + ", 年龄: " + user.age);
});

输出结果：

用户 1: 李四, 年龄: 25
用户 2: 王五, 年龄: 28
用户 3: 赵六, 年龄: 35

使用原生 JavaScript 的 forEach() 方法遍历 JSON 数组

如果不使用 jQuery，对于 JSON 数组，我们可以使用原生的 Array.prototype.forEach() 方法，需要注意的是，forEach() 方法只能遍历数组，不能直接遍历对象。

forEach() 方法接收一个回调函数，该回调函数接收三个参数：当前值 (currentValue)、索引 (index) 和 数组本身 (array)，通常我们只需要前两个参数。

示例代码：

var users = [
  { "name": "李四", "age": 25 },
  { "name": "王五", "age": 28 },
  { "name": "赵六", "age": 35 }
];
users.forEach(function(user, index) {
  console.log("用户 " + (index + 1) + ": " + user.name + ", 年龄: " + user.age);
});

输出结果：

用户 1: 李四, 年龄: 25
用户 2: 王五, 年龄: 28
用户 3: 赵六, 年龄: 35

使用原生 JavaScript 的 for...in 循环遍历 JSON 对象

对于 JSON 对象，原生 JavaScript 提供了 for...in 循环来遍历其可枚举的属性（包括继承的可枚举属性，但通常我们只关心对象自身的属性）。

示例代码：

var person = {
  "name": "张三",
  "age": 30,
  "city": "北京"
};
for (var key in person) {
  // 使用 hasOwnProperty() 方法确保只遍历对象自身的属性
  if (person.hasOwnProperty(key)) {
    console.log(key + ": " + person[key]);
  }
}

输出结果：

name: 张三
age: 30
city: 北京

使用原生 JavaScript 的 for...of 循环遍历 JSON 数组（ES6）

ES6 引入了 for...of 循环，可以遍历可迭代对象（如数组、Map、Set 等），它直接获取的是元素的值，而不是索引。

示例代码：

var fruits = ["apple", "banana", "orange"];
for (var value of fruits) {
  console.log(value);
}
var users = [
  { "name": "李四", "age": 25 },
  { "name": "王五", "age": 28 }
];
for (var user of users) {
  console.log(user.name + ", 年龄: " + user.age);
}

输出结果：

apple
banana
orange
李四, 年龄: 25
王五, 年龄: 28

总结与选择

• 如果项目已经使用了 jQuery，$.each() 是一个非常好的选择，因为它统一了对对象和数组的遍历方式。
• 如果项目是原生 JavaScript 开发：
  • 遍历 JSON 对象：推荐使用 for...in 循环（配合 hasOwnProperty）。
  • 遍历 JSON 数组：推荐使用 forEach() 或者 for...of 循环（ES6 环境），for...of 语法更简洁。

这些遍历 JSON 数据的方法，将帮助你在日常开发中更灵活、高效地处理数据，根据实际需求和项目环境选择最合适的遍历方式，能让你的代码更加清晰和易维护。