JavaScript 中如何将数据存为 JSON 格式?
在现代 Web 开发中,JSON(JavaScript Object Notation)已经成为数据交换的事实标准,它轻量、易于人阅读和编写,也易于机器解析和生成,在 JavaScript 中,我们经常需要将复杂的数据结构(如对象、数组)转换为 JSON 格式的字符串,以便于存储到本地、发送到服务器或进行其他操作。
本文将详细讲解在 JavaScript 中如何将数据存成 JSON 格式,核心是使用两个关键的内置方法:JSON.stringify() 和 JSON.parse()。
核心方法:JSON.stringify()
要将 JavaScript 的值(通常是对象或数组)转换为 JSON 字符串,我们使用的核心方法是 JSON.stringify()。
基本用法
JSON.stringify() 方法接收一个 JavaScript 对象或数组作为参数,并返回一个对应的 JSON 格式字符串。
// 1. 定义一个 JavaScript 对象
const user = {
id: 101,
name: "张三",
age: 30,
isStudent: false,
courses: ["JavaScript", "React"],
address: {
city: "北京",
street: "中关村大街1号"
}
};
// 2. 使用 JSON.stringify() 将对象转换为 JSON 字符串
const jsonString = JSON.stringify(user);
// 3. 输出结果
console.log(jsonString);
// 输出:
// {"id":101,"name":"张三","age":30,"isStudent":false,"courses":["JavaScript","React"],"address":{"city":"北京","street":"中关村大街1号"}}
// 注意:输出是一个字符串,而不是对象
console.log(typeof jsonString); // "string"
格式化输出(美化 JSON)
默认情况下,JSON.stringify() 输出的字符串是压缩过的,没有多余的空格和换行,为了便于调试和阅读,我们可以传入第二个参数:一个用于格式化的数字或一个替换函数(replacer)。
- 传入数字:表示缩进用的空格数,通常使用
2或4。
const prettyJsonString = JSON.stringify(user, null, 2);
console.log(prettyJsonString);
// 输出:
// {
// "id": 101,
// "name": "张三",
// "age": 30,
// "isStudent": false,
// "courses": [
// "JavaScript",
// "React"
// ],
// "address": {
// "city": "北京",
// "street": "中关村大街1号"
// }
// }
- 传入替换函数 (replacer):可以更精细地控制哪些属性应该被包含在最终的 JSON 字符串中。
// 只保留 name 和 age 属性
const filteredJsonString = JSON.stringify(user, (key, value) => {
if (key === 'id' || key === 'isStudent' || key === 'courses' || key === 'address') {
return undefined; // 忽略这些属性
}
return value; // 保留其他属性
}, 2);
console.log(filteredJsonString);
// 输出:
// {
// "name": "张三",
// "age": 30
// }
处理特殊数据类型
JSON.stringify() 在转换时有一些特殊规则:
- 函数:会被忽略。
undefined:会被忽略。- Symbol:会被忽略。
- 循环引用:会直接抛出
TypeError错误。
const data = {
name: "测试",
log: function() { console.log("hello"); }, // 函数会被忽略
value: undefined // undefined 会被忽略
};
data.self = data; // 循环引用
// console.log(JSON.stringify(data)); // 报错: TypeError: Cyclical object value
实际应用场景:将 JSON 存储起来
将数据转换为 JSON 字符串后,我们通常需要将其“存起来”,最常见的两种方式是存储在浏览器的本地或会话中。
存储到 localStorage 或 sessionStorage
localStorage 和 sessionStorage 只能存储字符串类型的数据,在存储对象或数组之前,必须先用 JSON.stringify() 将其转换为字符串;读取时,必须用 JSON.parse() 将字符串转换回 JavaScript 对象。
const myData = {
theme: 'dark',
notifications: true,
lastLogin: new Date().toISOString()
};
// --- 存储数据 ---
// 1. 将对象转换为 JSON 字符串
const dataToStore = JSON.stringify(myData);
console.log("准备存储的字符串:", dataToStore);
// 2. 存储到 localStorage
localStorage.setItem('userSettings', dataToStore);
// --- 读取数据 ---
// 1. 从 localStorage 获取字符串
const storedDataString = localStorage.getItem('userSettings');
console.log("从 localStorage 获取的字符串:", storedDataString);
// 2. 将字符串转换回 JavaScript 对象
const retrievedData = JSON.parse(storedDataString);
console.log("解析后的对象:", retrievedData);
console.log("主题是:", retrievedData.theme); // 可以正常访问属性
// 验证类型
console.log(typeof retrievedData); // "object"
发送到服务器
在前后端交互中,我们通常使用 fetch API 或 XMLHttpRequest 将数据发送到服务器,发送请求体时,也需要将 JavaScript 对象序列化为 JSON 字符串。
// 使用 fetch API 发送 POST 请求
const postData = {
username: 'john_doe',
password: '123456'
};
fetch('https://api.example.com/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json' // 告诉服务器我们发送的是 JSON
},
// 将 JavaScript 对象转换为 JSON 字符串作为请求体
body: JSON.stringify(postData)
})
.then(response => response.json())
.then(data => {
console.log('服务器响应:', data);
})
.catch(error => {
console.error('请求失败:', error);
});
反向操作:JSON.parse()
既然提到了存储和读取,就必须介绍 JSON.parse() 的作用,它是 JSON.stringify() 的逆操作,用于将一个 JSON 格式的字符串解析成 JavaScript 值(对象或数组)。
const jsonStr = '{"name":"李四","age":25,"hobbies":["reading","coding"]}';
// 使用 JSON.parse() 将字符串解析为对象
const jsObj = JSON.parse(jsonStr);
console.log(jsObj);
// 输出: { name: '李四', age: 25, hobbies: [ 'reading', 'coding' ] }
console.log(jsObj.name); // "李四"
console.log(jsObj.hobbies[0]); // "reading"
console.log(typeof jsObj); // "object"
在 JavaScript 中将数据存为 JSON 格式,主要遵循以下步骤:
-
序列化(存成 JSON):
- 使用
JSON.stringify()将 JavaScript 对象/数组转换为 JSON 字符串。 - 在需要存储到
localStorage或发送到服务器时,这一步是必需的。
- 使用
-
反序列化(读取 JSON):
- 使用
JSON.parse()将 JSON 字符串转换回 JavaScript 对象/数组。 - 在从
localStorage或服务器响应中读取数据后,这一步是必需的,以便你能像操作普通 JavaScript 对象一样操作数据。
- 使用
JSON.stringify() 和 JSON.parse() 这两个方法,是进行现代 Web 数据处理的基础技能,希望本文能帮助你彻底理解它们的使用方法!



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