阿杰，我来给你做一份 JavaScript JSON（JavaScript Object Notation）详解 + 代码示例。

1. JSON 是什么？

  • JSON 是一种轻量级的数据交换格式，全称 JavaScript Object Notation。
  • 本质上是一个 字符串，格式类似 JavaScript 对象，但属性名必须用双引号。
  • 语言无关（JavaScript、Python、Java 等都支持）。

2. JSON 的基本规则

  1. 数据是 键值对："key": value
  2. 键必须用 双引号 包裹。
  3. 值可以是：
    • 字符串 "hello"
    • 数字 123
    • 布尔值 true / false
    • null
    • 数组 [1,2,3]
    • 对象 {"a":1,"b":2}

示例：

{
  "name": "阿杰",
  "age": 25,
  "isStudent": false,
  "skills": ["JavaScript", "Python", "MySQL"],
  "address": {
    "city": "Shenzhen",
    "zip": "518000"
  }
}

3. JavaScript 中 JSON 的使用

(1) 对象 → JSON 字符串

const obj = {
  name: "阿杰",
  age: 25,
  skills: ["JavaScript", "Python"]
};

const jsonStr = JSON.stringify(obj);
console.log(jsonStr);
// 输出: {"name":"阿杰","age":25,"skills":["JavaScript","Python"]}

JSON.stringify(obj, null, 2) 可以格式化输出（缩进 2 个空格）。

(2) JSON 字符串 → 对象

const jsonStr = '{"name":"阿杰","age":25,"skills":["JavaScript","Python"]}';
const obj = JSON.parse(jsonStr);

console.log(obj.name);  // 阿杰
console.log(obj.skills[1]);  // Python

(3) 带错误处理的解析

const badJson = '{"name": "阿杰", "age": }';

try {
  const obj = JSON.parse(badJson);
} catch (err) {
  console.error("JSON 解析失败:", err.message);
}

4. 常见用途

  • 前后端数据交互（REST API / Ajax / Fetch）： fetch("/api/user") .then(res => res.json()) .then(data => console.log("用户数据:", data));
  • 本地存储（localStorage 只能存字符串）： const user = { name: "阿杰", age: 25 }; localStorage.setItem("user", JSON.stringify(user)); const saved = JSON.parse(localStorage.getItem("user")); console.log(saved.name); // 阿杰
  • 配置文件：常见于 package.json、tsconfig.json。

5. JSON vs JavaScript 对象区别

特性JSONJS 对象
引号要求key 必须双引号key 可不加引号
值类型限制不能有函数、undefined可以有函数、Symbol
存在形式字符串内存对象
用途数据交换运行时操作

示例：

// JS 对象
const obj = {name: "阿杰", sayHi: () => console.log("Hi")};

// JSON (字符串)
const jsonStr = '{"name":"阿杰"}';

好的，阿杰，我帮你整理了一份 JavaScript JSON 速查表（Cheat Sheet），包括基本概念、常用方法、示例代码和注意事项，方便直接查阅。

JavaScript JSON 速查表（Cheat Sheet）

1. JSON 基础概念

  • 全称：JavaScript Object Notation
  • 用途：轻量级数据交换格式
  • 数据类型：
    • 字符串 "text"
    • 数字 123
    • 布尔值 true / false
    • null
    • 数组 [1,2,3]
    • 对象 {"key": "value"}

2. JSON 与 JS 对象的区别

特性JSONJS 对象
键名必须双引号可以不加引号
值类型不允许函数、Symbol、undefined可包含函数、Symbol
数据形式字符串内存对象
用途数据交换程序运行

示例：

// JS 对象
const obj = { name: "阿杰", greet: () => "Hi" };

// JSON
const jsonStr = '{"name":"阿杰"}';

3. JSON 核心方法

3.1 对象 → JSON 字符串

const obj = { name: "阿杰", age: 25 };
const jsonStr = JSON.stringify(obj);
console.log(jsonStr); // {"name":"阿杰","age":25}

// 格式化输出
console.log(JSON.stringify(obj, null, 2));

3.2 JSON 字符串 → 对象

const jsonStr = '{"name":"阿杰","age":25}';
const obj = JSON.parse(jsonStr);
console.log(obj.name); // 阿杰

3.3 带错误处理

try {
  const obj = JSON.parse('{"name": "阿杰", "age": }');
} catch (err) {
  console.error("JSON 解析失败:", err.message);
}

4. 常用应用场景

4.1 前后端数据交互

fetch("/api/user")
  .then(res => res.json())
  .then(data => console.log("用户数据:", data));

4.2 本地存储

const user = { name: "阿杰", age: 25 };
localStorage.setItem("user", JSON.stringify(user));

const savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser.name); // 阿杰

4.3 配置文件

  • 常见于：package.json、tsconfig.json 等
  • JSON 文件必须严格遵守语法（双引号 + 无注释）

5. 注意事项

  1. 键名必须用双引号
  2. 不能包含函数、undefined、Symbol
  3. JSON.stringify 不序列化循环引用，会抛出错误
  4. JSON.parse 会把数字、布尔、null 正确转换，但不会自动解析日期，需要手动处理
// 日期解析示例
const obj = JSON.parse('{"date":"2025-09-19T16:00:00Z"}');
const date = new Date(obj.date);
console.log(date.toISOString());

6. 小技巧

  • 美化 JSON：
console.log(JSON.stringify(obj, null, 4)); // 缩进 4 空格
  • 过滤属性：
JSON.stringify(obj, ["name"]); // 只输出 name 属性
  • 自定义转换：
JSON.stringify(obj, (key, value) => {
  if (typeof value === "number") return value * 2;
  return value;
});