JavaScript 教程：深入理解 JSON 方法与 toJSON-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00050/article/details/148416487

JavaScript 教程：深入理解 JSON 方法与 toJSON

zh.javascript.info 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。项目地址: https://gitcode.com/gh_mirrors/zh/zh.javascript.info

JSON（JavaScript Object Notation）是现代 Web 开发中不可或缺的数据交换格式。作为 JavaScript 开发者，掌握 JSON 的序列化和反序列化技术至关重要。本文将全面解析 JavaScript 中的 JSON 处理方法，帮助你高效地在不同系统间传输和存储数据。

为什么需要 JSON

在实际开发中，我们经常需要将复杂对象转换为字符串形式，以便：

通过网络传输数据
将数据存储到本地
在日志中记录对象状态

虽然可以手动实现对象的字符串表示，但随着对象结构变得复杂，这种方法会变得难以维护。JSON 提供了一种标准化的解决方案。

JSON.stringify 基础用法

JSON.stringify 是 JavaScript 内置的对象序列化方法：

let student = {
  name: '张三',
  age: 21,
  courses: ['前端开发', '数据结构'],
  graduated: false
};

let json = JSON.stringify(student);
console.log(json);
// 输出：{"name":"张三","age":21,"courses":["前端开发","数据结构"],"graduated":false}

JSON 编码的特点

字符串必须使用双引号
对象属性名也必须使用双引号
不支持 JavaScript 特有的数据类型

数据类型支持情况

JSON 支持以下数据类型：

| 数据类型 | 是否支持 | 示例 | |----------------|----------|--------------------------| | 对象 | ✓ | {"name":"张三"} | | 数组 | ✓ | [1,2,3] | | 字符串 | ✓ | "hello" | | 数字 | ✓ | 42 | | 布尔值 | ✓ | true/false | | null | ✓ | null | | 函数 | × | 被忽略 | | Symbol | × | 被忽略 | | undefined | × | 被忽略 | | 循环引用 | × | 会报错 |

处理复杂情况

1. 嵌套对象

JSON.stringify 可以自动处理嵌套对象：

let company = {
  name: "科技公司",
  departments: {
    development: {
      size: 50
    },
    marketing: {
      size: 20
    }
  }
};

console.log(JSON.stringify(company));

2. 循环引用问题

当对象存在循环引用时，序列化会失败：

let personA = { name: "张三" };
let personB = { name: "李四" };

personA.friend = personB;
personB.friend = personA;

JSON.stringify(personA); // 报错：Converting circular structure to JSON

高级定制功能

1. 使用 replacer 参数

replacer 可以控制哪些属性需要被序列化：

let user = {
  id: "user123",
  password: "secret",
  name: "王五",
  age: 28
};

// 只序列化 name 和 age
let json = JSON.stringify(user, ['name', 'age']);
console.log(json); // {"name":"王五","age":28}

2. 使用 replacer 函数

更灵活的方式是使用函数：

let product = {
  name: "笔记本电脑",
  price: 5999,
  stock: 100,
  secretInfo: "内部数据"
};

let json = JSON.stringify(product, (key, value) => {
  if (key === 'secretInfo') return undefined;
  if (key === 'price') return `¥${value}`;
  return value;
});

console.log(json);
// {"name":"笔记本电脑","price":"¥5999","stock":100}

3. 格式化输出

使用 space 参数美化输出：

let book = {
  title: "JavaScript高级编程",
  author: "赵六",
  details: {
    pages: 450,
    publisher: "人民邮电出版社"
  }
};

console.log(JSON.stringify(book, null, 2));
/*
{
  "title": "JavaScript高级编程",
  "author": "赵六",
  "details": {
    "pages": 450,
    "publisher": "人民邮电出版社"
  }
}
*/

实现自定义序列化：toJSON

对象可以通过定义 toJSON 方法来自定义序列化行为：

let room = {
  number: 101,
  toJSON() {
    return { roomNumber: this.number };
  }
};

let meeting = {
  title: "项目讨论",
  room
};

console.log(JSON.stringify(meeting));
// {"title":"项目讨论","room":{"roomNumber":101}}

JSON.parse 与 reviver

反序列化时，可以使用 reviver 函数对数据进行转换：

let jsonStr = '{"title":"会议","date":"2023-05-20T09:00:00.000Z"}';

let event = JSON.parse(jsonStr, (key, value) => {
  if (key === 'date') return new Date(value);
  return value;
});

console.log(event.date.getFullYear()); // 2023