🎬 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); // 输出: Alice

JSON的主要用途

1. 服务器与客户端通信（API）

   • 浏览器向服务器发送请求，服务器返回JSON数据
   • 浏览器解析JSON后在页面上显示数据

2. 配置文件

   • 用于存储应用程序配置

3. 数据存储

   • 本地存储数据（如浏览器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);
}

实际应用场景

1. 前后端数据交互

   • 前端发送JSON.stringify()后的数据
   • 后端返回JSON格式数据
   • 前端使用JSON.parse()解析

2. 本地存储

   • 将对象存储到localStorage：localStorage.setItem('user', JSON.stringify(user))
   • 读取时：const user = JSON.parse(localStorage.getItem('user'))

为什么使用JSON？

• 轻量级：比XML更小，传输更快
• 易读易写：人类可读，机器可解析
• 广泛支持：几乎所有编程语言都支持
• 标准格式：基于RFC 4627标准

JSON已成为现代Web开发中数据交换的标准格式，无论是AJAX请求、RESTful API还是前端框架的数据交互，JSON都扮演着核心角色。

❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍

🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