JSON.stringify() 最佳实践：避免常见陷阱和优化性能 (jsonserver)

JSON.stringify() 最佳实践：避免常见陷阱和优化性能简介`JSON.stringify()` 是 javaScript 中一个强大的函数，用于将 JavaScript 对象或值转换为 JSON（JavaScript Object Notation）字符串格式。它在数据传输、存储和通信等许多场景中广泛使用。为了充分利用 `JSON.stringify()`，并避免潜在的陷阱，本文将介绍最佳实践以优化性能并确保生成有效且可靠的 JSON 字符串。避免常见陷阱循环引用当一个对象包含对自身或其祖先对象的引用时，就会发生循环引用。`JSON.stringify()` 无法处理此类引用，因为它会陷入无限递归循环。为了避免这种情况，请确保您的对象不包含循环引用。 js // 循环引用示例 const obj = {a: 1,b: obj // 引用自身 };JSON.stringify(obj); // 报错：最大调用栈大小超出单引号和双引号JSON 规范要求所有键和值都用双引号引起来。使用单引号或未加引号的键或值会导致解析错误。 js // 无引号键 const obj = { name: 'John' };JSON.stringify(obj); // 报错：意外字符 "n"非 JSON 值某些 JavaScript 值无法直接转换为 JSON，例如 `undefined`、`NaN` 和函数。尝试将其序列化将导致 `TypeError`。 js // 非 JSON 值示例 const obj = {a: undefined,b: NaN,c: () => {} // 函数 };JSON.stringify(obj); // 报错：TypeError: 循环的值不能转换为 JSON转换深度限制为了防止恶意输入导致堆栈溢出，一些 JSON 序列化库（例如某些浏览器实现）对转换深度设置了限制。当对象或数组嵌套层级太深时，可能会触发此限制。性能优化使用自定义转换器对于复杂的对象，使用自定义转换器可以提供更好的控制和更高的灵活性，例如过滤掉不需要的数据或转换日期对象。 js const customConverter = (KEY, value) => {if (key === 'date') {return value.toISOString();}return value; };JSON.stringify(obj, customConverter);避免不必要的转换频繁地调用 `JSON.stringify()` 可能很耗时。如果您正在使用 JSON 作为数据传输格式，请考虑在需要时才转换数据。使用原生 JSON.parse() 方法虽然第三方库提供了额外的功能，但使用 JavaScript 原生的 `JSON.parse()` 方法通常效率更高，因为它经过高度优化。异步序列化对于大型数据集，同步序列化可能需要大量时间。考虑使用 Web Workers 或其他异步技术来提高响应能力。 js const worker = new Worker('json-worker.js'); worker.postMessage(obj); worker.onmessage = (e) => {const json = e.data;// ... };压缩和解压缩传输 JSON 数据时，压缩它可以节省带宽。可以使用 GZIP、Brotli 等压缩算法来减少 JSON 字符串的大小。其他注意事项检查返回结果始终检查 `JSON.stringify()` 返回的结果，以确保它是一个有效的 JSON 字符串，并且不包含任何意外的错误。使用严格模式在严格模式下，JSON 字符串中的未终止字符串或语法错误将抛出异常。这有助于早期检测错误并避免无效 JSON。考虑使用 JSON5 或其他 JSON 变体对于不严格遵循 JSON 规范的数据，可以考虑使用 JSON5 或其他 JSON 变体，它们允许使用单引号、注释和未加引号的键。结论通过遵循这些最佳实践，您可以有效避免 `JSON.stringify()` 使用过程中常见的陷阱，并优化其性能。记住，了解您的特定用例并根据需要调整策略对于高效地处理 JSON 数据至关重要。遵循这些指南将使您能够充分利用 `JSON.stringify()`，确保您的应用程序快速、可靠且符合标准。

---

深拷贝的两种实现方式

浅拷贝只是创建了一个新的对象，复制了原有对象的基本类型的值，而引用数据类型只拷贝了一层属性，再深层的还是无法进行拷贝。如果其中一个对象改变了这个内存中的地址，肯定会影响到另一个对象

深拷贝则不同，对于复杂引用数据类型，将一个对象从内存中完整地拷贝出来一份给目标对象，并从堆内存中开辟一个全新的空间存放新对象，且新对象的修改并不会改变原对象，这两个对象是相互独立、不受影响的，彻底实现了内存上的分离

实现深拷贝，一般两种方式方式：

使用(());

手动实现

(())版本

()是最简单的深拷贝方法，其实就是把一个对象序列化成为JSON的字符串，并将对象里面的内容转换成字符串，最后再用()的方法将JSON字符串生成一个新的对象

constobj={name:nordon,info:{age:18}};//一行代码实现深拷贝constcopyObj=((obj));

虽然使用(())实现深拷贝非常简单、便捷，但是其却存在一些API层面的特点：

拷贝的对象的值中如果有函数、undefined、symbol这三种类型，经过序列化之后的字符串中这个键值对会消失

undefined、任意的函数以及symbol作为对象属性值时()跳过（忽略）对它们进行序列化

转换值如果有toJSON()函数，该函数返回什么值，序列化结果就是什么值，并且忽略其他属性的值

拷贝Date引用类型会变成字符串

无法拷贝不可枚举的属性

无法拷贝对象的原型链

拷贝RegExp引用类型会变成空对象

对象中含有NaN、Infinity以及-Infinity，JSON序列化的结果会变成null

无法拷贝包含循环引用的对象（对象之间相互引用，形成无限循环），会抛出错误

手动实现

由于(())实现深拷贝存在一定的不足，在业务开发中建议慎重使用，因此我们需要自己手动实现一版深拷贝

