当前位置：首页 > news >正文

JavaScript实践（三）JavaScript序列化与反序列化深度解析

news 来源：原创 2025/5/14 8:06:07

JavaScript中的序列化与反序列化是数据存储、网络传输和跨系统交互的核心技术之一。本文将从底层原理、核心方法、复杂场景处理、安全风险及工程实践等多个维度，系统性地解析这一技术体系，并附完整的代码实现示例。

一、序列化与反序列化的核心价值

序列化（Serialization）是将JavaScript对象转换为可存储或传输的标准化字符串（通常为JSON格式）的过程，其核心作用在于：

数据持久化：将内存中的对象保存到本地存储（LocalStorage/IndexedDB）或文件系统
网络通信：通过HTTP请求将结构化数据发送到服务端或接收服务端响应
跨进程交互：Web Worker、iframe、浏览器插件之间的数据传递
状态管理：Redux/Vuex等状态容器依赖序列化实现状态快照与时间旅行调试

反序列化（Deserialization）则是将标准化字符串还原为JavaScript对象的过程，需要确保数据完整性和类型一致性。

二、核心API深度解析

1. JSON.stringify() 方法详解

// 基础用法 
const user = { name: "John", age: 30, roles: ["admin", "editor"] 
};
const jsonStr = JSON.stringify(user); 
// 输出：{"name":"John","age":30,"roles":["admin","editor"]}

高级参数配置：

替换函数（Replacer）：自定义序列化逻辑

function replacer(key, value) {if (key === "password") return undefined; // 过滤敏感字段 if (typeof value === "number") return value * 2; // 数值处理 return value;
}
JSON.stringify({name:  "test", password: "123", score: 80}, replacer);
// 输出：{"name":"test","score":160}

缩进控制（Space）：格式化输出

JSON.stringify(user,  null, 2); // 2空格缩进 
JSON.stringify(user,  null, "\t"); // 制表符缩进

特殊类型处理规则：

undefined、函数、Symbol类型会被忽略
Date对象转换为ISO字符串
Infinity、NaN转换为null
循环引用会抛出TypeError

2. JSON.parse() 方法详解

// 基础反序列化 
const parsedUser = JSON.parse(jsonStr);  
console.log(parsedUser.roles[0]);  // 输出："admin"// Reviver函数处理 
const revivedData = JSON.parse('{"date":"2025-05-10T12:00:00.000Z"}',  (k, v) => {if (k === "date") return new Date(v);return v;
});
console.log(revivedData.date  instanceof Date); // true

三、复杂数据结构处理技巧

1. 处理类实例对象

