前端如何处理JSON - 知用网电脑技巧

做网页开发时，经常要跟数据打交道。比如你在一个购物网站上刷新商品列表，页面没整个重载，但内容变了——这背后大概率是前端在处理 JSON 数据。

什么是JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，长得像JavaScript里的对象，但它是字符串。比如后台返回一段数据：

{"name": "小明", "age": 25, "city": "北京"}

这看起来像对象，其实是字符串，前端得把它转成真正的JS对象才能用。

把JSON字符串转成对象

用 JSON.parse() 就行。比如从接口拿到一串JSON：

const jsonString = '{"title": "手机", "price": 2999}';
const data = JSON.parse(jsonString);
console.log(data.title); // 输出：手机

注意，如果字符串格式不对，比如引号不匹配，parse 会报错。保险起见可以加个 try-catch：

try {
    const data = JSON.parse(jsonString);
    console.log(data);
} catch (e) {
    console.error('解析失败', e);
}

把对象转成JSON字符串

反向操作用 JSON.stringify()。比如你想把用户填写的表单数据发给后台：

const form = { username: 'test123', email: 'test@example.com' };
const jsonStr = JSON.stringify(form);
// 然后通过 fetch 发出去
fetch('/api/submit', {
    method: 'POST',
    body: jsonStr,
    headers: { 'Content-Type': 'application/json' }
});

异步请求中处理JSON

实际开发里，JSON大多来自网络请求。现在主流用 fetch，它返回的响应有个 .json() 方法，能自动解析：

fetch('/api/user')
    .then(res => res.json())
    .then(data => {
        console.log(data.name); // 直接使用数据
    })
    .catch(err => console.error('请求出错', err));

用 async/await 写更清晰：

async function loadUser() {
    try {
        const res = await fetch('/api/user');
        const data = await res.json();
        document.getElementById('username').textContent = data.name;
    } catch (err) {
        console.error('加载失败', err);
    }
}

处理复杂嵌套数据

有时候接口返回的JSON层级很深，比如一个博客列表：

{
  "list": [
    { "id": 1, "title": "第一篇", "author": { "name": "张三" } },
    { "id": 2, "title": "第二篇", "author": { "name": "李四" } }
  ]
}

遍历的时候要注意判空，避免 Cannot read property of undefined：

if (data.list && Array.isArray(data.list)) {
    data.list.forEach(post => {
        console.log(post.title, post.author?.name);
    });
}

调试小技巧

在浏览器控制台看JSON数据时，别直接 console.log(res)，最好用 console.log(JSON.stringify(res, null, 2))，这样格式清晰，容易排查问题。