0

0

js 中 JSON.stringify 方法作用 js 中 JSON.stringify 方法的使用场景

煙雲

煙雲

发布时间:2025-07-22 17:19:01

|

863人浏览过

|

来源于php中文网

原创

json.stringify的核心作用是将javascript对象或值转换为json字符串,便于数据传输(如fetch发送post请求)和存储(如localstorage);2. 处理特殊类型时需注意:函数、undefined、symbol会被忽略,数组中对应值变null,循环引用会抛错,date转iso字符串但反序列化仍为字符串,bigint和map/set需手动处理;3. 通过replacer参数可过滤属性或自定义转换逻辑(如隐藏敏感信息、处理bigint),space参数可格式化输出(数字为空格数,字符串为缩进符),提升可读性与灵活性。

js 中 JSON.stringify 方法作用 js 中 JSON.stringify 方法的使用场景

JSON.stringify 方法在 JavaScript 里,简单来说,就是把一个 JavaScript 值(比如对象、数组、字符串、数字等)转换成一个 JSON 格式的字符串。它的主要作用就是为了数据的序列化,让数据能够方便地在网络上传输,或者存储到本地,因为它把复杂的数据结构变成了一个统一的、文本化的格式。

js 中 JSON.stringify 方法作用 js 中 JSON.stringify 方法的使用场景

JSON.stringify 方法的核心作用是将 JavaScript 对象或值转换为 JSON 字符串。这在 Web 开发中几乎无处不在,尤其当你需要将前端的数据发送到后端服务器,或者将一些配置、状态保存到本地存储(如 localStoragesessionStorage)时,它都是不可或缺的工具。它确保了数据在不同系统、不同语言之间传递时的格式一致性,因为 JSON 本身就是一种轻量级的数据交换格式。

JSON.stringify 在实际开发中常见的使用场景有哪些?

我个人觉得,JSON.stringify 在日常开发里简直是万金油般的存在,用得最多的,毫无疑问就是数据传输和数据存储。

js 中 JSON.stringify 方法作用 js 中 JSON.stringify 方法的使用场景

首先说数据传输。想象一下,你在前端页面里收集了一大堆用户输入的信息,比如一个表单对象,里面有姓名、年龄、地址,甚至还有一些嵌套的选项。你要把这些数据发给后端服务器,如果直接发一个 JavaScript 对象过去,那后端可能根本不认识,或者解析起来会非常麻烦。这时候,JSON.stringify 就派上用场了,它能把这个复杂的 JavaScript 对象变成一个标准的 JSON 字符串,后端用任何语言(Python、Java、Node.js等)都能轻松解析。比如,fetch API 或者 XMLHttpRequest 发送 POST 请求时,body 通常就需要一个字符串化的数据。

const userData = {
  name: '张三',
  age: 30,
  address: {
    city: '北京',
    street: '某某街'
  },
  hobbies: ['阅读', '编程']
};

// 发送到服务器前,先序列化
fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData) // 这里就用到了!
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));

再就是数据存储。浏览器提供的 localStoragesessionStorage 只能存储字符串。如果你想把一个 JavaScript 对象或者数组存进去,直接存是会变成 [object Object] 这样的字符串的,根本不是你想要的数据。所以,你得先用 JSON.stringify 把它变成 JSON 字符串,存进去;取出来的时候,再用 JSON.parse 把它变回原来的 JavaScript 对象。这简直是前端持久化数据最基础的手段了。

js 中 JSON.stringify 方法作用 js 中 JSON.stringify 方法的使用场景
const appSettings = {
  theme: 'dark',
  notifications: true,
  lastLogin: new Date()
};

// 存储前序列化
localStorage.setItem('appSettings', JSON.stringify(appSettings));

// 取出后反序列化
const storedSettings = JSON.parse(localStorage.getItem('appSettings'));
console.log(storedSettings.theme); // 'dark'

还有一些不那么显眼,但同样重要的场景,比如深拷贝。虽然不是最推荐的深拷贝方式(因为它有一些限制),但对于只包含基本数据类型、数组和普通对象的简单数据结构来说,JSON.parse(JSON.stringify(obj)) 确实是一种快速实现深拷贝的“黑科技”。不过,这个方法不能处理函数、undefinedDate 对象、RegExp 对象、MapSet 等特殊类型,所以用的时候得清楚它的局限性。

