JSON教程：JavaScript处理JSON数据实战案例（附代码）

用 JavaScript 做开发的朋友，是不是常遇到这种情况：拿到 JSON 数据却不知道怎么解析，想把数据存到本地又转不对格式？很多新手都说 “JSON 和 JavaScript 明明名字像，处理起来却总出错”。其实 JavaScript 处理 JSON 数据有专门的 “工具箱”，学会了这两个核心方法，大部分问题都能搞定。今天兔子哥就带大家通过实战案例，看看 JavaScript 是怎么玩转 JSON 数据的，附详细代码示例，哪怕你刚入门，跟着这篇教程做也能上手。

为啥 JavaScript 处理 JSON 最顺手？

JSON 全称里带 “JavaScript”，这可不是巧合。JSON 本来就是从 JavaScript 对象格式衍生出来的，所以 JavaScript 对它的支持特别好。你想啊，前后端传数据常用 JSON，前端用 JavaScript 接收后直接就能处理，不用额外转格式，这多方便。
虽然其他语言也能处理 JSON，但 JavaScript 里有两个 “专属工具”——JSON.parse()和JSON.stringify()，用这两个方法能轻松把 JSON 字符串转成对象，或者把对象转成 JSON 字符串。不过话说回来，这俩方法看着简单，实际用的时候却容易踩坑，比如格式不对导致解析失败，这也是新手最头疼的地方。

核心方法吃透：2 个必学的 JSON 处理函数

1. JSON.parse ()：把 JSON 字符串变成 JavaScript 对象

咱们拿到的 JSON 数据通常是字符串格式，比如从 API 接口请求到的响应，长得像这样：
json

'{"name":"张三","age":25,"hobby":["看书","跑步"]}'

这字符串没法直接用，得用JSON.parse()转成 JavaScript 对象才能操作：
javascript

// JSON字符串const jsonStr = '{"name":"张三","age":25,"hobby":["看书","跑步"]}';// 转成JavaScript对象const userObj = JSON.parse(jsonStr);// 现在就能直接用对象的方式访问数据啦console.log(userObj.name); // 输出：张三console.log(userObj.hobby[0]); // 输出：看书

用这个方法时要注意，JSON 字符串必须符合格式要求，比如键得用双引号，不然会报错。之前有朋友在字符串里用了单引号，结果JSON.parse()直接失败，查了半天才发现是引号的问题。

2. JSON.stringify ()：把 JavaScript 对象转成 JSON 字符串

有时候我们需要把数据存到本地存储，或者传给后端，这时候就得把 JavaScript 对象转成 JSON 字符串，这时候JSON.stringify()就派上用场了：
javascript

// JavaScript对象const userObj = {name: "李四",age: 30,isStudent: false};// 转成JSON字符串const jsonStr = JSON.stringify(userObj);// 输出看看结果console.log(jsonStr);// 输出：{"name":"李四","age":30,"isStudent":false}

这个方法还能加参数控制格式，比如加个空格让字符串更易读：
javascript

const prettyJson = JSON.stringify(userObj, null, 2);// 第二个参数null表示不筛选属性，第三个参数2表示缩进2个空格console.log(prettyJson); // 格式化后的JSON，看着舒服多了

实战案例：用 JavaScript 处理 API 返回的 JSON 数据

咱们来做个常见场景：从 API 请求 JSON 数据，解析后显示到网页上。以获取用户列表为例，步骤超详细：

1. 准备 HTML 结构

先写个简单的页面，用来显示用户数据：
html

<div id="userList">div>

2. 用 fetch 请求 API 并处理 JSON

JavaScript 代码这样写：
javascript

