0

0

JavaScript怎样解析JSON数据【教程】

夢幻星辰

夢幻星辰

发布时间:2026-01-23 13:22:02

|

490人浏览过

|

来源于php中文网

原创

json.parse()是解析json的标准方法,常见错误包括输入非合法json字符串、未转义字符、单引号或缺少引号、尾逗号;reviver用于解析后转换值;需区分服务端返回的是字符串还是已解析对象;不支持循环引用和大文件,应避免同步阻塞调用。

javascript怎样解析json数据【教程】

JavaScript 解析 JSON 数据不需要额外库,JSON.parse() 就是标准且唯一推荐的方式;但用错参数、忽略错误、混淆字符串与对象,是绝大多数人踩坑的根源。

为什么 JSON.parse() 会报 “Unexpected token” 错误

这不是语法问题,而是输入根本不是合法 JSON 字符串。常见原因包括:

  • 后端返回的是 HTML(比如 500 页面)或纯文本,却被当成了 JSON
  • 字符串里有未转义的换行、制表符或 Unicode 控制字符(如 \u2028\u2029
  • 用了单引号代替双引号,或键名没加引号({'name': 'Alice'}{name: 'Alice'} 都非法)
  • 末尾多了逗号({"a": 1,} 在严格 JSON 中不被接受)

调试时先 console.log(typeof data, data),确认它是 string 类型且内容可读。

JSON.parse() 的第二个参数:reviver 函数怎么用

它不是用来“修复格式”的,而是对已成功解析的值做逐层转换,常用于类型还原或字段过滤:

立即学习Java免费学习笔记(深入)”;

使用JSON进行网络数据交换传输 中文WORD版
使用JSON进行网络数据交换传输 中文WORD版

本文档主要讲述的是使用JSON进行网络数据交换传输;JSON(JavaScript ObjectNotation)是一种轻量级的数据交换格式,易于阅读和编写,同时也易于机器解析和生成,非常适合于服务器与客户端的交互。JSON采用与编程语言无关的文本格式,但是也使用了类C语言的习惯,这些特性使JSON成为理想的数据交换格式。 和 XML 一样,JSON 也是基于纯文本的数据格式。由于 JSON 天生是为 JavaScript 准备的,因此,JSON的数据格式非常简单,您可以用 JSON 传输一个简单的 St

下载
const json = '{"date":"2023-10-05","count":42}';
const obj = JSON.parse(json, (key, value) => {
  if (key === 'date') return new Date(value);
  if (key === 'count' && typeof value === 'number') return value * 2;
  return value;
});
// obj.date 是 Date 实例,obj.count 是 84

注意:reviver 会遍历所有键(包括嵌套对象和数组元素),返回 undefined 会删掉该属性;不要在其中修改原始数据结构,否则行为不可预测。

服务端返回的数据是 JSON 字符串还是已解析对象

取决于你用的是什么请求方式:

  • fetch().then(res => res.json()):自动调用 JSON.parse(),返回 Promise,resolve 值已是 JS 对象
  • XMLHttpRequestaxios 默认也做自动解析(response.data 是对象)
  • 但如果你手动取了 res.responseTextres.data 的原始字符串字段,就必须自己调用 JSON.parse()

混淆这两者会导致 JSON.parse() is not a function(传入了对象)或 Cannot convert object to primitive(对对象再 parse)。

遇到循环引用或超大 JSON 怎么办

JSON.parse() 本身不支持循环引用,也不处理流式解析。如果数据来自文件或长响应体:

  • 前端直接解析几 MB 的 JSON 很容易卡死主线程 —— 考虑用 Web Worker 搬到后台
  • 真有循环引用,说明数据不该走 JSON(JSON 标准不支持),应改用 structuredClone() 或 MessageChannel 序列化
  • 调试时可用 JSON.parse(text.slice(0, 200)) 截断预览开头,快速判断是否结构异常

最常被忽略的一点:JSON.parse() 是同步阻塞操作,别在高频事件(如 input)里无节制调用,也别假设它总能“兜住”后端发来的任意格式。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

455

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

546

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

334

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

82

2025.09.10

string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1010

2023.08.02

登录token无效
登录token无效

登录token无效解决方法:1、检查token的有效期限,如果token已经过期,需要重新获取一个新的token;2、检查token的签名,如果签名不正确,需要重新获取一个新的token;3、检查密钥的正确性,如果密钥不正确,需要重新获取一个新的token;4、使用HTTPS协议传输token,建议使用HTTPS协议进行传输 ;5、使用双因素认证,双因素认证可以提高账户的安全性。

6606

2023.09.14

登录token无效怎么办
登录token无效怎么办

登录token无效的解决办法有检查Token是否过期、检查Token是否正确、检查Token是否被篡改、检查Token是否与用户匹配、清除缓存或Cookie、检查网络连接和服务器状态、重新登录或请求新的Token、联系技术支持或开发人员等。本专题为大家提供token相关的文章、下载、课程内容,供大家免费下载体验。

842

2023.09.14

token怎么获取
token怎么获取

获取token值的方法:1、小程序调用“wx.login()”获取 临时登录凭证code,并回传到开发者服务器;2、开发者服务器以code换取,用户唯一标识openid和会话密钥“session_key”。想了解更详细的内容,可以阅读本专题下面的文章。

1092

2023.12.21

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

3

2026.03.11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号