JSON对象及JSON字符串之间的相互转换
在 JavaScript 中，JSON 对象和 JSON 字符串之间的相互转换是非常常见的操作。主要通过以下两个方法实现：
JSON.stringify(): 将 JavaScript 对象或值转换为 JSON 字符串。
JSON.parse(): 将 JSON 字符串解析为 JavaScript 对象或值。
- 将 JavaScript 对象转换为 JSON 字符串
使用 JSON.stringify() 方法可以将 JavaScript 对象或值转换为 JSON 格式的字符串。
语法
JSON.stringify(value, replacer, space);
value: 需要转换的 JavaScript 对象或值。replacer(可选): 用于过滤或转换结果。space(可选): 用于格式化输出的缩进。
示例
const obj = {
name: "Alice",
age: 25,
isStudent: true,
hobbies: ["reading", "coding"]
};
const jsonString = JSON.stringify(obj);
console.log(jsonString);
// 输出: {"name":"Alice","age":25,"isStudent":true,"hobbies":["reading","coding"]}
- 将 JSON 字符串转换为 JavaScript 对象
使用 JSON.parse() 方法可以将 JSON 字符串解析为 JavaScript 对象或值。
语法
JSON.parse(text, reviver);
text: 需要解析的 JSON 字符串。reviver(可选): 一个函数，用于在返回之前转换解析结果。
示例
const jsonString = '{"name":"Alice","age":25,"isStudent":true,"hobbies":["reading","coding"]}';
const obj = JSON.parse(jsonString);
console.log(obj);
// 输出:
// {
// name: "Alice",
// age: 25,
// isStudent: true,
// hobbies: ["reading", "coding"]
// }
- 使用
reviver函数
JSON.parse() 的 reviver 函数可以用于在解析过程中对值进行转换。
示例
const jsonString = '{"name":"Alice","age":25,"isStudent":true,"dob":"1998-05-14"}';
const obj = JSON.parse(jsonString, (key, value) => {
if (key === "dob") {
return new Date(value); // 将日期字符串转换为 Date 对象
}
return value;
});
console.log(obj.dob instanceof Date); // 输出: true
- 使用
replacer函数
JSON.stringify() 的 replacer 函数可以用于在序列化过程中过滤或转换值。
示例
const obj = {
name: "Alice",
age: 25,
isStudent: true
};
const jsonString = JSON.stringify(obj, (key, value) => {
if (key === "age") return undefined; // 排除 age 属性
return value;
});
console.log(jsonString);
// 输出: {"name":"Alice","isStudent":true}
- 注意事项
JSON 字符串的格式：
-
JSON 字符串必须使用双引号（
"）表示键和字符串值，单引号无效。 -
例如：
'{"name":"Alice"}'是有效的，而"{'name':'Alice'}"是无效的。
不支持的数据类型：
-
undefined、函数、Symbol 值在序列化时会被忽略。 -
NaN和Infinity会被转换为null。
循环引用：
- 如果对象中存在循环引用（即对象引用自身），
JSON.stringify()会抛出错误。
日期对象：
- 日期对象会被转换为 ISO 格式的字符串，解析时需要手动转换回日期对象。
示例：完整转换流程
// JavaScript 对象
const obj = {
name: "Alice",
age: 25,
isStudent: true,
dob: new Date()
};
// 转换为 JSON 字符串
const jsonString = JSON.stringify(obj);
console.log(jsonString);
// 输出: {"name":"Alice","age":25,"isStudent":true,"dob":"2023-10-01T12:00:00.000Z"}
// 转换回 JavaScript 对象
const parsedObj = JSON.parse(jsonString, (key, value) => {
if (key === "dob") return new Date(value); // 将日期字符串转换为 Date 对象
return value;
});
console.log(parsedObj.dob instanceof Date); // 输出: true
总结
JSON.stringify()：将 JavaScript 对象转换为 JSON 字符串。JSON.parse()：将 JSON 字符串解析为 JavaScript 对象。- 这两个方法结合使用，可以实现 JavaScript 对象和 JSON 字符串之间的无缝转换，是数据存储、传输和 API 交互中的核心工具。
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
