📋 介绍

JSON.stringify()JavaScript 的内置方法,用于将 JavaScript 值** 对象/数组/值 转换为 JSON 字符串**。

🎯 核心作用 ★★

将 JavaScript 对象/数组/值转换为 JSON 字符串格式。

📝 基本语法

JSON.stringify(值, 替换函数, 缩进空格数)

💡 经典示例

const obj = { name: '张三', age: 25, city: '北京' }

const jsonString = JSON.stringify(obj)
console.log(jsonString)
// 输出: '{"name":"张三","age":25,"city":"北京"}'

🔧 实际应用场景

1. 发送 AJAX 请求

// 发送数据到服务器
const data = { username: '张三', password: '123456' }
const jsonData = JSON.stringify(data)

fetch('/api/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: jsonData  // 必须是字符串
})

2. 本地存储

// 保存到 localStorage
const user = { id: 1, name: '张三' }
localStorage.setItem('user', JSON.stringify(user))

// 读取
const stored = localStorage.getItem('user')
const userObj = JSON.parse(stored)

3. 深拷贝简单对象

// 简单对象的深拷贝
const obj = { a: 1, b: { c: 2 } }
const copy = JSON.parse(JSON.stringify(obj))

console.log(copy)  // 独立的对象

主要特点

优点

简单易用:一行代码转换
标准格式:生成标准 JSON
广泛支持:所有现代浏览器支持

注意事项

⚠️ 忽略函数:函数会被忽略
⚠️ 忽略 undefined:undefined 会被忽略
⚠️ 忽略 symbol:Symbol 会被忽略
⚠️ 日期变字符串:Date 变为 ISO 字符串
⚠️ 循环引用报错:对象循环引用会报错

🔄 参数详解

1. 替换函数

const obj = { a: 1, b: 2, c: 3 }

// 只包含某些属性
const result = JSON.stringify(obj, ['a', 'b'])
// '{"a":1,"b":2}'

// 自定义转换
const result2 = JSON.stringify(obj, (key, value) => {
  if (key === 'b') return undefined  // 排除 b
  return value
})
// '{"a":1,"c":3}'

2. 缩进空格

const obj = { name: '张三', age: 25 }

// 美化输出
const pretty = JSON.stringify(obj, null, 2)
/*
{
  "name": "张三",
  "age": 25
}
*/

// 使用制表符
const tabbed = JSON.stringify(obj, null, '\t')

📈 常见陷阱

1. 循环引用

const obj = { name: 'test' }
obj.self = obj  // 循环引用

// ❌ 会报错
// JSON.stringify(obj)  // TypeError

2. 日期处理

const obj = { date: new Date() }
const json = JSON.stringify(obj)
// '{"date":"2024-01-20T10:30:00.000Z"}'

// 需要手动转换回来
const parsed = JSON.parse(json, (key, value) => {
  if (key === 'date') return new Date(value)
  return value
})

3. BigInt 报错

const obj = { id: 12345678901234567890n }  // BigInt

// ❌ 会报错
// JSON.stringify(obj)  // TypeError

🎓 记住这几点

  1. 转为字符串:对象 → JSON 字符串
  2. 忽略函数:函数、undefined、Symbol 被忽略
  3. 可格式化:支持缩进美化输出
  4. 可过滤:支持替换函数过滤字段
  5. 常用场景:网络传输、本地存储、深拷贝

📋 总结

JSON.stringify 是 JavaScript 中对象序列化的标准方法,用于将 JavaScript 值转换为 JSON 字符串,是前后端数据交互的基础工具。