JS 序列化和反序列化|极客笔记

JS 序列化和反序列化

在前端开发中，我们经常需要将 JavaScript 对象转换成字符串，或者将字符串转换成 JavaScript 对象。这个过程就是序列化和反序列化的过程。本文将详细介绍在 JavaScript 中如何进行对象的序列化和反序列化操作。

什么是序列化和反序列化

序列化（Serialization）和反序列化（Deserialization）是将对象转换成字符串或将字符串转换成对象的过程。序列化后的字符串可以用于数据存储、数据传输等操作，而反序列化则是将序列化后的字符串还原成原始对象。

在 JavaScript 中，我们通常使用 JSON（JavaScript Object Notation）来进行对象的序列化和反序列化操作。JSON 是一种轻量级的数据交换格式，易于阅读和编写。JavaScript 提供了 JSON.stringify() 和 JSON.parse() 这两个方法来实现对象的序列化和反序列化。

JSON.stringify()

JSON.stringify() 方法用于将 JavaScript 对象转换成 JSON 字符串。该方法接受两个参数：要序列化的对象和一个可选参数，用于控制序列化过程。

示例代码如下：

const obj = {
  name: 'Alice',
  age: 25,
  isStudent: true,
  hobbies: ['reading', 'music']
};

const jsonString = JSON.stringify(obj);
console.log(jsonString);

上述代码中，我们定义了一个包含姓名、年龄、是否为学生和爱好的对象 obj，然后使用 JSON.stringify() 方法将其序列化为 JSON 字符串。运行代码后，你会得到以下输出：

{"name":"Alice","age":25,"isStudent":true,"hobbies":["reading","music"]}

JSON.parse()

JSON.parse() 方法用于将 JSON 字符串转换成 JavaScript 对象。该方法接受一个 JSON 字符串作为参数，并返回对应的 JavaScript 对象。

示例代码如下：

const jsonString = '{"name":"Bob","age":30,"isStudent":false,"hobbies":["photography","travel"]}';

const obj = JSON.parse(jsonString);
console.log(obj);

上述代码中，我们定义了一个包含姓名、年龄、是否为学生和爱好的 JSON 字符串 jsonString，然后使用 JSON.parse() 方法将其反序列化为 JavaScript 对象 obj。运行代码后，你会得到以下输出：

{ name: 'Bob', age: 30, isStudent: false, hobbies: [ 'photography', 'travel' ] }

处理复杂对象

JSON.stringify() 和 JSON.parse() 方法能够很好地处理包含简单数据类型的对象，如字符串、数值、布尔值等。但当对象中包含函数、Date 对象、正则表达式等复杂数据类型时，可能会出现一些问题。

处理函数

如果对象中包含函数，使用 JSON.stringify() 方法进行序列化时，函数会被忽略掉。反序列化后的对象也不会包含原来的函数。

示例代码如下：

const obj = {
  name: 'Alice',
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const jsonString = JSON.stringify(obj);
console.log(jsonString);

const parsedObj = JSON.parse(jsonString);
parsedObj.sayHello();

在上述代码中，我们定义了一个包含 sayHello 函数的对象 obj，使用 JSON.stringify() 方法进行序列化后再进行反序列化。运行代码，你会发现会输出以下信息：

{"name":"Alice"}
TypeError: parsedObj.sayHello is not a function

处理 `Date` 对象

Date 对象在序列化和反序列化时会转换成不带时区信息的字符串。反序列化后，需要手动将日期字符串转换成 Date 对象。

示例代码如下：

const obj = {
  name: 'Alice',
  birthDate: new Date()
};

const jsonString = JSON.stringify(obj);
console.log(jsonString);

const parsedObj = JSON.parse(jsonString);
parsedObj.birthDate = new Date(parsedObj.birthDate);
console.log(parsedObj.birthDate);

在上述代码中，我们定义了一个包含 birthDate 属性的对象 obj，使用 JSON.stringify() 方法进行序列化后再进行反序列化。运行代码，你会得到以下输出：

{"name":"Alice","birthDate":"2022-01-28T13:14:49.660Z"}
2022-01-28T13:14:49.660Z

处理正则表达式

正则表达式在序列化和反序列化时会转换成空对象 {}。反序列化后的对象也不会包含原来的正则表达式。

示例代码如下：

const obj = {
  name: 'Alice',
  emailRegex: /^([a-zA-Z0-9_\.-]+)@([\da-zA-Z\.-]+)\.([a-zA-Z\.]{2,6})$/
};

const jsonString = JSON.stringify(obj);
console.log(jsonString);

const parsedObj = JSON.parse(jsonString);
console.log(parsedObj.emailRegex);

在上述代码中，我们定义了一个包含 emailRegex 属性的对象 obj，使用 JSON.stringify() 方法进行序列化后再进行反序列化。运行代码，你会得到以下输出：

{"name":"Alice","emailRegex":{}}
undefined

使用 replacer 参数控制序列化过程

JSON.stringify() 方法接受一个可选的 replacer 参数，用于控制序列化过程。replacer 参数可以是一个函数，也可以是一个数组。

使用函数作为 replacer 参数

如果 replacer 参数是一个函数，该函数将被调用并传入对象的属性名和属性值。函数返回的值将被序列化成 JSON 字符串，如果返回 undefined，则该属性将被忽略掉。

示例代码如下：

const obj = {
  name: 'Alice',
  age: 25,
  isStudent: true,
  password: '123456'
};

const jsonString = JSON.stringify(obj, (key, value) => {
  if (key === 'password') {
    return undefined;
  }
  return value;
});
console.log(jsonString);

在上述代码中，我们定义了一个包含密码属性的对象 obj，使用 replacer 函数将密码属性过滤掉。运行代码，你会得到以下输出：

{"name":"Alice","age":25,"isStudent":true}

使用数组作为 replacer 参数

如果 replacer 参数是一个数组，数组中的属性名表示要包含在序列化结果中的属性。其他属性将被忽略掉。

示例代码如下：

const obj = {
  name: 'Alice',
  age: 25,
  isStudent: true,
  password: '123456'
};

const jsonString = JSON.stringify(obj, ['name', 'age', 'isStudent']);
console.log(jsonString);

在上述代码中，我们定义了一个包含密码属性的对象 obj，使用 replacer 数组来指定要包含在序列化结果中的属性。运行代码，你会得到以下输出：

{"name":"Alice","age":25,"isStudent":true}

使用 reviver 参数控制反序列化过程

JSON.parse() 方法接受一个可选的 reviver 参数，用于控制反序列化过程。reviver 参数可以是一个函数，在处理每个属性时都会被调用。

示例代码如下：

const jsonString = '{"name":"Bob","age":30,"isStudent":false}';
const obj = JSON.parse(jsonString, (key, value) => {
  if (key === 'age') {
    return value * 2;
  }
  return value;
});
console.log(obj);

在上述代码中，我们定义了一个包含年龄属性的 JSON 字符串 jsonString，使用 reviver 函数来处理年龄属性。运行代码，你会得到以下输出：

{ name: 'Bob', age: 60, isStudent: false }

总结

本文详细介绍了在 JavaScript 中如何进行对象的序列化和反序列化操作，以及处理复杂对象的方法。同时，还介绍了如何使用 replacer 和 reviver 参数来控制序列化和反序列化过程中的属性。

JS 序列化和反序列化