0

0

JavaScript的JSON.parse和JSON.stringify有什么作用?

畫卷琴夢

畫卷琴夢

发布时间:2025-07-12 16:06:02

|

1257人浏览过

|

来源于php中文网

原创

json.parse 用于将 json 字符串转换为 javascript 对象,而 json.stringify 则将 javascript 值转换为 json 字符串。1. json.parse(text[, reviver]):将 json 格式字符串反序列化为对象,支持可选的 reviver 函数用于处理键值对;2. json.stringify(value[, replacer[, space]]):将对象序列化为 json 字符串,replacer 控制属性筛选或转换,space 控制缩进格式;3. 它们解决了数据在不同环境间通信和持久化的关键问题;4. 使用中常见问题包括非法格式导致解析失败、循环引用引发错误、特殊类型如函数/date/map/bigint 被忽略或转换异常;5. 可通过自定义 replacer 处理循环引用,利用 tojson 或手动转换处理特殊类型数据。正确使用这两个方法能有效提升数据操作的安全性和灵活性。

JavaScript的JSON.parse和JSON.stringify有什么作用?

JSON.parseJSON.stringify 是 JavaScript 中用于处理 JSON(JavaScript Object Notation)数据的两个核心方法。简单来说,JSON.parse 的作用是将一个 JSON 格式的字符串转换成 JavaScript 对象或值,而 JSON.stringify 则恰恰相反,它负责将 JavaScript 对象或值转换成 JSON 格式的字符串。它们是数据在不同系统间(比如浏览器和服务器)或不同存储介质间(比如 localStorage)进行交换和持久化的关键工具

JavaScript的JSON.parse和JSON.stringify有什么作用?

解决方案

在我日常的开发工作中,JSON.parseJSON.stringify 简直是无处不在的基石。

JSON.parse(text[, reviver]):这个方法的核心功能就是“反序列化”。想象一下,你从服务器端接收到了一段文本数据,或者从浏览器的 localStorage 里读出了一个字符串。这些数据往往都是以 JSON 字符串的形式存在的。JavaScript 本身操作的是对象,而不是字符串,所以你需要 JSON.parse 把这些字符串“变回”可以被程序直接理解和操作的 JavaScript 对象(比如一个数组、一个普通对象、一个数字,甚至一个布尔值)。如果没有它,我们拿到手的就只是一堆字符,根本无法方便地访问其中的属性或元素。比如,一个用户列表的 JSON 字符串,经过 JSON.parse 后,我们就能像操作普通 JavaScript 数组一样,用 userList[0].name 这样的方式去获取数据了。它还有一个可选的 reviver 参数,这是一个函数,你可以在解析过程中对每个键值对进行处理,比如把特定格式的日期字符串转换回 Date 对象,这在处理复杂数据时非常有用,但说实话,日常开发中我用得不算特别频繁,更多时候还是直接解析。

立即学习Java免费学习笔记(深入)”;

JavaScript的JSON.parse和JSON.stringify有什么作用?

JSON.stringify(value[, replacer[, space]]):与 parse 相反,stringify 的任务是“序列化”。当我们需要把一个 JavaScript 对象发送给服务器(比如提交表单数据),或者想把它存储在 localStoragesessionStorage 里时,就必须把它转换成一个字符串。因为网络传输和大多数持久化存储都只认字符串。JSON.stringify 会把你的 JavaScript 对象(或数组、数字、布尔值等)转换成符合 JSON 规范的字符串。这个过程听起来简单,但它会聪明地处理各种数据类型:对象和数组会被转换为相应的 JSON 对象和数组,字符串、数字、布尔值和 null 会直接转换。但要注意,像函数、undefinedSymbol 值在对象属性中时,它们会被忽略掉;在数组中则会被转换为 null。它也有两个可选参数:replacer 可以是一个函数或一个数组,让你选择性地序列化对象的属性,或者在序列化过程中对值进行转换;space 参数则可以控制输出字符串的缩进,这对于调试或生成可读性更高的 JSON 文件非常有用,比如 JSON.stringify(obj, null, 2) 会让输出的 JSON 带有两格缩进,看起来整洁多了。

为什么我们需要JSON.parse和JSON.stringify?

在我看来,这两个方法的存在,根本上是为了解决“数据通信和持久化”这个核心问题。你想啊,JavaScript 对象是内存里的一个结构,它有复杂的引用关系,有方法,有各种类型的数据。但当你想把这些数据从浏览器发到服务器,或者存到硬盘里,甚至只是在不同的浏览器窗口之间传递,直接传递内存里的对象是不可能的。网络协议、文件系统或者 localStorage 它们都只认文本字符串。

