82 - 内置对象 - JSON 对象 - JSON 数据的序列化与反序列化

前端 - Javascript 《内置对象 - JSON 对象 - JSON 数据的序列化与反序列化》

在前端开发中，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于 JavaScript 对象字面量语法，易于人阅读和编写，同时也易于机器解析和生成。JavaScript 提供了 JSON 对象，用于处理 JSON 数据的序列化与反序列化，这在前后端数据交互、数据存储等场景中发挥着重要作用。

1. JSON 简介

JSON 数据格式由键值对组成，使用大括号 {} 表示对象，方括号 [] 表示数组。键必须是字符串，值可以是字符串、数字、布尔值、null、对象或数组。以下是一个简单的 JSON 示例：

{
    "name": "John",
    "age": 30,
    "isStudent": false,
    "hobbies": ["reading", "swimming"],
    "address": {
        "city": "New York",
        "zip": "10001"
    }
}

2. JSON 对象的方法

2.1 JSON.stringify() - 序列化

JSON.stringify() 方法用于将 JavaScript 对象或值转换为 JSON 字符串，这个过程称为序列化。其语法如下：

JSON.stringify(value[, replacer[, space]])

• value：必需，要转换的 JavaScript 对象或值。
• replacer：可选，可以是函数或数组，用于指定哪些属性要被序列化。
• space：可选，用于指定缩进空格数，使输出的 JSON 字符串更易读。

示例 1：基本序列化

const person = {
    name: "Alice",
    age: 25,
    isMarried: true
};
const jsonString = JSON.stringify(person);
console.log(jsonString); 
// 输出: {"name":"Alice","age":25,"isMarried":true}

示例 2：使用 replacer 数组

const person = {
    name: "Bob",
    age: 35,
    job: "Engineer",
    city: "Los Angeles"
};
const replacer = ["name", "job"];
const jsonString = JSON.stringify(person, replacer);
console.log(jsonString); 
// 输出: {"name":"Bob","job":"Engineer"}

示例 3：使用 space 参数

const person = {
    name: "Charlie",
    age: 40
};
const jsonString = JSON.stringify(person, null, 2);
console.log(jsonString); 
// 输出:
// {
//   "name": "Charlie",
//   "age": 40
// }

2.2 JSON.parse() - 反序列化

JSON.parse() 方法用于将 JSON 字符串转换为 JavaScript 对象，这个过程称为反序列化。其语法如下：

JSON.parse(text[, reviver])

• text：必需，要解析的 JSON 字符串。
• reviver：可选，是一个函数，用于在返回之前对每个键值对进行处理。

示例 1：基本反序列化

const jsonString = '{"name": "David", "age": 22}';
const person = JSON.parse(jsonString);
console.log(person.name); 
// 输出: David

示例 2：使用 reviver 函数

const jsonString = '{"name": "Eve", "birthDate": "1990-01-01"}';
const person = JSON.parse(jsonString, (key, value) => {
    if (key === "birthDate") {
        return new Date(value);
    }
    return value;
});
console.log(person.birthDate.getFullYear()); 
// 输出: 1990

3. 注意事项

• 序列化限制：JSON.stringify() 不能序列化函数、undefined 和 Symbol 类型的值。如果对象的属性值是这些类型，该属性会被忽略。
• JSON 格式要求：JSON.parse() 只能解析符合 JSON 格式的字符串。例如，键必须用双引号括起来，否则会抛出 SyntaxError。

4. 总结

通过 JSON.stringify() 和 JSON.parse() 方法，我们可以方便地在 JavaScript 对象和 JSON 字符串之间进行转换，实现数据的序列化与反序列化，从而在前端开发中更好地处理数据的传输和存储。无论是与后端进行数据交互，还是在本地存储数据，JSON 对象的这两个方法都能发挥重要作用。