网站
引入
JavaScript 需要和服务器交换数据，或者把复杂数据保存到本地。这些数据需要一个通用格式，方便传输和存储。JSON 就是这样一个轻量级的数据交换格式，几乎所有编程语言都能识别它。
定义
定义
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，用于在不同系统之间传递数据。它的语法来自 JavaScript 对象的写法，但 JSON 只是一个文本格式，和语言无关。
特点
- JSON 本质是一个字符串，不是 JS 对象
- 结构清晰，容易阅读和编写
- 几乎所有编程语言都支持 JSON
- 常用于前后端数据交换、配置文件、本地存储
语法规则
JSON 有严格的格式要求：
- 数据使用键值对表示
- 键必须用双引号
"包裹，不能用单引号 - 值可以是：字符串、数字、布尔值、数组、对象、
null - 字符串必须用双引号包裹
- 数组用
[]表示 - 对象用
{}表示 - 数据之间用逗号
,分隔 - 最后一个数据后面不能有逗号
合法的 JSON
{
"name": "Tom",
"age": 18,
"isStudent": true,
"skills": ["HTML", "CSS", "JS"],
"address": {
"city": "北京",
"district": "朝阳区"
}
}不合法的 JSON
{
name: "Tom", // 键没有用双引号
'age': 18, // 键用了单引号
"skills": ['HTML'], // 数组元素用了单引号
"address": {
"city": "北京",
} // 最后一个元素后面有逗号
}常用方法
JavaScript 提供了两个方法用于 JSON 和对象之间的转换：
| 方法 | 作用 | 输入 | 输出 |
|---|---|---|---|
JSON.stringify() | 把 JS 对象转换成 JSON 字符串 | JS 对象或数组 | JSON 字符串 |
JSON.parse() | 把 JSON 字符串转换成 JS 对象 | JSON 字符串 | JS 对象或数组 |
JSON.stringify() - 对象转字符串
把 JS 对象或数组转换成 JSON 字符串，方便传输或保存。
const user = {
name: "Tom",
age: 18,
skills: ["HTML", "CSS", "JS"]
};
const jsonStr = JSON.stringify(user);
console.log(jsonStr);
// 输出：{"name":"Tom","age":18,"skills":["HTML","CSS","JS"]}
console.log(typeof jsonStr);
// 输出：stringJSON.parse() - 字符串转对象
把 JSON 字符串转换回 JS 对象或数组，方便在代码中使用。
const jsonStr = '{"name":"Tom","age":18,"skills":["HTML","CSS","JS"]}';
const user = JSON.parse(jsonStr);
console.log(user.name); // 输出：Tom
console.log(user.skills[0]); // 输出：HTML
console.log(typeof user);
// 输出：object常见场景
前后端数据交换
服务器返回的数据通常是 JSON 字符串，需要用 JSON.parse() 转换成对象后才能使用。
fetch("/api/user")
.then(function (response) {
return response.json(); // response.json() 内部会调用 JSON.parse()
})
.then(function (data) {
console.log(data.name); // 这时 data 已经是 JS 对象
});发送数据给服务器时，需要用 JSON.stringify() 把对象转成字符串。
const user = {
name: "Tom",
age: 18
};
fetch("/api/user", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(user) // 把对象转成 JSON 字符串
});本地存储
localStorage 只能保存字符串，保存对象时需要先用 JSON.stringify() 转换。
const user = {
name: "Tom",
age: 18
};
// 保存数据
localStorage.setItem("user", JSON.stringify(user));
// 读取数据
const jsonStr = localStorage.getItem("user");
const user2 = JSON.parse(jsonStr);
console.log(user2.name); // 输出：Tom深拷贝对象
利用 JSON 的转换可以快速实现简单对象的深拷贝。
const user = {
name: "Tom",
age: 18,
skills: ["HTML", "CSS"]
};
const user2 = JSON.parse(JSON.stringify(user));
user2.name = "Jerry";
user2.skills.push("JS");
console.log(user.name); // 输出：Tom
console.log(user.skills); // 输出：["HTML", "CSS"]注意：这种方法有局限性，不能拷贝函数、undefined、Symbol、循环引用等特殊数据。
注意事项
- JSON 字符串必须用双引号，单引号会报错
JSON.parse()如果解析失败会抛出异常，需要用try…catch捕获
try {
const data = JSON.parse('{"name": "Tom"}');
console.log(data);
} catch (error) {
console.log("JSON 格式错误", error);
}JSON.stringify()会忽略函数、undefined和Symbol
const obj = {
name: "Tom",
age: undefined,
sayHello: function () {
console.log("Hello");
}
};
const jsonStr = JSON.stringify(obj);
console.log(jsonStr);
// 输出：{"name":"Tom"}
// age 和 sayHello 被忽略了- JSON 不支持注释，写配置文件时不能加注释
- 数组转成 JSON 后仍然是数组格式
const list = ["HTML", "CSS", "JS"];
const jsonStr = JSON.stringify(list);
console.log(jsonStr);
// 输出：["HTML","CSS","JS"]理解
JSON 就像是一个通用的数据包装盒，可以把 JS 对象装进字符串里，方便传输和保存。用的时候再拆开，还原成对象。
可以把 JSON.stringify() 理解为”打包”，把 JSON.parse() 理解为”拆包”。
前后端交换数据时，JSON 就是双方约定好的通用语言，后端写 Java、Python、PHP 都能生成 JSON，前端 JS 也能理解 JSON。
记住：JSON 只是字符串，不是对象。只有用 JSON.parse() 转换后，才能当对象使用。
引出
理解了 JSON 之后，可以结合 JS 网络请求 和 JS 本地存储，实现数据的获取、保存和使用。
后续学习 JS 异步编程 时，会经常遇到 JSON 数据的处理。