前端JS中数据转换为JSON的实用指南
在前端开发中,JSON(JavaScript Object Notation)因其轻量级、易读易写的特性,成为数据交互的主流格式,无论是将前端数据传递给后端API,还是将数据存储到本地(如localStorage),都经常需要将JavaScript数据类型转换为JSON字符串,本文将详细介绍前端JS中数据转JSON的核心方法、常见场景及注意事项,帮助开发者快速这一技能。
核心方法:JSON.stringify()
JavaScript提供了内置的JSON.stringify()方法,这是将数据转换为JSON字符串的核心工具,该方法可以将JavaScript对象、数组等数据序列化为JSON格式的字符串,语法如下:
JSON.stringify(value[, replacer[, space]])
参数说明
- value(必选):要转换的数据,可以是对象、数组、基本类型(字符串、数字、布尔值、null)等。
- replacer(可选):用于转换过程的函数或数组,用于控制哪些属性被包含或修改转换结果。
- space(可选):格式化输出,用于美化JSON字符串的可读性,可以是数字(表示缩空格数,最大10)或字符串(用字符串代替空格,最大10个字符)。
基础使用示例
转换对象
const user = {
name: "张三",
age: 25,
isAdmin: false,
address: null
};
const jsonString = JSON.stringify(user);
console.log(jsonString);
// 输出: {"name":"张三","age":25,"isAdmin":false,"address":null}
转换数组
const fruits = ["apple", "banana", "orange"]; const jsonArr = JSON.stringify(fruits); console.log(jsonArr); // 输出: ["apple","banana","orange"]
转换基本类型
- 字符串:会被双引号包裹(JSON标准要求)
JSON.stringify("hello"); // 输出: ""hello"" - 数字、布尔值、null:直接转换
JSON.stringify(123); // 输出: 123 JSON.stringify(true); // 输出: true JSON.stringify(null); // 输出: null
- undefined、函数、Symbol:会被忽略(或在对象中直接删除)
const data = { a: undefined, b: function() {}, c: Symbol("sym") }; JSON.stringify(data); // 输出: {}(所有忽略属性)
进阶用法:replacer与space参数
使用replacer过滤或修改属性
replacer可以是数组或函数:
(1)数组形式:指定要保留的属性名
const user = {
name: "李四",
age: 30,
password: "123456", // 敏感信息,不希望被序列化
hobby: ["reading", "coding"]
};
// 只保留name和hobby属性
const filteredJson = JSON.stringify(user, ["name", "hobby"]);
console.log(filteredJson);
// 输出: {"name":"李四","hobby":["reading","coding"]}
(2)函数形式:对每个属性值进行处理
函数接收两个参数:key(属性名)和value(属性值),返回值将作为该属性在JSON中的最终值,若返回undefined,则该属性会被忽略。
const product = {
id: 1001,
name: "笔记本电脑",
price: 4999,
discount: 0.8
};
// 将价格乘以折扣,并过滤掉discount属性
const processedJson = JSON.stringify(product, (key, value) => {
if (key === "price") {
return value * product.discount; // 计算折后价
}
if (key === "discount") {
return undefined; // 忽略discount属性
}
return value; // 其他属性正常返回
});
console.log(processedJson);
// 输出: {"id":1001,"name":"笔记本电脑","price":3999.2}
使用space美化输出
默认情况下,JSON.stringify()输出的JSON字符串是压缩的(无空格和换行),通过space参数可以格式化输出,便于调试或阅读:
(1)数字参数(1-10,表示缩进空格数)
const data = {
user: "王五",
details: {
age: 28,
skills: ["JavaScript", "React", "Node.js"]
}
};
const prettyJson = JSON.stringify(data, null, 2); // 缩进2个空格
console.log(prettyJson);
/* 输出:
{
"user": "王五",
"details": {
"age": 28,
"skills": [
"JavaScript",
"React",
"Node.js"
]
}
}
*/
(2)字符串参数(用字符串代替空格,最多取前10个字符)
const prettyJsonWithStr = JSON.stringify(data, null, "--"); // 用"--"缩进
console.log(prettyJsonWithStr);
/* 输出:
{
--"user": "王五",
--"details": {
----"age": 28,
----"skills": [
------"JavaScript",
------"React",
------"Node.js"
----]
--}
}
*/
常见场景与注意事项
场景1:将表单数据转换为JSON提交
在表单提交时,常需将表单数据序列化为JSON字符串,可以通过FormData收集数据,再转换为对象后序列化:
const form = document.querySelector("#userForm");
const formData = new FormData(form);
// 将FormData转换为普通对象
const formDataObj = {};
formData.forEach((value, key) => {
formDataObj[key] = value;
});
// 转换为JSON字符串
const jsonData = JSON.stringify(formDataObj);
console.log(jsonData); // {"username":"zhangsan","email":"zhangsan@example.com"}
场景2:存储数据到localStorage
localStorage只能存储字符串,因此需将对象/数组转换为JSON字符串存储,读取时再解析:
const userData = { name: "赵六", loginTime: new Date().toISOString() };
// 存储:转换为JSON字符串
localStorage.setItem("user", JSON.stringify(userData));
// 读取:解析为JavaScript对象
const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser); // { name: "赵六", loginTime: "2023-10-01T12:00:00.000Z" }
注意事项
(1)循环引用问题
如果对象中存在循环引用(例如对象的某个属性指向自身),直接调用JSON.stringify()会抛出错误:
const obj = {};
obj.self = obj; // 循环引用
JSON.stringify(obj); // 报错: TypeError: Converting circular structure to JSON...
解决方案:使用第三方库(如flatted)或手动处理循环引用,在序列化前删除循环属性。
(2)特殊对象的序列化
JavaScript中的一些特殊对象(如Date、Map、Set、RegExp等)会被JSON.stringify()转换为普通对象,可能导致数据丢失:
const data = {
date: new Date(), // Date对象
map: new Map([["a", 1]]), // Map对象
regex: /\d+/ // 正则表达式
};
console.log(JSON.stringify(data));
// 输出: {"date":"2023-10-01T12:00:00.000Z","map":{},"regex":{}} // Map和正则丢失
解决方案:通过replacer函数手动处理这些对象,将其转换为可序列化的格式:
const serializedData = JSON.stringify(data, (key, value) => {
if (value instanceof Date) {
return value.toISOString(); // Date转为ISO字符串
}
if (value instanceof Map) {
return Object.fromEntries(value); // Map转为普通对象
}
if (value instanceof RegExp) {
return value.toString(); // 正则转为字符串
}
return value;
});
console.log(serializedData);
// 输出: {"date":"2023-10-01T12:00:00.000Z","map":{"a":1},"regex":"/\\d+/"}
(3)undefined、函数、Symbol的忽略
如前所述,这些类型在对象中会被直接忽略,数组中则会被转为null:
const arr = [1, undefined, function() {}, Symbol("sym")];
console.log(JSON.stringify(arr)); // 输出: [1,null,null,null]
JSON.stringify()是前端JS中将数据转换为JSON的核心方法,通过基础用法可以



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