如何循环json数

如何循环遍历JSON数组：从基础到实践

在JavaScript开发中，处理JSON数据是一项常见任务，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，广泛应用于前后端数据交互，JSON数组的循环遍历是开发者必须的基础技能，本文将详细介绍如何循环遍历JSON数组,包括多种方法和最佳实践。

JSON数组基础

JSON数组是用方括号[]包裹的有序数据集合，可以包含多种数据类型，如字符串、数字、布尔值、对象,甚至是嵌套的数组或JSON对象。

[
  {"id": 1, "name": "Alice", "age": 25},
  {"id": 2, "name": "Bob", "age": 30},
  {"id": 3, "name": "Charlie", "age": 35}
]

循环遍历JSON数组的方法

使用for循环

传统的for循环是最基础的遍历方式：

const jsonArray = [
  {"id": 1, "name": "Alice", "age": 25},
  {"id": 2, "name": "Bob", "age": 30},
  {"id": 3, "name": "Charlie", "age": 35}
];
for (let i = 0; i < jsonArray.length; i++) {
  const item = jsonArray[i];
  console.log(`ID: ${item.id}, Name: ${item.name}, Age: ${item.age}`);
}

优点：简单直观，兼容性好
缺点：代码量较多，容易出错

使用for...of循环

ES6引入的for...of循环提供了更简洁的语法：

const jsonArray = [/* 同上 */];
for (const item of jsonArray) {
  console.log(`ID: ${item.id}, Name: ${item.name}, Age: ${item.age}`);
}

优点：代码简洁，无需索引
缺点：无法直接获取当前索引

使用forEach方法

数组的forEach方法是一种函数式遍历方式：

const jsonArray = [/* 同上 */];
jsonArray.forEach((item, index) => {
  console.log(`Index: ${index}, ID: ${item.id}, Name: ${item.name}, Age: ${item.age}`);
});

优点：简洁，可同时获取元素和索引
缺点：无法使用break或continue跳出循环

使用map方法（带转换）

如果需要在遍历时对数据进行转换，可以使用map：

const jsonArray = [/* 同上 */];
const names = jsonArray.map(item => item.name);
console.log(names); // ["Alice", "Bob", "Charlie"]

优点：链式调用，适合数据转换
缺点：不适合仅遍历不转换的场景

使用for...in循环（不推荐用于数组）

虽然for...in可以遍历数组，但主要设计用于对象，且会遍历原型链上的属性,不推荐用于数组遍历：

const jsonArray = [/* 同上 */];
for (const index in jsonArray) {
  if (jsonArray.hasOwnProperty(index)) {
    const item = jsonArray[index];
    console.log(`ID: ${item.id}, Name: ${item.name}, Age: ${item.age}`);
  }
}

缺点：性能较差，可能遍历到非索引属性

使用while循环

while循环也可以用于遍历数组,但较少使用：

const jsonArray = [/* 同上 */];
let i = 0;
while (i < jsonArray.length) {
  const item = jsonArray[i];
  console.log(`ID: ${item.id}, Name: ${item.name}, Age: ${item.age}`);
  i++;
}

处理嵌套JSON数组

当JSON数组中包含嵌套数组或对象时,可以使用递归或嵌套循环：

const nestedJsonArray = [
  {
    "id": 1,
    "name": "Alice",
    "hobbies": ["reading", "swimming"]
  },
  {
    "id": 2,
    "name": "Bob",
    "hobbies": ["gaming", "coding"]
  }
];
// 嵌套循环
nestedJsonArray.forEach(person => {
  console.log(`Name: ${person.name}`);
  person.hobbies.forEach(hobby => {
    console.log(` - Hobby: ${hobby}`);
  });
});
// 递归处理（适用于更复杂的嵌套）
function traverseArray(arr) {
  arr.forEach(item => {
    if (Array.isArray(item)) {
      traverseArray(item);
    } else if (typeof item === 'object' && item !== null) {
      Object.values(item).forEach(value => {
        if (Array.isArray(value)) {
          traverseArray(value);
        }
      });
    } else {
      console.log(item);
    }
  });
}

性能优化建议

1. 避免在循环中修改数组长度：不要在循环中添加或删除数组元素,可能导致无限循环或跳过元素。

2. 缓存数组长度：在传统for循环中,缓存数组长度可以提高性能：

   for (let i = 0, len = jsonArray.length; i < len; i++) {
     // ...
   }

3. 选择合适的遍历方法：

   • 简单遍历：for...of或forEach
   • 需要索引：for循环或forEach
   • 需要转换：map
   • 需要提前终止：for循环或for...of（配合break）

实战示例

假设我们需要从用户列表中筛选出年龄大于30的用户：

const users = [
  {"id": 1, "name": "Alice", "age": 25},
  {"id": 2, "name": "Bob", "age": 30},
  {"id": 3, "name": "Charlie", "age": 35}
];
// 使用filter和forEach
const olderUsers = users.filter(user => user.age > 30);
olderUsers.forEach(user => {
  console.log(`${user.name} is ${user.age} years old`);
});
// 输出：
// Charlie is 35 years old

循环遍历JSON数组是JavaScript开发中的基础技能,根据具体需求选择合适的遍历方法：

• 传统for循环：需要索引或提前终止时
• for...of循环：简单遍历，推荐首选
• forEach方法：需要索引且无需提前终止
• map方法：需要数据转换时

这些方法并理解它们的适用场景，可以让你在处理JSON数据时更加得心应手，随着ES6+的普及，for...of和数组方法已成为现代JavaScript开发中的主流选择。