JavaScript的JSON.parse和JSON.stringify有什么作用?

JSON 作为一种轻量级的数据交换格式,它的设计初衷就是为了方便机器解析和生成,同时也保持了人类的可读性。它基于 JavaScript 的对象字面量语法,所以对 JavaScript 来说,解析和生成 JSON 尤其方便。JSON.parseJSON.stringify 就是这座桥梁,它们负责将 JavaScript 世界里活生生的对象,安全地“打包”成字符串,以便穿越网络或被存储,然后在需要的时候,再把这些字符串“解包”还原成对象。没有它们,我们的 Web 应用就无法有效地与后端交互,也无法在用户关闭浏览器后保留数据。这就像是给数据穿上了一层“传输服”和“存储服”,让它们能够安全地跨越不同的环境。

JSON.parse和JSON.stringify在使用中常见哪些坑?

这俩兄弟虽然好用,但用起来也确实有些小脾气,不注意就可能踩坑。

JSON.parse 的最大雷区就是输入不是一个合法的 JSON 字符串。如果传给它的字符串格式不对,比如少了个引号,或者多余的逗号,它就会毫不留情地抛出一个 SyntaxError。我记得有一次,后端返回的数据不是标准的 JSON,而是带了注释或者其他非 JSON 字符,导致前端直接崩溃。所以,在解析外部数据时,最好用 try...catch 包裹起来,做好错误处理,不然用户体验会很差。另外,虽然不是常见的坑,但从安全性角度考虑,如果 JSON.parse 的输入源不可信,要小心潜在的 JSON 注入攻击,尽管这在现代浏览器环境中通常不是直接的执行代码问题,更多是数据完整性和逻辑漏洞。

JSON.stringify 的坑就更多样了:

  1. 循环引用(Circular References):这是最常见的,也是最让人头疼的。如果你的 JavaScript 对象中存在循环引用,比如 obj.a = obj,或者 obj1.ref = obj2obj2.ref = obj1,那么 JSON.stringify 在尝试将它转换为字符串时会陷入无限循环,最终抛出 TypeError: Converting circular structure to JSON 错误。这在处理复杂的 DOM 结构或图数据时尤其容易遇到。
  2. 数据类型丢失或转换
    • 函数、undefinedSymbol:当它们作为对象属性的值时,JSON.stringify 会直接忽略这些属性。如果是数组中的元素,它们会被转换为 null。这意味着如果你想序列化一个包含这些类型数据的对象,它们会“消失”。
    • Date 对象Date 对象会被转换为 ISO 格式的字符串(例如 "2023-10-27T10:00:00.000Z")。当你 parse 回来时,它仍然是一个字符串,而不是 Date 对象。如果你需要 Date 对象,就得手动转换。
    • RegExp 对象RegExp 对象会被序列化为空对象 {}
    • MapSet 等复杂数据结构:这些 ES6 新增的数据结构也不会被正确序列化,它们会被序列化为空对象 {}
    • 大整数(BigInt)JSON.stringify 不支持 BigInt 类型,会抛出 TypeError
  3. 属性顺序不保证:虽然现代 JavaScript 引擎通常会保留简单对象的属性顺序,但 JSON 规范本身不保证对象属性的顺序。这意味着在某些极端情况下,如果你的逻辑依赖于属性的特定顺序,可能会出问题。
  4. 精度问题:对于非常大的数字,JavaScript 的 Number 类型是双精度浮点数,超过 Number.MAX_SAFE_INTEGER (2^53 - 1) 的整数或非常小的浮点数可能会在序列化和反序列化过程中丢失精度。

如何处理JSON.stringify的特殊数据类型和循环引用?

面对 JSON.stringify 的这些“坑”,我们当然有办法去填平它们,通常会用到它的可选参数 replacer 和一些自定义逻辑。

行盟APP1.0 php版
行盟APP1.0 php版

行盟APP是结合了通信和互联网的优势,加之云计算所拥有的强大信息资源,借助广大的终端传递服务,潜在的拥有巨大商机。她到底是什么,又有什么作用?她是一款手机应用软件;她是一款专门为企业服务的手机应用软件;她是一款能够将企业各种信息放入其中并进行推广传播的手机应用软件!只要轻轻一点,企业的简介,产品信息以及其他优势就能最快最大限度的透过手机展现在客户的眼前,一部手机,一个APP,你面对的将是一个6亿&

