JSON数组怎么解析：实战技巧与常见场景

JSON数组的基本结构

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，广泛用于前后端通信。当后端返回一组用户信息、商品列表或日志记录时，通常会以JSON数组的形式组织数据。比如，一个简单的用户列表可能长这样：

[{
  "id": 1,
  "name": "张三",
  "age": 28
}, {
  "id": 2,
  "name": "李四",
  "age": 32
}]

这是一个包含两个对象的数组，每个对象代表一条用户数据。要从中提取信息，就得学会解析它。

前端如何解析JSON数组

在浏览器环境中，最常见的做法是使用 JSON.parse() 将字符串转为JavaScript对象数组。假设你从接口拿到一段响应数据：

const response = '[{"id":1,"name":"张三"},{"id":2,"name":"李四"}]';
const users = JSON.parse(response);

users.forEach(user => {
  console.log(`ID: ${user.id}, 姓名: ${user.name}`);
});

执行后就能遍历出每个人的ID和姓名。这种写法在处理AJAX请求或Fetch API返回的结果时非常常见。

结合实际场景：渲染商品列表

比如你在做一个电商页面，后端返回了如下JSON数组：

[{
  "id": 101,
  "title": "无线蓝牙耳机",
  "price": 199
}, {
  "id": 102,
  "title": "智能手环",
  "price": 299
}]

你可以用JavaScript动态生成HTML：

const products = JSON.parse(response);
let html = '';

products.forEach(prod => {
  html += `<div class="product">
            <h4>${prod.title}</h4>
            <p>¥${prod.price}</p>
          </div>`;
});

document.getElementById('list').innerHTML = html;

这样一来，页面上的商品列表就自动填充好了。

后端语言中的解析方式

如果你用的是Python，可以借助 json 模块来处理：

import json

data = '[{"name": "张三", "score": 85}, {"name": "李四", "score": 92}]'
students = json.loads(data)

for s in students:
    print(f'{s["name"]} 的成绩是 {s["score"]} 分')

Java中常用Gson或Jackson库。以Gson为例：

Gson gson = new Gson();
User[] users = gson.fromJson(jsonString, User[].class);

只要定义好对应的User类，数组里的每条数据就会自动映射成Java对象。

注意空值和异常情况

不是所有传来的数据都规整。有时候接口可能返回空数组 []，或者根本不是合法JSON。这时候不做判断就直接解析，程序就会报错。建议加上容错处理：

let data = [];
try {
  data = JSON.parse(response) || [];
} catch (e) {
  console.warn('JSON解析失败', e);
}

// 确保data是数组再遍历
if (Array.isArray(data)) {
  data.forEach(item => { /* 处理逻辑 */ });
}

这种写法能避免因脏数据导致页面崩溃，提升稳定性。

嵌套数组也不怕

有些复杂结构里，JSON数组还会嵌套数组。例如一个班级包含多个学生，每个学生又有多个科目成绩：

[{
  "class": "高三一班",
  "students": [
    {"name": "小明", "scores": [88, 92, 76]},
    {"name": "小红", "scores": [95, 87, 90]}
  ]
}]

解析时只需要层层进入：

const classes = JSON.parse(response);
classes.forEach(cls => {
  cls.students.forEach(student => {
    const avg = student.scores.reduce((a,b) => a+b, 0) / student.scores.length;
    console.log(`${student.name} 平均分：${avg}`);
  });
});

掌握这种多层遍历，再复杂的结构也能拆解清楚。