js遍历json数组：JS遍历JSON数组的几种方法及最佳实践

来源：网络作者：日期：2025-11-05 17:48:32

在JavaScript开发中，JSON（JavaScript Object Notation）已经成为数据交换的标准格式之一，JSON数据通常以字符串的形式传输，但在实际应用中，我们经常需要将JSON字符串解析为JavaScript对象，并对其进行遍历操作，本文将介绍如何使用JavaScript遍历JSON数组,并提供几种常见的方法及其适用场景。

JSON数组的基本概念

JSON数组是一种有序的数据结构，类似于JavaScript中的数组,以下是一个JSON数组的示例：

[
  {"id": 1, "name": "张三", "age": 25},
  {"id": 2, "name": "李四", "age": 30},
  {"id": 3, "name": "王五", "age": 28}
]

在JavaScript中，我们首先需要将JSON字符串解析为JavaScript对象，使用JSON.parse()方法：

const jsonString = '[{"id": 1, "name": "张三", "age": 25}, {"id": 2, "name": "李四", "age": 30}]';
const jsonArray = JSON.parse(jsonString);

jsonArray就是一个普通的JavaScript数组,我们可以使用多种方式遍历它。

遍历JSON数组的几种方法

for循环
这是最传统的方式，适用于所有情况,但代码相对冗长。
```
for (let i = 0; i < jsonArray.length; i++) {
  const item = jsonArray[i];
  console.log(item.name); // 输出每个对象的name属性
}
```
优点：兼容性好，适用于所有浏览器。
缺点：代码量较大,可读性较低。
for...in循环
for...in循环可以遍历数组的所有可枚举属性，但需要注意的是，它也会遍历数组的原型链上的属性,因此通常不推荐用于遍历数组。
```
for (let index in jsonArray) {
  if (jsonArray.hasOwnProperty(index)) {
    const item = jsonArray[index];
    console.log(item.name);
  }
}
```
优点：语法简洁。
缺点：可能遍历到非数字索引的属性,容易出错。
for...of循环（ES6）
for...of循环是ES6引入的新特性，它可以直接遍历数组的元素,无需关心索引。
```
for (const item of jsonArray) {
  console.log(item.name);
}
```
优点：代码简洁，只遍历元素，不关心索引。
缺点：兼容性方面,较新的浏览器均支持。
forEach方法
forEach是数组的内置方法,适合简单的遍历操作。
```
jsonArray.forEach(item => {
  console.log(item.name);
});
```
优点：语法简洁，适合链式操作。
缺点：无法跳出循环（如break或return），且不支持async/await。
map方法
map方法不仅可以遍历数组，还可以返回一个新的数组,适用于需要转换数据的场景。
```
const names = jsonArray.map(item => item.name);
console.log(names); // 输出 [ '张三', '李四', '王五' ]
```
优点：功能强大，适合数据转换。
缺点：会返回一个新数组,原数组不变。
reduce方法
reduce方法可以对数组进行累计操作,适用于需要汇总数据的场景。
```
const totalAge = jsonArray.reduce((sum, item) => sum + item.age, 0);
console.log(totalAge); // 输出年龄总和
```
优点：功能强大，适合复杂数据处理。
缺点：学习曲线较陡峭。