最后,调试时也挺好用。有时候你想看看一个复杂对象里面到底有什么,直接 console.log(obj) 可能输出得不够清晰,或者对象引用关系让你摸不着头脑。这时候,console.log(JSON.stringify(obj, null, 2)) 就能把对象格式化成易读的 JSON 字符串,方便你检查数据结构和内容。

JSON.stringify 处理特殊数据类型(如函数、undefined、循环引用)时有哪些注意事项?

在使用 JSON.stringify 的时候,有一些数据类型它处理起来会比较“个性”,甚至会直接报错,这些点是必须要注意的,不然很容易踩坑。

我遇到的最常见的问题就是函数和 undefined。当 JSON.stringify 遇到对象中的属性值是函数、undefined 或 Symbol 值时,它会直接忽略这些属性,不把它们包含在最终的 JSON 字符串里。如果这些值是数组的元素,那么它们会被转换成 null。这听起来有点奇怪,但这是 JSON 标准的规定。所以,如果你期望序列化一个包含函数或 undefined 的对象,并且希望这些信息也保留下来,那 JSON.stringify 就不适合直接用,你可能需要自己手动处理,或者用其他序列化库。

const complexObj = {
  name: '测试',
  age: undefined, // undefined
  greet: function() { console.log('Hello'); }, // 函数
  symbolKey: Symbol('id'), // Symbol
  data: [1, undefined, 3, function() {}] // 数组中的 undefined 和函数
};

console.log(JSON.stringify(complexObj));
// 输出: {"name":"测试","data":[1,null,3,null]}
// 注意:age、greet、symbolKey 都没了,数组里的 undefined 和函数变成了 null

另一个大坑是循环引用。如果你的对象结构里存在循环引用,比如 a 引用了 b,同时 b 又引用了 a,那么 JSON.stringify 在尝试序列化时会陷入无限循环,最终抛出一个 TypeError: Converting circular structure to JSON 的错误。这是非常致命的,因为这会直接导致你的程序崩溃。解决这个问题通常需要你在序列化之前手动解除循环引用,或者使用一些专门处理循环引用的库。我通常会在遇到这种错误时,第一时间检查数据结构,看看是不是不小心创建了循环引用。

吐槽大师
吐槽大师

吐槽大师(Roast Master) - 终极 AI 吐槽生成器,适用于 Instagram,Facebook,Twitter,Threads 和 Linkedin

下载
const objA = {};
const objB = {};
objA.b = objB;
objB.a = objA; // 循环引用!

try {
  JSON.stringify(objA); // 这里会抛出 TypeError
} catch (e) {
  console.error("捕获到错误:", e.message);
  // 输出: 捕获到错误: Converting circular structure to JSON
}

还有一些值得一提的:

  • Date 对象Date 对象会被转换为 ISO 格式的字符串,比如 "2023-10-27T08:00:00.000Z"。这通常是符合预期的,但在反序列化(JSON.parse)时,它仍然是一个字符串,需要你手动将其转换回 Date 对象。
  • BigIntBigInt 类型的值在 JSON.stringify 时会直接抛出 TypeError。JSON 标准本身不支持 BigInt。如果你需要序列化 BigInt,通常需要先将其转换为 String,然后在反序列化时再转回 BigInt
  • MapSet:这些新的数据结构也不会被直接序列化成它们的原有结构,它们会被转换成空对象 {}。如果你需要序列化它们,通常需要手动将它们转换为数组或其他 JSON 支持的类型。

了解这些“怪癖”非常重要,它能帮助你避免很多不必要的调试时间和错误。

如何利用 replacer 和 space 参数优化 JSON.stringify 的输出?

JSON.stringify 提供了两个可选参数:replacerspace,它们能让你对序列化过程有更精细的控制,这在很多场景下都非常有用。

先说 space 参数,这个参数主要是为了美化输出。如果你给它传入一个数字(0-10),它就会用这个数字表示的空格数来缩进 JSON 字符串,让它更易读。如果传入一个字符串(比如 '\t'),它就会用这个字符串作为缩进字符。这在调试时特别有用,因为格式化的 JSON 字符串比一行紧凑的字符串看着舒服多了,一眼就能看出数据结构。

const data = {
  name: '示例数据',
  details: {
    id: 123,
    status: 'active'
  },
  items: ['itemA', 'itemB']
};