// 请求API获取JSON数据fetch('https://api.example.com/users').then(response => {// 先把响应转成JSON字符串（这一步其实内部用了类似JSON.parse()的方法）return response.json();}).then(data => {// data就是解析后的JavaScript对象/数组const userList = document.getElementById('userList');let html = '
';// 循环遍历用户数据data.forEach(user => {html += `
${user.name} - ${user.age}岁`;});html += '';userList.innerHTML = html;}).catch(error => {console.log('请求失败：', error);});

这个案例里，response.json()帮我们自动完成了 JSON 字符串到对象的转换，省了手动调用JSON.parse()的步骤。但如果 API 返回的 JSON 格式有问题，这里就会进入catch捕获错误，所以实际开发中一定要加错误处理。

常见问题及避坑指南

问题 1：JSON.parse () 报错 “Unexpected token”

这通常是 JSON 格式不对导致的，比如：

• 键没加双引号，比如{name: "张三"}（正确应该是{"name": "张三"}）
• 字符串用了单引号，比如{'name': '张三'}
• 末尾多了逗号，比如{"name": "张三",}

解决办法：用在线 JSON 校验工具（比如JSON.cn）检查格式，修正后再解析。

问题 2：JSON.stringify () 转不出函数或 undefined

JSON.stringify()会忽略函数和 undefined 值，比如：
javascript

const obj = {name: "王五",sayHi: function() { console.log("Hi"); },address: undefined};console.log(JSON.stringify(obj)); // 输出：{"name":"王五"}（函数和undefined没了）

这是正常现象，因为 JSON 不支持存储函数和 undefined。如果需要保留函数，得自己想办法转换，比如先把函数转成字符串。

问题 3：本地存储存 JSON 数据取不出来？

本地存储（localStorage）只能存字符串，所以存之前必须用JSON.stringify()转一下，取的时候再用JSON.parse()转回来：
javascript

// 存数据const user = { name: "赵六", age: 28 };localStorage.setItem('user', JSON.stringify(user));// 取数据const storedUser = localStorage.getItem('user');const userObj = JSON.parse(storedUser); // 必须解析才能用对象方法访问

很多新手忘了解析，直接拿出来就用，结果发现storedUser.name是 undefined，就是因为没转成对象。

自问自答：新手常问的几个问题

问题 1：JavaScript 对象和 JSON 字符串到底啥区别？

简单说，JavaScript 对象是活的，能直接调用属性和方法；JSON 字符串是死的，就是一串字符，必须解析后才能用。比如{name: "张三"}是对象，'{"name": "张三"}'是 JSON 字符串，注意引号的区别。

问题 2：处理大 JSON 数据会影响性能吗？

如果 JSON 数据特别大（比如几万条数据），JSON.parse()和JSON.stringify()可能会有点慢，甚至阻塞页面。这时候可以考虑分批处理，或者用 Web Worker 在后台解析。不过一般项目里的数据量，这两个方法性能足够用了，或许这也是它们被广泛使用的原因之一。

问题 3：有没有办法让 JSON 支持注释？

标准 JSON 是不支持注释的，加了注释JSON.parse()就会报错。但有些场景确实需要注释，这时候可以用 JSON5（一种扩展格式），不过需要额外引入解析库。具体怎么在生产环境中稳定使用 JSON5 的高级特性，我目前还在摸索最佳实践，新手阶段先用标准 JSON 就够了。

个人建议：多练真实场景比背语法更重要

学 JavaScript 处理 JSON，别光记parse和stringify这两个单词，多在实际项目中用才记得牢。比如做个小练习：用 localStorage 存用户设置，下次打开页面时读取并应用设置，这个过程能把两个方法都练到。
遇到报错别慌，先看错误信息，大部分问题都出在格式上。用 console.log 多打印中间结果，看看数据在转换前后的样子，很快就能找到问题。兔子哥刚开始处理 JSON 时，也常因为少个引号、多个逗号折腾半天，练多了就会发现，这些小错误一眼就能看出来。
其实 JavaScript 处理 JSON 就像学骑自行车，刚开始总摔跤，掌握平衡后就很顺手了。这两个核心方法虽然简单，但却是前后端交互、数据存储的基础，花点时间练熟，以后开发会省很多事。希望这篇教程能帮到你，赶紧动手试试案例代码吧，你会发现处理 JSON 数据原来这么简单！

标签： JSON.stringify JSON.parse