JS中的JSON.Stringify 方法详解

封面图 • 2025-11-02 • JavaScript

在 JavaScript 中，`JSON.stringify()` 是一个非常常用的方法，用于将 JavaScript 对象或值转换为 JSON 字符串。它广泛用于数据序列化、网络传输、存储等场景。

---

## ✅ 一、基本语法

```javascript
JSON.stringify(value[, replacer[, space]])
```

### 参数说明：

| 参数     | 类型             | 说明                                                                 |
|----------|------------------|----------------------------------------------------------------------|
| `value`  | any              | 要转换成 JSON 字符串的值（对象、数组、字符串、数字等）。           |
| `replacer` | function 或 array | 可选参数，用于过滤或转换结果。可以是函数，也可以是字符串数组。     |
| `space`  | number 或 string | 可选参数，用于控制缩进格式。可以是数字（表示空格数）或字符串（如 `" "`）。 |

---

## ✅ 二、基本使用示例

### 示例 1：简单对象

```javascript
const obj = { name: "Alice", age: 30 };
const str = JSON.stringify(obj);
console.log(str); // 输出: {"name":"Alice","age":30}
```

### 示例 2：数组

```javascript
const arr = [1, 2, 3];
const str = JSON.stringify(arr);
console.log(str); // 输出: [1,2,3]
```

### 示例 3：嵌套对象

```javascript
const data = {
  user: {
    name: "Bob",
    age: 25
  },
  hobbies: ["reading", "gaming"]
};
const str = JSON.stringify(data);
console.log(str);
// 输出: {"user":{"name":"Bob","age":25},"hobbies":["reading","gaming"]}
```

---

## ✅ 三、`replacer` 参数详解

### 1. 使用函数作为 `replacer`

```javascript
const obj = {
  name: "Alice",
  age: 30,
  secret: "123456"
};

const str = JSON.stringify(obj, (key, value) => {
  if (key === 'secret') return undefined; // 过滤掉 secret 属性
  return value;
});

console.log(str); // 输出: {"name":"Alice","age":30}
```

### 2. 使用数组指定要保留的属性

```javascript
const obj = {
  name: "Alice",
  age: 30,
  secret: "123456"
};

const str = JSON.stringify(obj, ['name', 'age']);
console.log(str); // 输出: {"name":"Alice","age":30}
```

---

## ✅ 四、`space` 参数详解

用于控制输出的格式，使 JSON 字符串更易读。

### 示例：

```javascript
const obj = { a: 1, b: 2 };

// 没有缩进
console.log(JSON.stringify(obj)); // {"a":1,"b":2}

// 使用数字表示空格数
console.log(JSON.stringify(obj, null, 2));
// 输出:
// {
//   "a": 1,
//   "b": 2
// }

// 使用字符串（例如制表符）
console.log(JSON.stringify(obj, null, '\t'));
// 输出:
// {
// 	"a": 1,
// 	"b": 2
// }
```

---

## ✅ 五、注意事项与限制

### 1. **不支持函数和 Symbol 类型**

```javascript
const obj = {
  name: "Alice",
  func: function() { return "Hello"; },
  sym: Symbol("test")
};

console.log(JSON.stringify(obj));
// 输出: {"name":"Alice"}
// func 和 sym 被忽略
```

### 2. **循环引用会抛出错误**

```javascript
const obj = {};
obj.self = obj;

JSON.stringify(obj); // 报错：Uncaught TypeError: Converting circular structure to JSON
```

### 3. **undefined、函数、Symbol 会被忽略**

```javascript
const obj = {
  a: undefined,
  b: function() {},
  c: Symbol('test')
};

console.log(JSON.stringify(obj)); // 输出: {}
```

---

## ✅ 六、常见用途

- 数据传输（如发送到后端 API）
- 存储数据（如 localStorage）
- 序列化对象用于日志记录
- 转换复杂结构为字符串进行比较或缓存

---

## ✅ 七、总结

| 特性         | 描述                                                                 |
|--------------|----------------------------------------------------------------------|
| 功能         | 将 JS 值转为 JSON 字符串                                             |
| 支持类型     | 对象、数组、数字、字符串、布尔、null 等                             |
| 不支持类型   | 函数、undefined、Symbol、循环引用                                   |
| 可选参数     | `replacer`（过滤/转换）、`space`（格式化）                           |

---

如果你有任何具体问题，比如如何处理特殊对象、如何避免循环引用、或者想了解 `JSON.parse()` 的对比，欢迎继续提问！