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 可以借助还原函数恢复复杂类型。

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

相关推荐
Heo2 分钟前
简单聊聊webpack摇树的原理
前端·javascript·面试
少卿7 分钟前
React 日历组件完全指南:从网格生成到农历转换
前端·react.js
程序员鱼皮23 分钟前
Gemini 3.0 发布!
前端·ai编程·gemini
程序员鱼皮25 分钟前
Gemini 3.0 炸裂发布!前端又死了???
前端·ai·程序员·互联网·代码
xiangxiongfly91527 分钟前
CSS svg
前端·css·svg
山依尽37 分钟前
如何将一个 React SPA 项目迁移到 Next.js 服务端渲染
前端·next.js
42 分钟前
使用 svgfmt 优化 SVG 图标
前端·svg·icon
Watermelo61742 分钟前
href 和 src 有什么区别,它们对性能有什么影响?
前端·javascript·vue.js·性能优化·html·html5·用户体验
hqk1 小时前
鸿蒙零基础语法入门:开启你的开发之旅
android·前端·harmonyos
AAA阿giao1 小时前
大厂面试之反转字符串:深入解析与实战演练
前端·javascript·数据结构·面试·职场和发展·编程技巧