// 不带 space 参数,输出紧凑
console.log('紧凑输出:', JSON.stringify(data));
// 输出: {"name":"示例数据","details":{"id":123,"status":"active"},"items":["itemA","itemB"]}

// space 为 2,缩进 2 个空格
console.log('缩进 2 个空格:', JSON.stringify(data, null, 2));
/*
输出:
{
  "name": "示例数据",
  "details": {
    "id": 123,
    "status": "active"
  },
  "items": [
    "itemA",
    "itemB"
  ]
}
*/

// space 为 '\t',使用制表符缩进
console.log('使用制表符缩进:', JSON.stringify(data, null, '\t'));
/*
输出:
{
    "name": "示例数据",
    "details": {
        "id": 123,
        "status": "active"
    },
    "items": [
        "itemA",
        "itemB"
    ]
}
*/

再来说说 replacer 参数,这个参数就强大多了,它允许你自定义序列化过程中的值转换replacer 可以是一个数组,也可以是一个函数。

replacer 是一个数组时,这个数组里应该包含你想要保留的属性名(字符串)。JSON.stringify 只会序列化这些指定属性及其子属性。这在你想从一个大对象中提取部分信息进行序列化时非常方便,可以有效减少传输的数据量。

const userProfile = {
  id: 'user123',
  name: '李四',
  email: 'lisi@example.com',
  passwordHash: 'some_hash_value', // 不希望被序列化
  lastLogin: new Date()
};

// 只序列化 id, name, email
const publicProfile = JSON.stringify(userProfile, ['id', 'name', 'email']);
console.log('部分序列化:', publicProfile);
// 输出: {"id":"user123","name":"李四","email":"lisi@example.com"}

replacer 是一个函数时,它会为对象中的每个属性(包括对象本身)调用一次。这个函数接收两个参数:key(属性名)和 value(属性值)。你可以在这个函数里根据 keyvalue 返回不同的值,从而实现更复杂的转换逻辑。

  • 如果你返回 value,则保持原样。
  • 如果你返回 undefined,则该属性会被忽略(不会出现在最终的 JSON 字符串中)。
  • 如果你返回其他值,则该属性会被替换为返回的值。

这个功能非常灵活,比如你可以用来过滤敏感信息、转换数据类型、或者处理那些 JSON.stringify 默认不支持的类型(如 BigIntDate 对象,如果你想以特定格式保存它们的话)。

const product = {
  name: '超级电脑',
  price: 9999.99,
  stock: 100,
  description: '性能强劲,值得拥有',
  secretKey: 'abc-123-xyz', // 敏感信息
  manufactureDate: new Date(),
  bigNumber: 12345678901234567890n // BigInt
};

function customReplacer(key, value) {
  // 过滤掉敏感信息
  if (key === 'secretKey') {
    return undefined; // 忽略这个属性
  }
  // 将 BigInt 转换为字符串
  if (typeof value === 'bigint') {
    return value.toString();
  }
  // 将 Date 对象转换为 YYYY-MM-DD 格式的字符串
  if (value instanceof Date) {
    return value.toISOString().split('T')[0];
  }
  // 其他值保持不变
  return value;
}

const serializedProduct = JSON.stringify(product, customReplacer, 2);
console.log('自定义序列化:', serializedProduct);
/*
输出:
{
  "name": "超级电脑",
  "price": 9999.99,
  "stock": 100,
  "description": "性能强劲,值得拥有",
  "manufactureDate": "2023-10-27", // 日期格式化了
  "bigNumber": "12345678901234567890" // BigInt 变字符串了
}
*/

通过灵活运用 replacerspace,我们不仅能控制 JSON 字符串的内容,还能控制它的可读性,这对于构建健壮和高效的 Web 应用来说,是不可或缺的技能。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

457

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

549

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

337

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

82

2025.09.10

数据类型有哪几种
数据类型有哪几种

数据类型有整型、浮点型、字符型、字符串型、布尔型、数组、结构体和枚举等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

338

2023.10.31

php数据类型
php数据类型

本专题整合了php数据类型相关内容,阅读专题下面的文章了解更多详细内容。

225

2025.10.31

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

138

2026.02.12

string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1051

2023.08.02

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

26

2026.03.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
最新Python教程 从入门到精通
最新Python教程 从入门到精通

共4课时 | 22.5万人学习

Django 教程
Django 教程

共28课时 | 5万人学习

SciPy 教程
SciPy 教程

共10课时 | 1.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号