JavaScript中JSON.stringify() 和 JSON.parse() 如何使用

发布时间：2021-07-27 16:09:31 作者：Leah
来源：亿速云阅读：204

# JavaScript中JSON.stringify() 和 JSON.parse() 如何使用

## 目录
1. [JSON简介](#json简介)
2. [JSON.stringify() 方法详解](#jsonstringify-方法详解)
   - [基本用法](#基本用法)
   - [替换函数](#替换函数)
   - [缩进和格式化](#缩进和格式化)
   - [处理特殊对象](#处理特殊对象)
3. [JSON.parse() 方法详解](#jsonparse-方法详解)
   - [基本用法](#基本用法-1)
   - [reviver函数](#reviver函数)
4. [常见使用场景](#常见使用场景)
5. [注意事项和陷阱](#注意事项和陷阱)
6. [性能考虑](#性能考虑)
7. [总结](#总结)

## JSON简介

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于ECMAScript的一个子集，采用完全独立于语言的文本格式来存储和表示数据。JSON已经成为现代Web开发中最常用的数据格式之一，特别是在前后端数据交互中。

JSON具有以下特点：
- 易于人阅读和编写
- 易于机器解析和生成
- 基于JavaScript语法，但独立于语言
- 支持嵌套结构

在JavaScript中，JSON对象提供了两个核心方法：
- `JSON.stringify()`：将JavaScript值转换为JSON字符串
- `JSON.parse()`：将JSON字符串解析为JavaScript值

## JSON.stringify() 方法详解

### 基本用法

`JSON.stringify()` 方法将一个JavaScript对象或值转换为JSON字符串。

```javascript
const obj = {
  name: "John",
  age: 30,
  isAdmin: true,
  hobbies: ["reading", "swimming"]
};

const jsonString = JSON.stringify(obj);
console.log(jsonString);
// 输出: {"name":"John","age":30,"isAdmin":true,"hobbies":["reading","swimming"]}

替换函数

JSON.stringify() 可以接受一个替换函数作为第二个参数，用于控制哪些属性应该被包含在结果中或如何转换值。

function replacer(key, value) {
  if (typeof value === "string") {
    return undefined; // 过滤掉所有字符串类型的值
  }
  return value;
}

const obj = {
  name: "John",
  age: 30,
  isAdmin: true
};

const jsonString = JSON.stringify(obj, replacer);
console.log(jsonString);
// 输出: {"age":30,"isAdmin":true}

缩进和格式化

第三个参数用于控制结果字符串的缩进：

const obj = {
  name: "John",
  age: 30,
  isAdmin: true
};

// 使用数字指定空格数
console.log(JSON.stringify(obj, null, 2));
/*
输出:
{
  "name": "John",
  "age": 30,
  "isAdmin": true
}
*/

// 使用字符串作为缩进
console.log(JSON.stringify(obj, null, "--"));
/*
输出:
{
--"name": "John",
--"age": 30,
--"isAdmin": true
}
*/

处理特殊对象

JSON.stringify() 在处理某些特殊对象时有一些限制：

函数和Symbol值：会被忽略或在数组中转换为null
undefined：在对象属性中会被忽略，在数组中会转换为null
Date对象：会调用toJSON()方法转换为字符串
循环引用：会抛出错误

const specialObj = {
  func: function() {}, // 被忽略
  sym: Symbol("foo"),  // 被忽略
  undef: undefined,    // 被忽略
  date: new Date(),    // 转换为ISO字符串
  nan: NaN,            // 转换为null
  infinity: Infinity   // 转换为null
};

console.log(JSON.stringify(specialObj));
// 输出: {"date":"2023-05-20T12:00:00.000Z","nan":null,"infinity":null}

JSON.parse() 方法详解

基本用法

JSON.parse() 方法将一个JSON字符串解析为JavaScript值或对象。

const jsonString = '{"name":"John","age":30,"isAdmin":true}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // 输出: John

reviver函数

JSON.parse() 可以接受一个reviver函数作为第二个参数，用于在返回之前转换解析结果。

const jsonString = '{"name":"John","age":30,"isAdmin":true}';

const obj = JSON.parse(jsonString, (key, value) => {
  if (key === "age") {
    return value + 1; // 将age增加1
  }
  return value;
});

console.log(obj.age); // 输出: 31

常见使用场景

1. 数据存储

// 存储到localStorage
const user = { name: "John", age: 30 };
localStorage.setItem("user", JSON.stringify(user));

// 从localStorage读取
const storedUser = JSON.parse(localStorage.getItem("user"));

2. 深拷贝对象

const original = { a: 1, b: { c: 2 } };
const copy = JSON.parse(JSON.stringify(original));

original.b.c = 3;
console.log(copy.b.c); // 仍然是2

3. API请求和响应处理

// 发送数据
fetch("/api/user", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "John" })
});

// 接收数据
fetch("/api/user/1")
  .then(response => response.json()) // 内部使用JSON.parse()
  .then(data => console.log(data));

4. 配置文件处理

const config = {
  apiUrl: "https://api.example.com",
  timeout: 5000,
  features: ["search", "filter"]
};

// 保存配置
fs.writeFileSync("config.json", JSON.stringify(config, null, 2));

// 读取配置
const loadedConfig = JSON.parse(fs.readFileSync("config.json"));

注意事项和陷阱

1. 循环引用问题

const obj = { name: "John" };
obj.self = obj; // 创建循环引用

try {
  JSON.stringify(obj); // 抛出错误: TypeError: Converting circular structure to JSON
} catch (e) {
  console.error(e);
}

解决方案：使用库如flatted或手动处理循环引用。

2. 日期对象处理

const obj = { date: new Date() };
const jsonString = JSON.stringify(obj);
const parsedObj = JSON.parse(jsonString);

console.log(typeof parsedObj.date); // "string"，不是Date对象

解决方案：手动转换或使用reviver函数：

const parsedObj = JSON.parse(jsonString, (key, value) => {
  if (typeof value === "string" && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/.test(value)) {
    return new Date(value);
  }
  return value;
});

3. 函数和Symbol丢失

const obj = { 
  func: () => console.log("hello"),
  sym: Symbol("foo")
};
const jsonString = JSON.stringify(obj); // "{}"

4. 大数字精度问题

JavaScript中所有数字都以双精度浮点数表示，可能导致大整数精度丢失：

const bigNum = { num: 12345678901234567890 };
const jsonString = JSON.stringify(bigNum);
const parsed = JSON.parse(jsonString);
console.log(parsed.num); // 12345678901234567000

性能考虑

大型对象处理：对于非常大的对象，JSON.stringify() 和 JSON.parse() 可能会消耗较多内存和时间。
频繁调用：避免在循环或高频触发的函数中频繁调用这些方法。
替代方案：对于性能敏感的场景，考虑使用二进制格式如Protocol Buffers或MessagePack。

总结

JSON.stringify() 和 JSON.parse() 是JavaScript中处理JSON数据的核心方法，它们提供了强大的数据序列化和反序列化能力。通过理解它们的各种参数和选项，开发者可以更灵活地控制数据的转换过程。

关键点回顾： - JSON.stringify() 将JavaScript值转换为JSON字符串，支持替换函数和格式化 - JSON.parse() 将JSON字符串解析为JavaScript值，支持reviver函数 - 注意处理特殊对象类型和循环引用问题 - 在数据存储、API通信和配置管理等场景中广泛应用

掌握这些方法的使用技巧和注意事项，将大大提高你在JavaScript开发中处理数据的效率和可靠性。 “`

这篇文章大约3600字，详细介绍了JSON.stringify()和JSON.parse()的使用方法、参数选项、常见场景、注意事项和性能考虑。内容采用Markdown格式，包含代码示例和清晰的章节划分，适合作为技术文档或博客文章。