The Odin Project Curriculum 之 JSON 完全指南语法规则、parse 与 stringify 实战【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculumJSONJavaScript Object Notation是 Web 上传输数据的事实标准格式几乎所有外部服务器与 API 的交互都离不开它。本篇文章源自 The Odin Project 开源课程本项目curriculum仓库中「Organizing Your JavaScript Code」路径下的 json.md 一课围绕读懂 JSON与读写 JSON两个核心目标展开并结合作业项目中的真实应用场景fetch API 响应解析、localStorage 持久化、package.json配置进行纵深讲解。学完本课后你将掌握 JSON 的语法规则、JSON.parse()与JSON.stringify()两大核心方法的使用细节并能独立排查最常见的 JSON 格式错误。课程定位为什么 JSON 值得单独一课JSON 的语法与 JavaScript 对象字面量极为相似因此对 JS 开发者而言上手门槛很低。但正如原课程所言格式化规则如果不了解可能会造成困惑——恰恰是那些看似无关紧要的细节引号、逗号、缩进最容易在真实项目中引发难以排查的报错。这一课的存在意义就是用 1015 分钟的时间把这些规则讲透避免后续在 API 联调、数据持久化等环节踩坑。本课的学习目标只有两条掌握 JSON 是什么。理解如何读取与书写 JSON 格式的数据。下面我们逐一展开。什么是 JSONWeb 传输数据的通用格式JSONJavaScript Object Notation是一种用于组织数据的标准化格式。它重度借鉴了 JavaScript 对象的语法——键值对、嵌套结构、数组几乎与 JS 对象字面量如出一辙。但需要特别强调JSON 是格式不是 JavaScript 语言本身它独立于任何编程语言存在因此才可能成为跨语言、跨平台的通用数据交换格式。在你学习 JavaScript 的过程中JSON 几乎无处不在调用外部 API 时服务端返回的数据通常是 JSON 字符串使用fetch发起请求后需要把响应体解析为 JS 对象才能使用使用localStorage做浏览器端持久化时存储与读取的数据也是 JSON 字符串项目配置文件如 npm 的package.json本身就是 JSON 文件。可以这样理解JSON 字符串是在网络上传输的形态JavaScript 对象是在内存中使用的形态两者之间的转换正是JSON.parse()与JSON.stringify()的职责所在。JSON 语法规则从对象字面量到 JSON 的差异虽然 JSON 基于 JavaScript 对象语法但它的书写规范比对象字面量更严格这是新手最容易犯错的根源。下面是一个合法的 JSON 示例{ name: The Odin Project, topics: [JavaScript, Ruby, NodeJS], free: true, lessons: { organizing: 14, asynchronous: 8 }, owner: null }与 JavaScript 对象字面量相比JSON 有以下硬性规则规则说明常见错误键必须用双引号包裹JSON 中不允许出现未加引号的键也不接受单引号{name: TOP}❌字符串值必须用双引号单引号字符串在 JSON 中非法{name: TOP}❌不允许尾随逗号最后一个元素后不能有逗号{a: 1, b: 2,}❌只支持有限数据类型仅支持对象、数组、字符串、数字、布尔值、null函数、undefined、NaN均无法表达不区分注释JSON 中没有注释语法// 注释会导致解析失败能够合法存在于 JSON 中的值只有六种对象{}、数组[]、字符串...、数字、布尔值true/false与null。这意味着函数、undefined、NaN、Infinity以及循环引用都无法被 JSON 表达——这一点在后续 localStorage 持久化场景中会直接影响到你的设计。两大核心方法JSON.parse 与 JSON.stringify原课程明确指出处理 JSON 时最常用的两个 JavaScript 方法就是JSON.parse()与JSON.stringify()。它们是双向转换的两个端点几乎所有 JSON 相关的代码都是围绕它们展开的。JSON.parse()把 JSON 字符串变成 JavaScript 对象const jsonString {name: The Odin Project, topics: [JavaScript]}; const obj JSON.parse(jsonString); console.log(obj.name); // The Odin Project console.log(obj.topics); // [JavaScript]JSON.parse()接收一个 JSON 字符串将其解析为对应的 JavaScript 值。传入的参数必须是合法的 JSON 字符串否则会抛出SyntaxError这也是误格式化的 JSON 是常见错误来源的直接原因。JSON.stringify()把 JavaScript 对象变成 JSON 字符串const obj { name: The Odin Project, topics: [JavaScript, Ruby] }; const jsonString JSON.stringify(obj); // {name:The Odin Project,topics:[JavaScript,Ruby]}JSON.stringify()接收一个 JavaScript 值返回对应的 JSON 字符串。返回值默认不带缩进紧凑格式适合网络传输与存储如需人类可读的格式化输出可以传入第二个参数替换函数或第三个参数缩进空格数JSON.stringify(obj, null, 2); // 输出带 2 空格缩进的格式化 JSON便于调试查看需要牢记JSON.stringify()的序列化边界函数、undefined、Symbol等非法值会被忽略或转为null循环引用的对象会抛出TypeError。因此在持久化之前务必确认你的数据结构中不包含这些内容。排查与验证格式化错误是常见 bug 源头原课程特意提醒误格式化的 JSON 是引发错误的常见原因并建议借助 JSON 格式化工具对代码进行校验。结合上文语法规则实际开发中最容易踩的坑集中在三处多写/漏写逗号尤其是尾随逗号——浏览器控制台的Unexpected token报错通常源于此引号使用错误键或字符串值使用了单引号或未加引号手写 JSON 时把 JS 对象字面量直接当成 JSON例如把{name: TOP}传给JSON.parse()。验证手段很简单把待校验的 JSON 文本粘贴到格式化工具中工具会高亮指出格式错误的位置日常调试中也可以在浏览器控制台直接执行JSON.parse()观察是否抛出SyntaxError以及错误信息指向的具体行列。仓库实战场景一fetch API 响应解析JSON 最常见的应用场景是处理 API 响应。在仓库的 working_with_apis.md 一课中课程演示了完整的 fetch 调用链——这里恰好展示了 JSON 从网络字符串到JS 对象的转换过程。fetch(https://api.giphy.com/v1/gifs/translate?api_keyYOUR_KEY_HEREscats) .then(function(response) { return response.json(); }) .then(function(response) { console.log(response.data.images.original.url); });这里值得注意两点response.json()与JSON.parse()的作用相同——把响应体中的 JSON 字符串解析为 JS 对象但它是异步的返回的是一个 Promise因此必须链式调用.then()或配合await使用解析得到的对象往往嵌套很深如上述示例中图片 URL 位于response.data.images.original.url需要在控制台逐层展开结构后再编写访问路径。在配套的 async_and_await.md 一课中课程还展示了用await简化这一过程的方式见该文档中多处const catData await response.json();的用法本质都是同一件事把 JSON 字符串还原成可编程的 JS 对象。仓库实战场景二localStorage 数据持久化JSON 的第二个高频场景是浏览器端持久化。在 project_todo_list.md 的作业要求中课程明确要求学员用 Web Storage API 保存待办事项并给出了三条与 JSON 直接相关的提示localStorage 通过 JSON 发送和存储数据取出时同样得到 JSON 格式因此需要借助JSON.stringify()写入、JSON.parse()读取函数无法存储在 JSON 中从 localStorage 取回数据后必须自行把方法重新挂回对象属性上数据可能不存在——读取时务必做空值判断避免应用崩溃。一个典型的持久化读写模式如下// 写入对象 - JSON 字符串 localStorage.setItem(todos, JSON.stringify(todos)); // 读取JSON 字符串 - 对象注意判空 const saved localStorage.getItem(todos); const todos saved ? JSON.parse(saved) : [];课程还提示可以使用 DevTools 的Application面板 →Local Storage标签查看实时数据变化这是调试持久化逻辑的有效手段。值得注意的是由于 JSON 无法表达函数把方法挂回对象这一步往往需要借助构造函数、工厂函数或类来完成——这与本路径下 object_constructors.md、factory_functions_and_module_pattern.md 等课程的内容形成了呼应。仓库实战场景三package.json 配置文件JSON 不仅是运行时数据格式也是 JS 生态中最重要的配置文件格式。在 npm.md 一课中课程指出 npm 的一切都围绕名为package.json的文件展开——它是一个记录项目名称、依赖及版本号等信息的 JSON 文件npm 读取它可以安装指定版本的依赖、执行你设定的 npm 脚本。本项目仓库根目录下的 package.json 就是一个真实范例{ name: curriculum, version: 1.0.0, scripts: { lint: markdownlint-cli2, fix: markdownlint-cli2 --fix, test: node --test }, license: CC BY-NC-SA 4.0, devDependencies: { markdownlint-cli2: ^0.23.2 } }该文件的价值在于任何人克隆仓库后执行npm installnpm 都会读取这份 JSON 中的devDependencies字段自动安装markdownlint-cli2依赖随后即可运行scripts中定义的lint、fix、test命令。仓库本身并不携带依赖代码一切信息都记录在这份 JSON 中——这正是 JSON 作为标准化配置载体在工程实践中的典型体现。当你用 npm 安装或卸载包时package.json会被自动更新无需手写。知识检查回顾与自测以下三个问题对应本课的核心知识点建议在继续学习前自行回答什么是 JSON—— 一种基于 JavaScript 对象语法的标准化数据格式是 Web 上传输数据的通用格式键必须双引号包裹仅支持六种数据类型。如何把 JSON 字符串转换为 JavaScript 对象—— 调用JSON.parse(jsonString)在 fetch 场景中则使用response.json()。如何把 JavaScript 对象转换为 JSON 字符串—— 调用JSON.stringify(obj)序列化时函数、undefined等值会被忽略或转为null。如果你能准确回答以上问题并能在浏览器控制台熟练完成一次对象 ↔ JSON 字符串的双向转换那么你已经具备了继续学习异步编程与 API 交互working_with_apis.md以及进一步完成 project_todo_list.md、project_weather_app.md 等实战项目所需的全部 JSON 基础。【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考