下载

处理特殊数据类型:

  1. Date 对象:最常见的做法是在 stringify 之前,手动将 Date 对象转换为你想要的字符串格式(比如 getTime() 获取时间戳,或者 toISOString()),然后在 parse 之后,利用 reviver 函数或者手动遍历,将这些字符串再转换回 Date 对象。

    // 序列化前手动转换
    const objWithDate = {
        name: "Test",
        created: new Date()
    };
    const jsonString = JSON.stringify({
        ...objWithDate,
        created: objWithDate.created.getTime() // 转换为时间戳
    });
    
    // 反序列化时手动转换(或者用reviver)
    const parsedObj = JSON.parse(jsonString);
    parsedObj.created = new Date(parsedObj.created);

    或者使用 toJSON() 方法:如果你的对象上定义了 toJSON() 方法,JSON.stringify 在序列化该对象时会调用这个方法,并序列化其返回值。这是一个很优雅的方式来定制对象的序列化行为。

    class MyDateWrapper {
        constructor(date) {
            this.date = date;
        }
        toJSON() {
            return this.date.toISOString(); // 自定义序列化行为
        }
    }
    const data = {
        eventTime: new MyDateWrapper(new Date())
    };
    console.log(JSON.stringify(data)); // 输出 {"eventTime":"2023-10-27T...Z"}
  2. MapSet 等复杂结构:这些需要你手动将它们转换成数组或普通对象。比如,Map 可以转换为键值对数组 Array.from(map.entries())Set 可以转换为数组 Array.from(set)。反序列化时再手动重建。

  3. 函数、undefinedSymbolBigInt:如果这些数据确实需要被序列化,你就得在 stringify 之前,将它们显式地转换为可序列化的类型,比如字符串。

    • BigInt:可以转换为字符串 value.toString()
    • 函数:转换为函数体的字符串 func.toString() (但通常不建议序列化函数)。
    • undefinedSymbol:通常这些是设计上就不应该被序列化的,如果非要,也只能转换为特定的字符串标记。

处理循环引用:

解决循环引用最常用的方法是使用 replacer 参数。replacer 可以是一个函数,它会在序列化过程中遍历对象的每个键值对。在这个函数中,我们可以检测当前值是否已经被序列化过(即是否构成循环引用),如果发现循环,就返回一个替代值(比如 undefined 让它被忽略,或者一个表示循环的字符串)。

一个常见的 replacer 实现方式是利用 WeakSetSet 来追踪已经访问过的对象:

const getCircularReplacer = () => {
    const seen = new WeakSet(); // 使用 WeakSet 避免内存泄漏
    return (key, value) => {
        if (typeof value === "object" && value !== null) {
            if (seen.has(value)) {
                return; // 发现循环引用,返回 undefined (此属性将被忽略)
                // 或者返回一个标记字符串,如: return '[Circular]';
            }
            seen.add(value);
        }
        return value; // 正常返回
    };
};

const a = {};
const b = {};
a.b = b;
b.a = a; // 循环引用

try {
    const jsonString = JSON.stringify(a, getCircularReplacer());
    console.log(jsonString); // 输出 {"b":{}} 或 {"b":{"a":"[Circular]"}} (取决于返回策略)
} catch (e) {
    console.error("序列化失败:", e.message); // 不会抛出错误了
}

这个 getCircularReplacer 函数会创建一个 WeakSet 来存储所有已经访问过的对象。当 replacer 函数被调用时,如果当前 value 是一个对象且已经在 seen 中,就说明存在循环引用,此时我们可以选择忽略该属性(返回 undefined)或者用一个自定义的字符串来标记它。这样就能避免 TypeError 的抛出,让序列化过程顺利完成。

总之,JSON.parseJSON.stringify 是 JavaScript 中处理数据交换和持久化的利器,理解它们的行为特性,尤其是那些“坑”点,并学会利用 replacerreviver 等高级用法,能让我们在开发中更加游刃有余。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

559

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

438

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

776

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

480

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

574

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

1091

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

659

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

554

2023.09.20

拼多多赚钱的5种方法 拼多多赚钱的5种方法
拼多多赚钱的5种方法 拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

31

2026.01.26

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
如何进行WebSocket调试
如何进行WebSocket调试

共1课时 | 0.1万人学习

TypeScript全面解读课程
TypeScript全面解读课程

共26课时 | 5万人学习

前端工程化(ES6模块化和webpack打包)
前端工程化(ES6模块化和webpack打包)

共24课时 | 5.1万人学习

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

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