Modern JavaScript Cheatsheet JSON处理：数据序列化与反序列化终极指南-编程阁

Modern JavaScript Cheatsheet JSON处理：数据序列化与反序列化终极指南

【免费下载链接】modern-js-cheatsheetCheatsheet for the JavaScript knowledge you will frequently encounter in modern projects.项目地址: https://gitcode.com/gh_mirrors/mo/modern-js-cheatsheet

现代JavaScript开发中，JSON（JavaScript Object Notation）已成为数据交换的事实标准。无论是前后端通信、本地存储还是配置文件，JSON处理能力都是开发者必备技能。本文将通过实用示例和最佳实践，帮助你掌握JSON序列化与反序列化的核心技巧，解决开发中的常见痛点。

一、JSON基础：为什么它如此重要？

JSON作为轻量级数据格式，具有易读性、跨平台兼容性和语言无关性三大优势。在现代JavaScript项目中，你会频繁遇到以下场景：

API接口的数据交换（如RESTful服务）
浏览器本地存储（localStorage/sessionStorage）
配置文件管理（如package.json）
前后端状态传递（如Redux状态持久化）

核心概念：JSON处理主要包含两个操作——
✅序列化：将JavaScript对象转换为JSON字符串（JSON.stringify()）
✅反序列化：将JSON字符串转换为JavaScript对象（JSON.parse()）

二、快速上手：JSON.stringify()完整指南

2.1 基础用法：一键转换对象

const user = { name: "Alice", age: 30, isStudent: false, hobbies: ["reading", "coding"] }; // 基础序列化 const jsonString = JSON.stringify(user); console.log(jsonString); // 输出：{"name":"Alice","age":30,"isStudent":false,"hobbies":["reading","coding"]}

2.2 进阶技巧：过滤与格式化输出

场景1：仅保留需要的属性
使用replacer参数实现字段过滤：

// 只序列化name和hobbies字段 const filteredJson = JSON.stringify(user, ["name", "hobbies"]); // 输出：{"name":"Alice","hobbies":["reading","coding"]}

场景2：美化输出格式
添加缩进参数提升可读性：

// 缩进2个空格，便于调试 const prettyJson = JSON.stringify(user, null, 2);

场景3：自定义转换规则
通过函数处理特殊值：

// 将所有数字乘以2 const transformedJson = JSON.stringify(user, (key, value) => { if (typeof value === 'number') return value * 2; return value; }, 2);

2.3 常见陷阱与解决方案

问题	原因	解决方法
循环引用错误	对象包含自身引用	使用`replacer`检测循环引用或第三方库（如flatted）
函数/undefined丢失	JSON不支持这些类型	提前转换为字符串或过滤掉
Date对象转为ISO字符串	默认序列化行为	解析时需手动转换回Date对象

三、JSON.parse()：从字符串到对象的精准转换

3.1 基础用法：解析JSON字符串

const jsonString = '{"name":"Bob","age":25,"isStudent":true}'; const user = JSON.parse(jsonString); console.log(user.name); // 输出：Bob

3.2 高级技巧：还原复杂数据类型

使用reviver参数恢复特殊类型：

const jsonWithDate = '{"name":"Alice","birthDate":"2020-01-01T00:00:00.000Z"}'; // 将ISO字符串转换为Date对象 const user = JSON.parse(jsonWithDate, (key, value) => { if (key === 'birthDate') return new Date(value); return value; }); console.log(user.birthDate.getFullYear()); // 输出：2020

3.3 错误处理：确保解析安全

const invalidJson = '{"name":"Alice", age: 30}'; // 语法错误（age无引号） try { const user = JSON.parse(invalidJson); } catch (error) { console.error("JSON解析失败：", error.message); // 输出：JSON解析失败：Unexpected token a in JSON at position 14 }

四、实战场景：JSON处理最佳实践

4.1 本地存储应用

// 保存数据到localStorage const saveToStorage = (key, data) => { try { const jsonData = JSON.stringify(data); localStorage.setItem(key, jsonData); return true; } catch (error) { console.error("存储失败：", error); return false; } }; // 从localStorage读取数据 const loadFromStorage = (key) => { try { const jsonData = localStorage.getItem(key); return jsonData ? JSON.parse(jsonData) : null; } catch (error) { console.error("读取失败：", error); return null; } };

4.2 API数据交换

// 发送POST请求（序列化数据） fetch('/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(userData), // 将对象转为JSON字符串 }) .then(response => response.json()) // 解析响应JSON .then(data => console.log('服务器返回：', data)) .catch(error => console.error('请求失败：', error));