JavaScript 中将对象/值转换为 JSON 字符串的全面指南
在 JavaScript 开发中,我们经常需要将 JavaScript 对象或值转换为 JSON(JavaScript Object Notation)字符串,这种转换通常用于数据交换,例如将数据发送到服务器(AJAX 请求)或存储在本地存储(localStorage/sessionStorage)中,JavaScript 提供了内置的方法来轻松实现这一转换,最常用的是 JSON.stringify() 方法,本文将详细介绍 JSON.stringify() 的用法、参数、注意事项,并提供一些实际示例。
核心方法:JSON.stringify()
JSON.stringify() 是 JavaScript 中将 JavaScript 对象或值序列化为 JSON 字符串的标准方法,它接受一个对象作为参数,并返回一个对应的 JSON 格式字符串。
基本语法
JSON.stringify(value[, replacer[, space]])
- value: 要转换的 JavaScript 值,通常是对象或数组。
- replacer (可选): 可以是一个函数或一个数组,用于控制如何转换过程。
- space (可选): 一个用于美化输出 JSON 字符串的缩进空白字符。
简单示例
让我们从一个简单的 JavaScript 对象开始:
const user = {
name: "张三",
age: 30,
isAdmin: false,
hobbies: ["阅读", "游泳", "编程"],
address: {
city: "北京",
street: "长安街"
}
};
const jsonString = JSON.stringify(user);
console.log(jsonString);
输出结果:
{"name":"张三","age":30,"isAdmin":false,"hobbies":["阅读","游泳","编程"],"address":{"city":"北京","street":"长安街"}}
可以看到,JSON.stringify() 将 JavaScript 对象转换了一个 JSON 格式的字符串,注意:
- JSON 字符串中的属性名必须使用双引号。
- 函数、undefined、Symbol 类型的值在序列化时会被忽略。
- 循环引用的对象会导致
JSON.stringify()抛出错误。
使用 replacer 参数
replacer 参数允许你定制序列化的过程。
replacer 作为数组
replacer 是一个数组,则只有数组中存在的属性名才会被序列化到最终的 JSON 字符串中。
const user = {
name: "李四",
age: 25,
email: "lisi@example.com",
phone: "13800138000"
};
// 只序列化 name 和 email 属性
const jsonStringWithArrayReplacer = JSON.stringify(user, ["name", "email"]);
console.log(jsonStringWithArrayReplacer);
输出结果:
{"name":"李四","email":"lisi@example.com"}
replacer 作为函数
replacer 是一个函数,则该函数会被序列化过程中遇到的每个键值对调用,该函数接收两个参数:键(key)和值(value),函数返回的值将被序列化到 JSON 字符串中,如果返回 undefined,则该属性会被忽略。
const product = {
id: 101,
name: "笔记本电脑",
price: 5999,
discount: 0.1
};
// 将价格乘以 (1 - 折扣),并隐藏 discount 属性
const jsonStringWithFunctionReplacer = JSON.stringify(product, (key, value) => {
if (key === "price") {
return value * (1 - product.discount);
}
if (key === "discount") {
return undefined; // 忽略 discount 属性
}
return value;
});
console.log(jsonStringWithFunctionReplacer);
输出结果:
{"id":101,"name":"笔记本电脑","price":5399.1}
使用 space 参数美化 JSON 字符串
space 参数可以使输出的 JSON 字符串更具可读性,方便调试和展示,它可以是一个数字或一个字符串。
- space 是数字:表示缩进的空格数,最大为 10,如果小于 1,则没有缩进。
- space 是字符串:则该字符串(或其前 10 个字符)将用作缩进。
const user = {
name: "王五",
age: 28,
skills: ["JavaScript", "Python", "React"]
};
// 使用数字缩进
const jsonStringWithSpaceNumber = JSON.stringify(user, null, 2);
console.log("使用数字缩进 (2 个空格):");
console.log(jsonStringWithSpaceNumber);
// 使用字符串缩进
const jsonStringWithSpaceString = JSON.stringify(user, null, "--");
console.log("\n使用字符串缩进 (--):");
console.log(jsonStringWithSpaceString);
输出结果:
使用数字缩进 (2 个空格):
{
"name": "王五",
"age": 28,
"skills": [
"JavaScript",
"Python",
"React"
]
}
使用字符串缩进 (--):
{
--"name": "王五",
--"age": 28,
--"skills": [
----"JavaScript",
----"Python",
----"React"
--]
}
注意事项
-
循环引用:如果一个对象引用了自身(直接或间接),
JSON.stringify()会抛出TypeError。const obj = {}; obj.self = obj; // JSON.stringify(obj); // 抛出错误: "TypeError: Converting circular structure to JSON" -
不可枚举的属性:
JSON.stringify()只会序列化对象自身可枚举的属性,忽略继承的属性和不可枚举的属性。 -
特殊值的处理:
undefined、函数、Symbol值:在序列化过程中会被忽略(如果在对象中)或转换为null(如果在数组中)。NaN、Infinity和Infinity:会被转换为null。
const specialValues = { name: "测试", value1: undefined, value2: function() { console.log("hello"); }, value3: Symbol("sym"), value4: NaN, value5: Infinity, arr: [undefined, function(){}, Symbol("sym2"), NaN, Infinity] }; console.log(JSON.stringify(specialValues));输出结果:
{"name":"测试","arr":[null,null,null,null,null]}
JSON.stringify() 是 JavaScript 中将对象或值转换为 JSON 字符串的核心方法,通过其可选的 replacer 和 space 参数,我们可以灵活地控制序列化的内容和输出格式,满足不同的开发需求,如数据过滤、格式化输出等,在实际开发中,理解其工作原理和注意事项,能够帮助我们更高效地处理数据序列化任务,避免潜在的错误。
希望本文能帮助你全面 JavaScript 中将对象转换为 JSON 字符串的方法!



还没有评论,来说两句吧...