JavaScript解析JSON：前端开发中的实用技巧

在日常的网页ref="/tag/156/" style="color:#B2A89E;font-weight:bold;">开发中，经常需要从服务器获取数据并展示在页面上。最常见的数据格式就是 JSON。比如你在一个购物网站上查看商品列表，页面不会把所有内容都写死，而是通过 JavaScript 去请求后台接口，拿到一串 JSON 数据，再把它“翻译”成你能看懂的商品信息。

什么是 JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，看起来和 JavaScript 中的对象很像。例如：

{"name": "张三", "age": 25, "city": "北京"}

这种结构清晰、易于读写，因此被广泛用于前后端通信。

JavaScript 如何解析 JSON

当从网络请求中拿到一段 JSON 字符串时，不能直接使用，必须先解析成 JavaScript 对象。这时候就要用到 JSON.parse() 方法。

举个例子，假设从接口收到下面这串文本：

const jsonString = '{"title": "文章标题", "author": "小王", "views": 1500}';
const data = JSON.parse(jsonString);
console.log(data.title); // 输出：文章标题

这样，data 就变成了一个真正的对象，可以随意访问它的属性。

注意异常处理

不是所有字符串都能成功解析。如果 JSON 格式出错，比如少了引号或多了一个逗号，JSON.parse() 会抛出错误，导致程序中断。所以实际使用时最好加上 try-catch：

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

这样即使数据有问题，也不会让整个页面崩溃。

从网络请求中直接处理 JSON

现代浏览器中，通常用 fetch 获取数据。很多情况下，响应体已经是 JSON 格式，可以直接调用 .json() 方法：

fetch('/api/user')
    .then(response => response.json())
    .then(data => {
        console.log(data.name);
    });

这个 .json() 方法内部其实也是调用了 JSON.parse()，只是封装得更方便。

小技巧：格式化与调试

有时候你想看看拿到的 JSON 长什么样，可以用 JSON.stringify() 把对象转回字符串，并且加上缩进：

console.log(JSON.stringify(data, null, 2));

这样打印出来的结构更清晰，适合调试。