javascript中var的用法 javascript中的json怎么读
json.parse 用于将 json 字符串转换为 javascript 对象,而 json.stringify 则将 javascript 值转换为 json 字符串。 1. json.parse(text
JSON.parse 和 JSON.stringify 是 JavaScript 中用于处理 JSON(JavaScript Object Notation)数据的两个核心方法。也就是说,JSON.parse 的作用是将 JSON 格式的字符串转换成 JavaScript 对象或值,而 JSON.stringify 则相反,它负责将 JavaScript 对象或值转换成简单的 JSON 格式的字符串。它们是在不同的系统间(比如浏览器和服务器)或不同的存储模块间转换数据。解决方案
在我日常的开发工作中,JSON.parse和JSON.stringify简直就是信号在的基石。
JSON.parse(text[, reviver]):这个方法的核心功能就是“反序列化”。想象一下,你从服务器端接收到了一段文本数据,或者从浏览器的localStorage里读取了一个字符串。这些数据往往都是JSON格式的JavaScript 本身操作是对象,而不是字符串,所以你需要 JSON.parse 把这些字符串“变回”可以被程序直接理解和操作 JavaScript 对象(比如一个数组、一个普通对象、一个数字,甚至一个布尔值)。如果没有它,我们拿到手的就只是一批字符,根本无法方便地访问其中的属性或元素。比如,一个用户列表的 JSON 字符串,经过 JSON.parse 后,就能像操作普通 JavaScript 读取我们一样,用 userList[0].name 这样的方式去获取数据了。还有一个任选的恢复器参数,这是一个函数,你可以在解析过程中对键值对进行处理,比如把特定格式的日期字符串转换回日期对象,这在处理复杂数据时非常有用,但说实话,日常开发中我用得不是特别密集,更多的时候还是直接解析。
立即学习“Java免费学习笔记(深入)”;
JSON.stringify(value[,replacer[,space]]):与parse替换,stringify的任务是“序列化”。当我们需要把一个 JavaScript 对象发送给服务器(比如提交表单数据),或者想把它存储在 localStorage 或 sessionStorage 中 里时,就必须把它转换成一个字符串。因为网络传输和大多数持久化存储都只认字符串。JSON.stringify 要把你的 JavaScript 对象(或数组、数字、布尔值等转换)转换成符合 JSON 规范的字符串。这个过程听起来很简单,但会聪明地处理各种数据类型:对象和导入会被转换为相应的 JSON 对象和导入,字符串、数字、布尔值和 null 会直接。但要注意,像函数、未定义或符号值在对象属性中时,它们会被忽略掉;在备份中基础上被转换为null。
它也有两个可选参数:replacer 可以是一个函数或一个备份,让你快速地序列化对象的属性,或者在序列化过程中对值进行转换;空间参数则控制输出字符串的压缩进,这对于调试或生成可执行性更高的 JSON 文件非常有用,比如 JSON.stringify(obj, null, 2) 可输出的 JSON标记了两格缩进,看起来整洁多了。为什么我们需要JSON.parse和JSON.stringify?
在我看来,这两个方法的存在,根本上是为了解决“数据通信和持久化”这个核心问题。你想啊,JavaScript对象是内存里的一个结构,它有复杂的关系引用,有方法,有各种类型的数据。但是当你想把这些数据从浏览器发到服务器,或者存到硬盘里,甚至只是在不同的浏览器窗口之间传送,直接传送内存里的对象是不可能的。网络协议、文件系统或者localStorage它们都只认文本字符串。
JSON作为一种轻量级的数据交换格式,它的设计最初主要是为了方便机器解析和生成,同时也保持了人类的可执行性。它基于 JavaScript JSON.parse 和 JSON.stringify 就是这么桥梁,它们负责将 JavaScript 世界里活生的对象,安全地“备份”成字符串,方便遍历网络或被存储,然后再在需要的时候,把这些字符串“解包”成对象。没有它们,我们的 Web 还原应用就无法有效地与交互交互,也无法在用户关闭浏览器后保留数据。这就相当于给数据上面了一层“传输服”和“存储服”,让它们能够安全地覆盖不同的环境。JSON.parse和JSON.stringify在使用中常见哪些坑?
这俩兄弟虽然好用,但用起来也确实有些小脾气,不就注意可能踩坑。
JSON.parse的最大雷区就是输入不是一个合法的JSON字符串。如果传给它的字符串格式不对,比如少了个引号,或者是多余的注释,它就会毫不留情地抛出一个 SyntaxError。我记得有一次,耳机返回的数据不是标准的 JSON,而是带了注释或者其他非 JSON 字符,导致前端直接崩溃。所以,在解析外部数据时,最好用 try...catch 覆盖起来,完成错误处理,否则用户体验会很差。另外,虽然不是常见的坑,但从安全性角度考虑,如果 JSON.parse 的输入源不可信,要小心潜在的 JSON 注入攻击,这在现代浏览器环境中通常不是直接的执行代码问题,更多的是数据中断和逻辑漏洞。
JSON.stringify的坑就更多了:循环引用(Circular References):这是最常见的,也是最让人头疼的。如果你的 JavaScript 对象中存在循环引用,比如 obj.a = obj,或者 obj1.ref = obj2 且 obj2.ref = obj1,那么 JSON.stringify 在尝试将其转换为字符串时会无限循环,最终抛出 TypeError: Converting Circle Structure to JSON 错误。这在处理复杂的 DOM结构或图表数据时尤其容易遇到。
类型丢失或转换:函数、未定义和符号值:当它们对象属性的值时,JSON.stringify 会直接忽略这些属性。如果是备份中的元素,它们会被转换为 null。这意味着如果你想序列化一个包含这些类型数据对象,它们会“消失”。数据对象:Date 对象会被转换为 ISO 格式的字符串(例如"2023-10-27T10:00:00.000Z")。当你解析回来时,它仍然是一个字符串,而不是 Date 对象。如果你是 Date 对象,就得手动转换。RegExp 对象:RegExp 对象会被序列化为空对象 {}。Map、Set 等复杂数据结构:ES6 新增的数据结构也不会被正确序列化,它们需要被序列化为空对象{}。大整数(BigInt):JSON.stringify 不支持 BigInt 类型,会引发 TypeError。属性顺序不保证:虽然现代 JavaScript 引擎通常会保留简单对象的属性顺序,但 JSON 规范本身不保证对象属性的顺序。这意味着在某些极端情况下,如果你的逻辑依赖于属性特定的顺序,可能会出问题。精度问题:对于非常大的数字,JavaScript的Number类型是双精度浮点数,超过Number.MAX_SAFE_INTEGER (2^53 - 1)的整数或非常小的浮点数可能会在序列化和反序列化过程中丢失精度。如何处理JSON.stringify的特殊数据类型和循环引用?
面对JSON.stringify的这些“坑”,我们当然有办法去填平它们,通常会用到它的任选参数替换器和一些自定义逻辑。
处理特殊数据类型:
Date对象:最常见的做法是在stringify之前,手动将Date对象转换为你想要的字符串格式(比如 getTime() 获取时间,或者 toISOString()),然后在 parse 之后,利用 reviver 函数或者手动转换,将这些字符串再转换回 Date 对象。// 转换序列化前手动 const objWithDate = { name: quot;Testquot;, 创建: 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)); // 输出{quot;eventTimequot;:quot;2023-10-27T...Zquot;}登录后复制
Map、Set等复杂结构:这些需要你手动转换为数据库或普通对象。比如,Map可以转换为键值对数据库Array.from(map.entries()),Set可以为数据库Array.from(set)。反序列化时再手动重建。
函数、undefined、Symbol、BigInt:如果这些数据确实需要被序列化,你就得在 stringify 转换之前进行转换,将它们显式地转换为可序列化的类型,可以比如字符串。BigInt:为字符串 value.toString()。函数:转换为函数体的字符串 func.toString() (但通常不建议序列化函数)。undefined 和 Symbol:通常这些是设计上不应该被序列化的,如果非要,也只能转换为特定的字符串标记。
处理循环引用:
解决循环引用最常用的方法是使用replacer参数。replacer可以是一个函数,它会在序列化过程中遍历对象的每个键值对。在这个函数中,我们可以检测当前值是否已经被序列化过(即是否构成循环引用),如果发现循环,就返回一个替代值(比如未定义使得被忽略,或者一个表示循环的字符串)。
一个常见的替换器实现方式是利用 WeakSet 或 Set 来追踪已经访问过的对象:const getCircularReplacer = () =gt; { const saw = new WeakSet(); // 使用 WeakSet 避免内存溢出 return (key, value) =gt; { if (typeof value === quot;objectquot; amp;amp; value !== null) { if (seen.has(value)) { return; //发现循环引用,返回 undefined (此属性将被忽略) // 或者返回一个标记字符串,如: return '[Circular]'; } saw.add(value); } return value; // 正常返回 };};const a = {};const b = {};a.b = b;b.a = a; // 循环引用try { const jsonString = JSON.stringify(a, getCircularReplacer()); console.log(jsonString); // 输出 {quot;bquot;:{}} 或 {quot;bquot;:{quot;aquot;:quot;[Circular]quot;}} (依赖返回策略)} catch (e) { console.error(quot;序列化失败:quot;, e.message); // 不会抛出错误了}登录后复制
这个 getCircularReplacer 函数会创建一个 WeakSet 来存储所有已访问过的对象。当 replacementr 函数被调用时,如果当前值为一个对象并且已经在看见中,就说明存在循环引用,此时我们可以忽略该属性(返回未定义)或者用一个自定义的字符串来标记它。这样就可以避免TypeError的行为推送,让序列化过程顺利完成。
总之,JSON.parse和JSON.stringify是JavaScript中处理数据交换和持久化的利器,它们的特性,尤其是那些“坑”点,并学会利用replacer和reviver 等高级的实现,让我们在开发中更加游刃有余。
以上就是JavaScript的JSON.parse和JSON.stringify有什么作用?的详细内容,更多请关注乐哥常识网其他相关文章!