class User {constructor(name, birthYear) {this.name  = name;this.birthYear  = birthYear;}get age() {return new Date().getFullYear() - this.birthYear; }
}// 自定义序列化 
User.prototype.toJSON  = function() {return { name: this.name, birthYear: this.birthYear, age: this.age  // 计算属性持久化 };
};const user = new User("Alice", 1990);
console.log(JSON.stringify(user));  // {"name":"Alice","birthYear":1990,"age":35}

2. 循环引用解决方案

const obj = { name: "Parent" };
obj.child  = { parent: obj };// 自定义循环引用处理 
const cache = new WeakSet();
const jsonStr = JSON.stringify(obj,  (key, value) => {if (typeof value === "object" && value !== null) {if (cache.has(value))  return "[Circular]";cache.add(value); }return value;
});
// 输出：{"name":"Parent","child":{"parent":"[Circular]"}}

3. 二进制数据处理

// ArrayBuffer转Base64 
const buffer = new ArrayBuffer(8);
const view = new Uint8Array(buffer);
view.set([72,  101, 108, 108, 111], 0);const data = {timestamp: Date.now(), payload: btoa(String.fromCharCode(...view)) 
};
const serialized = JSON.stringify(data); // 反序列化恢复 
const deserialized = JSON.parse(serialized); 
const restoredBuffer = Uint8Array.from( atob(deserialized.payload),  c => c.charCodeAt(0) 
).buffer;

四、安全风险与防御策略

1. 典型攻击场景

// 恶意JSON注入 
const dangerousJson = '{"__proto__": {"isAdmin": true}}';
const parsed = JSON.parse(dangerousJson); 
console.log({}.isAdmin);  // 输出：true（原型污染）// XSS漏洞 
const userInput = '{"name":"<script>alert(1)</script>"}';
document.body.innerHTML  = JSON.parse(userInput).name;

2. 安全防护方案

输入净化：使用JSON.parse() 代替eval()

// 危险方式 
const unsafeParse = eval(`(${jsonStr})`);// 安全方式 
const safeParse = JSON.parse(jsonStr);

原型污染防护

const safeParse = (str) => {return JSON.parse(str,  (k, v) => {if (k === "__proto__") return undefined;return v;});
};

内容安全策略（CSP）

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; object-src 'none'">

五、性能优化与工程实践

1. 大数据量处理

// 流式处理（Node.js 环境）
const { pipeline } = require("stream");
const fs = require("fs");const readStream = fs.createReadStream("large-data.json"); 
const transformStream = new JSONParseStream(); // 自定义转换流 
const writeStream = fs.createWriteStream("processed-data.ndjson"); pipeline(readStream, transformStream, writeStream, (err) => {if (err) console.error("Pipeline  failed:", err);
});

2. Schema验证

// 使用Ajv校验Schema 
const Ajv = require("ajv");
const ajv = new Ajv();const schema = {type: "object",properties: {id: {type: "integer"},email: {type: "string", format: "email"}},required: ["id", "email"]
};const validate = ajv.compile(schema); 
const data = JSON.parse(rawData); 
if (!validate(data)) throw new Error("Invalid schema");

3. 压缩优化

// Brotli压缩 
const { compress, decompress } = require("brotli");const originalData = { /* 大型对象 */ };
const jsonStr = JSON.stringify(originalData); 
const compressed = compress(Buffer.from(jsonStr)); // 存储/传输压缩数据 
localStorage.setItem("compressedData",  compressed.toString("base64")); // 解压恢复 
const restored = JSON.parse( decompress(Buffer.from(localStorage.getItem("compressedData"),  "base64"))
);

六、高级应用场景

1. 差异同步算法

// 生成对象差异补丁 
function generatePatch(oldObj, newObj) {const patch = {};for (const key in newObj) {if (!deepEqual(oldObj[key], newObj[key])) {patch[key] = newObj[key];}}return JSON.stringify(patch); 
}// 应用补丁更新 
function applyPatch(target, patchStr) {const patch = JSON.parse(patchStr); return Object.assign(target,  patch);
}

2. 版本化数据迁移

// Protocol Buffers集成 
const protobuf = require("protobufjs");
const root = protobuf.loadSync("schema.proto"); 
const User = root.lookupType("User"); const user = { id: 1, name: "ProtoUser" };
const buffer = User.encode(user).finish(); 
const restoredUser = User.decode(buffer);

3. 跨语言序列化协议

// 版本迁移处理器 
const migrations = {"1.0": (data) => ({ ...data, version: "1.1", newField: "default" }),"1.1": (data) => ({ ...data, version: "1.2", deprecatedField: undefined })
};function migrate(dataStr) {let data = JSON.parse(dataStr); while (migrations[data.version]) {data = migrations[data.version](data);}return JSON.stringify(data); 
}

结语

JavaScript序列化与反序列化技术贯穿现代Web开发的各个环节。开发者需要深入理解其核心机制，掌握复杂场景下的处理技巧，同时建立完善的安全防护意识。随着WebAssembly、WebSocket等新技术的发展，序列化技术正在向二进制高效编码、实时流式传输等方向持续演进。建议在实际项目中结合JSON Schema验证、压缩算法和差异同步策略，构建高性能、高可靠性的数据交互体系。