讲师中心 微信公众号
AI工具推荐 视频效率加速

javascript如何解析和操作JSON_有哪些注意事项?

浅枫同学_5737

浅枫同学_5737

发布时间:2026-01-09 20:30:02

|

768人浏览过

|

来源于php中文网

原创

JSON.parse()是唯一安全的解析方式,因它严格校验语法、拒绝非法格式且不执行代码;eval()和Function构造函数易致XSS且绕过校验,直接使用响应体字符串则无法访问属性。

javascript如何解析和操作json_有哪些注意事项?

JSON 解析必须用 JSON.parse(),不能用 eval() 或构造函数;操作 JSON 数据本质是操作普通 JavaScript 对象,但需警惕引用、深浅拷贝和循环引用问题。

为什么 JSON.parse() 是唯一安全的解析方式

浏览器和 Node.js 环境中,JSON.parse() 是唯一被标准认可、经过严格语法校验的 JSON 解析入口。它拒绝非法格式(如尾部逗号、单引号、undefined),避免执行任意代码。

常见错误现象:

  • 用 eval('{"a":1}') —— 可能执行恶意脚本,已被现代 Linter(如 ESLint)标记为 no-eval
  • 用 new Function('return ' + str)() —— 同样绕过 JSON 格式校验,且性能差
  • 直接把后端返回的响应体当对象用(没调用 JSON.parse())—— 得到的是字符串,访问 .data 会是 undefined

正确做法:

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

try {
  const data = JSON.parse(responseBody);
} catch (e) {
  // e.message 通常是 "Unexpected token ..." 或 "Unexpected end of JSON input"
  console.error('JSON 解析失败:', e.message);
}

JSON.stringify() 的三个常用陷阱

JSON.stringify() 看似简单,但实际使用中容易忽略序列化限制和行为细节:

  • 函数、undefined、Symbol 类型的键或值会被**静默丢弃**(不是报错)
  • 循环引用对象会直接抛出 TypeError: Converting circular structure to JSON
  • 日期对象转成字符串后是 ISO 格式("2023-10-05T12:34:56.789Z"),丢失时区信息或自定义格式

示例:

React 组件生成器
React 组件生成器

根据项目规范生成 React 和 Vue 组件,包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用,例如:“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发:涉及 React/TSX/Vue 组件生成、UI 组件创建,或为组件生成测试文件。

下载
const obj = { a: 1, b: () => {}, c: undefined, d: new Date() };
console.log(JSON.stringify(obj)); // {"a":1,"d":"2023-10-05T12:34:56.789Z"}

若需保留函数或处理循环引用,必须传入自定义 replacer 函数或用第三方库(如 flatted)。

修改 JSON 数据前必须明确:你操作的是对象,不是“JSON”

JSON 是一种数据交换格式(字符串),一旦用 JSON.parse() 解析,得到的就是普通 JS 对象/数组。所有后续操作都是对内存中对象的读写,与“JSON”本身无关。

关键注意事项:

  • 直接赋值修改(obj.name = "new")会影响原对象,若该对象被多处引用,可能引发意外副作用
  • 想安全修改,应先深拷贝:structuredClone(obj)(现代环境)、JSON.parse(JSON.stringify(obj))(仅限纯数据,不支持函数/Date/Map/Set)或使用 lodash.cloneDeep()
  • 删除字段用 delete obj.key,但注意它不会触发 Vue/React 的响应式更新(需用响应式 API 替代)

服务端返回的 JSON 响应体需要手动解析

Fetch 和 Axios 默认**不会自动调用 JSON.parse()**,即使响应头是 Content-Type: application/json。

常见错误写法:

fetch('/api/user')
  .then(res => res.json()) // ✅ 正确:res.json() 内部调用 JSON.parse()
  .catch(err => console.error(err));

// ❌ 错误:忘记调用 .json(),拿到的是 Response 实例
fetch('/api/user')
  .then(res => res) // 这里 res 是 Response 对象,不是解析后的数据

// ❌ 错误:手动调用 JSON.parse() 但没等 body 流完成
fetch('/api/user')
  .then(res => JSON.parse(res.body)) // TypeError: Cannot parse non-string

Axios 用户注意:axios.get() 默认会自动解析 JSON(只要响应头匹配),但 axios.post() 的 data 字段仍需手动 JSON.stringify(),否则后端收不到结构化数据。

最易被忽略的一点:JSON 规范不支持注释、尾随逗号、单引号,任何编辑器里手写的“类 JSON”配置文件(比如 config.json)若含这些,用 fs.readFileSync() 读取后直接 JSON.parse() 必然失败 —— 这类文件本质是 JS 模块,应改用 require('./config.json')(Node.js)或改用 .cjs + import 并启用 JSON modules。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

相关专题

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

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

2215

2023.08.07

json是什么
json是什么

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

3502

2023.08.23

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

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

1176

2023.10.13

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

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

4039

2025.09.10

require的用法
require的用法

require的用法有引入模块、导入类或方法、执行特定任务。想了解更多require的相关内容,可以阅读本专题下面的文章。

1975

2023.11.27

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1818

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2904

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

6204

2023.10.24

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

60

2026.10.28

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.3万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.6万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn