JavaScript 循环遍历 JSON 数组

Java

使用JavaScript循环遍历JSON数组是一种常见的操作，它允许我们逐个访问数组中的元素并执行特定的操作。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端之间的数据传输。在JavaScript中，我们可以使用循环结构来遍历JSON数组，并使用其中的数据进行各种操作。

首先，我们需要获取到包含JSON数组的变量。这个变量可以是通过Ajax请求从后端获取的数据，也可以是直接在前端定义的一个对象。假设我们有一个名为"JSonData"的变量，它包含了一个JSON数组，我们可以使用以下代码来访问数组中的元素：

Javascript
var JSonData = [
  { "name": "John", "age": 30, "city": "New York" },
  { "name": "Jane", "age": 25, "city": "San Francisco" },
  { "name": "Bob", "age": 35, "city": "Chicago" }
];
for (var i = 0; i < JSonData.length; i++) {</p>  var item = JSonData[i];
  // 在这里可以对item进行各种操作
  console.log(item.name);
}

在上面的代码中，我们使用了一个for循环来遍历JSonData数组。循环的条件是i小于JSonData数组的长度，每次循环都会递增i的值。在循环内部，我们使用变量item来保存当前遍历到的数组元素。然后，我们可以使用item.name来获取其中的"name"属性值，并进行相应的操作。

案例代码：

下面我们来看一个具体的案例，假设我们有一个存储了学生信息的JSON数组，我们想要遍历该数组并在网页上展示每个学生的姓名和年龄。我们可以使用以下代码来实现：

Javascript
var students = [
  { "name": "John", "age": 18 },
  { "name": "Jane", "age": 20 },
  { "name": "Bob", "age": 19 }
];
var output = document.getElementById("output");
for (var i = 0; i < students.length; i++) {</p>  var student = students[i];
  
  var name = student.name;
  var age = student.age;
  
  var paragraph = document.createElement("p");
  paragraph.innerHTML = "<strong>姓名：</strong>" + name + "，<strong>年龄：</strong>" + age;
  
  output.appendChild(paragraph);
}

在上面的代码中，我们首先获取了一个id为"output"的HTML元素，它用于展示学生信息。然后，我们使用for循环遍历了students数组，并依次获取每个学生的姓名和年龄。接着，我们创建了一个

元素，并将学生信息以字符串的形式赋值给了该元素的innerHTML属性。最后，我们通过appendChild方法将该元素添加到了output元素中。

通过以上代码，我们可以在网页上展示出每个学生的姓名和年龄，实现了对JSON数组的循环遍历和数据操作。

：

使用JavaScript循环遍历JSON数组是一种非常常见的操作，它允许我们逐个访问数组中的元素并执行特定的操作。通过for循环和数组的length属性，我们可以依次获取数组中的元素，并在循环内部对其进行各种操作。在实际开发中，我们可以根据具体需求，灵活运用循环遍历JSON数组的方法，实现各种数据操作和展示效果。