JSON 使用指南:从基础语法到 stringify/parse 的高级技巧

在前端和后端开发中,**JSON(JavaScript Object Notation)**几乎是最常见的数据格式。它轻量、易读,而且和 JavaScript 天然契合,这让它成为 Web 开发的"通用语言"。下面我们从语法开始,逐步理解 JSON 的使用方式和常见技巧。


1. JSON 的语法

JSON 支持的类型并不多,大致可以分为三类:简单值、对象和数组

1.1 简单值

JSON 可以是一个数字、布尔值、字符串或 null。需要注意的是:

  • 字符串必须用 双引号 包裹,单引号会导致语法错误。
  • undefined 并不在 JSON 的语法范围内。

示例:

csharp 复制代码
42
"hello"
true
null

1.2 对象

对象使用花括号包裹,由一组键值对组成:

  • 键必须是双引号括起来的字符串;
  • 值可以是简单值、对象或数组。
json 复制代码
{
  "title": "JSON 入门",
  "edition": 3
}

1.3 数组

数组使用方括号表示,可以包含简单值、对象,甚至嵌套数组。

css 复制代码
[  { "id": 1, "tags": ["a", "b"] },
  { "id": 2, "tags": ["c"] }
]

1.4 序列化与解析

与 XML 相比,JSON 最大的优势在于:

  • 可以直接序列化对象为字符串;
  • 可以直接把字符串解析为对象。

这也是绝大多数开发者选择 JSON 的原因。


2. JSON 对象与序列化方法

在 JavaScript 中,提供了两个核心方法:

  • JSON.stringify() :把对象转为 JSON 字符串(序列化);
  • JSON.parse() :把 JSON 字符串转为对象(反序列化)。

虽然过去也有人用 eval 来解析 JSON,但那样存在安全风险。现代开发中,应始终使用 JSON.parse


2.1 JSON.stringify 的序列化选项

过滤结果

序列化时可以选择保留部分字段:

css 复制代码
const book = { title: "JS", edition: 2, author: "Kyle" };

// 只保留 title 和 edition
JSON.stringify(book, ["title", "edition"]); 
// {"title":"JS","edition":2}

或者使用函数过滤:

javascript 复制代码
JSON.stringify(book, (key, value) => {
  if (key === "author") return undefined; // 删除 author
  return value;
});

字符缩进

第三个参数可以用来美化输出:

javascript 复制代码
JSON.stringify(book, null, 4);  
// 缩进 4 个空格

JSON.stringify(book, null, "--");  
// 每一行前加上 --

3. toJSON 方法

对象中可以自定义 toJSON 方法,控制序列化行为。

调用 JSON.stringify 时,会优先执行 toJSON,然后再进入过滤和缩进逻辑。

javascript 复制代码
const user = {
  id: 1,
  name: "Alice",
  password: "secret",
  toJSON() {
    return { id: this.id, name: this.name }; // 主动隐藏密码
  }
};

JSON.stringify(user, null, 2);
/*
{
  "id": 1,
  "name": "Alice"
}
*/

序列化顺序总结:

  1. 调用 toJSON(若存在);
  2. 应用过滤函数或白名单数组;
  3. 对结果逐一序列化;
  4. 根据缩进参数美化输出。

4. JSON.parse 的解析选项

JSON.parse 除了第一个参数(要解析的字符串),还可以接收一个还原函数(reviver):

javascript 复制代码
const text = '{"createdAt":"2025-09-01T12:00:00Z"}';

const data = JSON.parse(text, (key, value) => {
  if (key === "createdAt") {
    return new Date(value); // 把字符串转回 Date 对象
  }
  return value;
});

console.log(data.createdAt instanceof Date); // true

这里的还原函数会遍历每个键值,如果返回 undefined 就删除该键,否则替换为返回值。


总结

JSON 的规则简单,但灵活性很高:

  • 语法只支持 简单值、对象、数组 ,且必须遵守双引号、无 undefined 的限制;
  • 使用 JSON.stringify 可以灵活控制输出内容和格式;
  • toJSON 方法允许对象自定义序列化方式;
  • JSON.parse 可以借助还原函数恢复复杂类型。

理解这些,就能在日常开发中熟练处理数据传输、配置文件和存储操作。

相关推荐
小信丶7 分钟前
解决 pnpm dev 报错:系统禁止运行脚本的问题
前端·vue.js·windows·npm
૮・ﻌ・14 分钟前
Vue3:组合式API、Vue3.3新特性、Pinia
前端·javascript·vue3
前端不太难15 分钟前
RN + TypeScript 项目越写越乱?如何规范架构?
前端·javascript·typescript
神算大模型APi--天枢64616 分钟前
全栈自主可控:国产算力平台重塑大模型后端开发与部署生态
大数据·前端·人工智能·架构·硬件架构
苏打水com16 分钟前
第十五篇:Day43-45 前端性能优化进阶——从“可用”到“极致”(对标职场“高并发场景优化”需求)
前端·css·vue·html·js
@大迁世界23 分钟前
08.CSS if() 函数
前端·css
Moment30 分钟前
小米不仅造车,还造模型?309B参数全开源,深度思考完胜DeepSeek 🐒🐒🐒
前端·人工智能·后端
苏打水com33 分钟前
第十六篇:Day46-48 前端安全进阶——从“漏洞防范”到“安全体系”(对标职场“攻防实战”需求)
前端·javascript·css·vue.js·html
5C2435 分钟前
从思想到实践:前端工程化体系与 Webpack 构建架构深度解析
前端·前端工程化
咕噜企业分发小米41 分钟前
如何平衡服务器内存使用率和系统稳定性?
java·服务器·前端