QD1-P54 JS 对象的序列化和反序列化

title: QD1-P54 JS 对象的序列化和反序列化

description: JavaScript 对象的序列化和反序列化

video: [https://www.bilibili.com/video/BV1n64y1U7oj?p=54](https://www.bilibili.com/video/BV1n64y1U7oj?p=54)

subject：前端学习笔记 1

‍

序列化 和 反序列化 是将 JavaScript 对象转换为可存储或传输的格式，以及将其还原为对象的过程。常用的格式是 JSON（JavaScript Object Notation）。

‍

1. 序列化 (Serialization)

将 JavaScript 对象转换为 JSON 字符串的过程称为序列化，通常使用 JSON.stringify() 方法。

示例：

const person = {
    
    
    name: 'Alice',
    age: 25,
    hobbies: ['reading', 'traveling'],
};

const jsonString = JSON.stringify(person);
console.log(jsonString);
// 输出: '{"name":"Alice","age":25,"hobbies":["reading","traveling"]}'

用法：

JSON.stringify(value)：接受 JavaScript 对象作为参数，并返回一个 JSON 字符串。
可选参数：
- replacer（可选）：一个函数或数组，指定哪些属性将被转换。
- space（可选）：用于格式化输出的空格或缩进字符数量。

格式化输出：

可以使用 space 参数来生成格式化的输出（更易读的格式）：

const formattedJson = JSON.stringify(person, null, 2);
console.log(formattedJson);
/* 输出:
{
  "name": "Alice",
  "age": 25,
  "hobbies": [
    "reading",
    "traveling"
  ]
}
*/

‍

2. 反序列化 (Deserialization)

将 JSON 字符串转换回 JavaScript 对象的过程称为反序列化，通常使用 JSON.parse() 方法。

示例：

const jsonString = '{"name":"Alice","age":25,"hobbies":["reading","traveling"]}';
const personObject = JSON.parse(jsonString);
console.log(personObject);
// 输出: { name: 'Alice', age: 25, hobbies: [ 'reading', 'traveling' ] }

用法：

JSON.parse(text)：接受 JSON 字符串作为参数，并将其转换为 JavaScript 对象。
可选参数：
- reviver（可选）：一个函数，用于对返回的每个值进行转换。

使用 `reviver` 函数：

reviver 函数可以让我们在反序列化过程中处理某些特定字段。例如，将日期字符串转换为 Date 对象：

const jsonString = '{"name":"Alice","birthdate":"1995-10-21T00:00:00Z"}';
const personObject = JSON.parse(jsonString, (key, value) => {
    
    
    if (key === 'birthdate') {
    
    
        return new Date(value);
    }
    return value;
});
console.log(personObject);
// 输出: { name: 'Alice', birthdate: 1995-10-21T00:00:00.000Z }

‍

3. 注意事项

深层嵌套：JSON.stringify() 和 JSON.parse() 只处理可枚举的属性，无法处理函数、undefined、Symbol 等。

const obj = {
      
      
    name: 'Alice',
    greet: () => console.log('Hello!'),
    data: undefined,
    id: Symbol('id')
};

const jsonString = JSON.stringify(obj);
console.log(jsonString);
// 输出: '{"name":"Alice"}'，函数、`undefined` 和 `Symbol` 都被忽略

循环引用：对象中包含循环引用时，JSON.stringify() 会抛出错误：

const obj = {
      
      };
obj.self = obj;

// 这将抛出 TypeError: Converting circular structure to JSON
JSON.stringify(obj);

安全问题：反序列化用户输入时要小心，避免将恶意的 JSON 字符串反序列化为可执行代码。

‍

4. JSON 与 JavaScript 对象的区别

JSON 是一种数据交换格式，仅支持简单的值类型（字符串、数字、布尔值、数组、对象、null），而 JavaScript 对象可以包含函数、undefined、Symbol 等类型。
JSON 中的键必须是双引号括起来的字符串，而 JavaScript 对象的键可以是未加引号的标识符。

‍

5. 实际应用

本地存储：浏览器中的 localStorage 和 sessionStorage 只能存储字符串，通常会使用 JSON 进行对象的序列化和反序列化。

const person = {
      
       name: 'Alice', age: 25 };
localStorage.setItem('person', JSON.stringify(person)); // 序列化
const storedPerson = JSON.parse(localStorage.getItem('person')); // 反序列化
console.log(storedPerson);

数据传输：前端与后端通过 HTTP 请求传输数据时，通常使用 JSON 格式。在前端发起请求时，可以将 JavaScript 对象序列化为 JSON，在后端解析为对象处理，反之亦然。

‍

总结

序列化：将 JavaScript 对象转换为 JSON 字符串，使用 JSON.stringify()。
反序列化：将 JSON 字符串转换为 JavaScript 对象，使用 JSON.parse()。

‍

序列化和反序列化在数据存储、网络传输和持久化处理中非常重要，能够高效地在不同环境中传递和使用数据。

‍