JavaScript 的序列化方法是将对象、数组或其他可序列化的值转换为字符串以进行存储或传输的过程。在 ES2021 中，一些新的序列化方法被引入，这些方法提供了更多的选项和性能优化。在本文中，我们将介绍这些新方法，并提供一些示例代码来说明它们的用法。
原有的序列化方法
在 ES5 中引入的 JSON.stringify()方法是最常用的序列化方法。这个方法会将 JavaScript 对象转化为字符串，并将其存储或传输到另一个地方。序列化对象的方法非常便捷，而且很容易通过反序列化来将其还原成对象。
以下是 JSON.stringify()的基本使用示例：
-- -------------------- ---- -------
----- ------ - -
----- --------
---- ---
-------- ----------- ------------
---- -
----- ------
----- --------
-
--
----- ---------- - -----------------------
------------------------
-- --- -----------------------------------------------------------------------------------------------通过 JSON.parse()，我们可以将字符串转换为 JavaScript 对象：
const deserialized = JSON.parse(serialized);
console.log(deserialized);
// 输出: { name: 'Alice', age: 25, hobbies: ['reading', 'painting'], pet: { type: 'cat', name: 'Fluffy' } }新的序列化方法
在 ES2021 中引入了以下的新序列化方法：
StructuredClone.serialize()：这个方法使用了浏览器内置的序列化算法，能够序列化更多的值类型，而不仅限于 JSON 格式所支持的值类型。Transferable Structured Clone：这个是一项 WebSocket 标准，它提供了一种更快且更灵活的序列化方式，可以在不同的浏览器窗口之间传输对象。
在这篇文章中，我们将会重点关注 StructuredClone.serialize() 方法。
使用 StructuredClone.serialize() 序列化对象
StructuredClone.serialize() 方法使用自定义的算法，可以轻松地序列化包括函数、循环引用和一些原生对象（例如 Map 和 Set）等值类型。以下是 StructuredClone.serialize() 的基础使用示例：
-- -------------------- ---- -------
----- ------ - -
----- --------
---- ---
-------- ----------- ------------
---- -
----- ------
----- ---------
--
--
----- ---------- - ----------------------------------
------------------------
-- --- ----------- - ----------- --- -这里的 serialized 是一个 ArrayBuffer 类型的值，它仅仅是包含了序列化信息的一个二进制数据，为了转换成字符串，我们需要将它通过 TextDecoder 解码：
const decoder = new TextDecoder(); console.log(decoder.decode(serialized));
decoder.decode() 方法会解码 serialized，得到以下输出：
-- -------------------- ---- -------
-
------- --------
------ ---
---------- -
----------
----------
--
------ -
------- ------
------- --------
-
-StructuredClone.serializeInto() 和 StructuredClone.deserialize() 方法
StructuredClone.serializeInto() 和 StructuredClone.deserialize() 方法引入了更多的选项，使得序列化和反序列化更加灵活。
StructuredClone.serializeInto() 方法可以将序列化信息保存到一个已有的 ArrayBuffer 中，并指定它的起始位置和总长度。
以下是 StructuredClone.serializeInto() 的使用示例：
-- -------------------- ---- -------
----- ------ - -
----- --------
---- ---
-------- ----------- ------------
---- -
----- ------
----- ---------
--
--
----- -- - --- ------------------ -- -------- ---- - -----------
----- ---------- - ------------------------------------- --- -- ----- -- --------- ----------- -- --- - ------ ---
------------------------
-- --- ----------- - ----------- --- -StructuredClone.deserialize() 方法用于将 ArrayBuffer 转换成 JavaScript 对象，并提供了对保存元数据的支持。
以下是 StructuredClone.deserialize() 的使用示例：
-- -------------------- ---- -------
----- -- - --- ------------------ -- -------- ---- - -----------
----- ------ - -
----- --------
---- ---
-------- ----------- ------------
---- -
----- ------
----- ---------
--
--
------------------------------------- --- -- ----- -- - ------ ---- ----------- -
----- ------------ - ------------------------------- -- ----- -- --- - ------ --- ---- -----------
--------------------------
-- ---- ----- -------- ---- --- -------- ----------- ------------ ---- - ----- ------ ----- -------- - -总结
在 ES2021 中，JavaScript 序列化方法从 JSON.stringify() 扩展到了更为丰富和优化的形式。StructuredClone.serialize() 和相关方法使得更多元数据的保存和数据类型的序列化成为了可能。读者可以根据业务场景和自身需要选择适合自己的序列化方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b02ca8add4f0e0ff994a30