手动实现过程中需要解决的问题，也就是补齐(())不足的一个过程，上述已经阐述其不足，接下来直接上代码：

细节在代码中已注释

//判断是不是引用类型constisComplexDataType=(obj)=>{return(typeofobj===object||typeofobj===function)&&obj!==null}constdeepClone=function(obj,hash=newWeakMap()){//日期对象直接返回一个新的日期对象if(===Date)returnnewDate(obj);//正则对象直接返回一个新的正则对象if(===RegExp)returnnewRegExp(obj);//如果循环引用了就用weakMap来解决if((obj))(obj);letallDesc=(obj);//遍历传入参数所有键的特性letcloneObj=((obj),allDesc);//继承原型链(obj,cloneObj);for((obj)){cloneObj[key]=isComplexDataType(obj[key])&&typeofobj[key]!==function?deepClone(obj[key],hash):obj[key];}returncloneObj;};

深入理解JSON.stringify()

在实际开发中有着丰富的应用场景，尽管你可能已经熟悉了它的基本用法，但其实它隐藏着更多实用特性。 这些特性往往在不经意间发挥作用，值得深入理解。 如果你觉得这个话题略显枯燥，让我们通过几个有趣的场景来探索。 例如，深拷贝时，的deepCopy功能（如`((obj/arr))`）在处理引用类型数据时至关重要，它能确保新生成的对象与原对象在内存上独立，互不影响。 在服务端数据存储中，也十分关键。 比如，存储的canvas模板数据和Vue-amap的SVG路径信息，这时就需要序列化存储。 另外，localStorage和sessionStorage存储的数据必须先转化为字符串，否则可能出现存储失效的问题。 当从服务端接口获取Canvas或SVG数据时，能帮助解析这些数据，并在和vue-amap等组件中正确渲染。 此外，还能过滤数据和格式化输出，包括设置缩进，使其更易于阅读。 不过，遇到自引用对象时，会抛出“cyclic object value”错误，这时需要特殊处理，比如使用库。 对于具有相同属性但顺序不同的对象，的结果可能出乎意料，这需要额外注意。 在实际操作中，可能会遇到诸如数据库存储后属性消失、axios请求参数undefined消失等问题，这可能是由于replacer函数的过滤、属性设置或数据类型的特殊性导致的。 与localStorage的配合使用时，确保数据为字符串是关键。 通过上述内容，你应该对有了更深入的认识。 在遇到问题时，记得检查replacer、对象属性和数据类型，找出问题的根源。 加入我们的技术讨论小组，一起交流学习，提升前端开发技能吧！

JSON.stringify 报错 Invalid string length

最近，用户在使用 xuejianxianzun/PixivBatchDownloader 下载器时遇到了一个挑战：大量文件抓取后，在导出结果时， 函数抛出了 Invalid string length 的错误。 问题源于数据处理过程中，当处理大量对象时，生成的字符串超过了JavaScript引擎的长度限制，通常为2的29次方，即约512MB。 为解决这个限制，一个解决方案是将数据分解。 原有的做法是将整个数据集转换为一个字符串，现在改为逐个对象处理，将每个对象转换为字符串并存储在数组中。 这样，每个字符串的长度都将大大减少，从而避免了单个字符串过长导致的错误。 另外，如果不进行格式化，还可以进一步减小字符串长度和生成文件的体积。 通过这些策略，我们可以有效应对处理大容量数据时的长度限制问题。

JSON.stringify() 的使用

复制粘贴一下 ()三个参数的含义：

返回值：返回包含 JSON 文本的字符串。 从上面的参数说明中可以看到，第二个参数可以是一个函数或者数组，这给了我们很大的发挥空间。

stringify() 的第一个和第三个参数都好理解，所以下面主要说的是第二个参数。

当第二个参数为数组时，可作为条件筛选使用。 例如有如下对象：

如果我们只需要name属性，则可以这样：

这个特性只对对象的根属性生效，例如：

即使第二层上也有name属性，但在筛选时并不会选中。 当对一个数组进行转换时，会筛选数组第一层的每个值，例如：

基本上数组的用法就是如此了。

函数的发挥空间是很大的，理所当然地用法也就比较多了。 当第二个参数为函数时，stringify() 会给函数传递两个参数，参数值为每一个成员的键和值。 但跟数组参数不同的是，函数会处理所有层级上的每一个成员。 例如：

所有符合条件的内容都被修改了（注意『小红』是『小刚』的下一层）。 正是因为函数的这个特性，我们可以很方便地实现一些可能比较麻烦的功能。 比如上面的例子，如果不使用 stringify() 方法而想要修改所有层级上的age属性的值，就需要需要进行深循环。

上面的例子中，如果想要复制一份arr的数据，通常是进行深拷贝，但其实也可以使用stringify()，只需要配合 () 即可：

stringify() 不能处理值为函数的成员，当某个成员的值为函数时，在转换过程中会被自动排除，例如：

同样的，() 方法是不能处理函数格式的字符串的。

JSON.stringfy、JSON.parse 使用及注意问题

在JavaScript中，() 和 () 是处理JSON数据的两个关键工具。() 有多种用法：

而 () 则用于解析JSON字符串，传入自定义解析器提供灵活性，但需确保输入字符串为有效JSON格式。 比如，如果字符串不符合JSON规范，会引发错误。

总结，使用这两个方法时，要密切关注序列化和解析过程中可能遇到的循环引用、格式错误以及特殊类型转换等问题。

---

---

相关标签： 避免常见陷阱和优化性能、 JSON.stringify、 jsonserver、 最佳实践、

上一篇：JSONstringify应用场景数据存储通信和更多j

下一篇：JSONstringify的奥秘理解转换过程和选项jso