🎬 HoRain云小助手：个人主页
🔥 个人专栏: 《Linux 系列教程》《c语言教程》
⛺️生活的理想，就是为了理想的生活!
⛳️ 推荐
前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。
专栏介绍
专栏名称 | 专栏介绍 |
《C语言》 | 本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。 |
《网络协议》 | 本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！ |
《docker容器精解篇》 | 全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。 |
《linux系列》 | 本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。 |
《python 系列》 | 本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。 |
《试题库》 | 本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等） |
目录
⛳️ 推荐
专栏介绍
JavaScript JSON：数据交换的轻量级格式
什么是JSON？
JSON基本语法
1. 键值对（对象）
2. 数组
JSON与JavaScript的关系
核心方法：序列化与解析
1. 序列化（对象 → 字符串）
2. 解析（字符串 → 对象）
JSON的主要用途
常见问题与注意事项
1. JSON不支持的类型
2. 日期处理
3. 循环引用问题
4. 安全解析
实际应用场景
为什么使用JSON？
JavaScript JSON：数据交换的轻量级格式
什么是JSON？
JSON（JavaScript Object Notation）是"JavaScript对象表示法"的缩写，是一种轻量级的数据交换格式。它独立于语言，虽然名字中包含"JavaScript"，但并非JavaScript专属，几乎所有现代编程语言都支持JSON。
JSON是一种文本化格式，用于在不同系统、不同语言之间交换数据。它基于标准，面向对象，非常适合作为Web应用中的数据传输格式。
JSON基本语法
1. 键值对（对象）
- 键名必须用双引号括起来
- 值可以是字符串、数字、布尔值、对象、数组、null
- 不允许函数、undefined、NaN等JavaScript特有值
{ "name": "Alice", "age": 30, "isStudent": false, "hobbies": ["reading", "swimming"], "address": { "city": "Beijing", "zipcode": "100000" } }2. 数组
- 数组元素可以是任意合法的JSON值
- 支持嵌套结构
[ "apple", "banana", "orange", { "id": 1, "title": "Learn JSON" } ]JSON与JavaScript的关系
- JSON是JavaScript对象字面量的子集，但不是完全等同
- JSON是字符串格式，而JavaScript对象是数据结构
- JSON可以被JavaScript的
JSON.parse()解析为对象，也可以用JSON.stringify()将对象转换为JSON字符串
核心方法：序列化与解析
1. 序列化（对象 → 字符串）
const person = { name: 'Alice', age: 30, isStudent: false }; const jsonString = JSON.stringify(person); console.log(jsonString); // 输出: {"name":"Alice","age":30,"isStudent":false}2. 解析（字符串 → 对象）
const jsonString = '{"name":"Alice","age":30}'; const person = JSON.parse(jsonString); console.log(person.name); // 输出: AliceJSON的主要用途
服务器与客户端通信（API）
- 浏览器向服务器发送请求，服务器返回JSON数据
- 浏览器解析JSON后在页面上显示数据
配置文件
- 用于存储应用程序配置
数据存储
- 本地存储数据（如浏览器localStorage）
常见问题与注意事项
1. JSON不支持的类型
- 不支持
undefined、function、Symbol、NaN - 这些在序列化时会被忽略或转为
null
2. 日期处理
Date对象默认序列化为ISO格式字符串- 解析后是字符串而非
Date实例，需手动转换
// 序列化日期 const date = new Date(); JSON.stringify(date); // "2024-05-12T08:30:00.000Z" // 解析日期 JSON.parse('{"date":"2024-05-12T08:30:00.000Z"}', (key, value) => { if (key === 'date') return new Date(value); return value; });3. 循环引用问题
- 当对象存在循环引用（如
obj.a = obj）时，JSON.stringify()会报错 - 解决方案：使用
replacer函数或第三方库
4. 安全解析
- 必须用try/catch包裹
JSON.parse()，防止非法JSON导致错误 - 不要信任外部来源的JSON数据
try { const data = JSON.parse(jsonString); } catch (e) { console.error('JSON解析失败:', e.message); }实际应用场景
前后端数据交互
- 前端发送
JSON.stringify()后的数据 - 后端返回JSON格式数据
- 前端使用
JSON.parse()解析
- 前端发送
本地存储
- 将对象存储到localStorage：
localStorage.setItem('user', JSON.stringify(user)) - 读取时：
const user = JSON.parse(localStorage.getItem('user'))
- 将对象存储到localStorage：
为什么使用JSON？
- 轻量级：比XML更小，传输更快
- 易读易写：人类可读，机器可解析
- 广泛支持：几乎所有编程语言都支持
- 标准格式：基于RFC 4627标准
JSON已成为现代Web开发中数据交换的标准格式，无论是AJAX请求、RESTful API还是前端框架的数据交互，JSON都扮演着核心角色。
❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍
🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙
