由于JSON.stringify的错误使用，他负责的其中一个业务模块上线后出现了bug，导致某个页面无法使用，进而影响用户体验，差点让他失去年终奖。 在这篇文章中，我将分享这个悲伤的故事。...产品经理先是抱怨：项目中有一个bug，用户无法提交表单，客户抱怨这个。请开发组尽快修复。 然后测试工程师说：我之前测试过这个页面，为什么上线后就不行了？...因此，此类数据上传到服务器后，服务器无法解析 value 字段，进而导致错误。...7、 所有其他 Object 实例（包括 Map、Set、WeakMap 和 WeakSet）将仅序列化其可枚举的属性。 8、找到循环引用时抛出TypeError（“循环对象值”）异常。...9、 尝试对 BigInt 值进行字符串化时抛出 TypeError（“BigInt 值无法在 JSON 中序列化”）。 自己实现 JSON.stringify 理解一个函数的最好方法是自己实现它。
//注意目标对象不能为null或undefined Object.assign(null); // TypeError: Cannot convert undefined or null to...JSON.stringify()方法将对象转化为字符串，但只会处理简单属性和简单属性数组，constructor属性丢失了 如果obj里面有时间对象，则JSON.stringify后再JSON.parse...如果obj里有RegExp(正则表达式的缩写)、Error对象，则序列化的结果将只得到空对象； 如果obj里有函数，undefined，则序列化的结果会把函数或 undefined丢失； 如果obj里有...NaN、Infinity和-Infinity（正无穷和负无穷），则序列化的结果会变成null。...如果对象中存在循环引用的情况也无法正确实现深拷贝； 4.自定义对象数组深拷贝 function deepClone(obj) { if (typeof obj !
value 将要序列化成 一个 JSON 字符串的值。...replacer (可选) 如果该参数是一个「函数」，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理。...异常 当在循环引用时会抛出异常TypeError ("cyclic object value")（循环对象值） 当尝试去转换 BigInt类型的值会抛出TypeError ("BigInt value...() 作为单独的值进行序列化时都会返回 undefined JSON.stringify(function a (){console.log('a')}); // undefined JSON.stringify...(undefined); // undefined JSON.stringify(Symbol('dd')); // undefined Date 对象 JSON.stringify() 将会正常序列化
、各种数据类型都可以拷贝，引用类型不是深拷贝 它不会拷贝对象的继承属性； 它不会拷贝对象的不可枚举的属性； 不可以拷贝对象中的对象； 可以拷贝 Symbol 类型的属性； 无法正确拷贝属性和属性 可以拷贝...、各种数据类型都可以拷贝，引用类型不是深拷贝 JSON.parse(JSON.stringfiy())，不完全深拷贝 拷贝的对象的值中如果有函数、undefined、symbol 这几种类型，经过 JSON.stringify...序列化之后的字符串中这个键值对会消失； 拷贝 Date 引用类型会变成字符串； 无法拷贝不可枚举的属性； 无法拷贝对象的原型链； 拷贝 RegExp 引用类型会变成空对象； 对象中含有 NaN、Infinity...以及 -Infinity，JSON 序列化的结果会变成 null； 无法拷贝对象的循环引用，如果对象中有循环引用，会报错： Uncaught TypeError: Converting circular...，如果有循环引用会报错栈溢出 function cloneDeep(obj) { let objClone = obj.constructor === Array ?
但是效果跟上面没有差别,所以我们不再细说了.前端进阶面试题详细解答2.深克隆2.1 JSON.parse方法前几年微博上流传着一个传说中最便捷实现深克隆的方法,JSON对象parse方法可以将JSON字符串反序列化成...JS对象，stringify方法可以将JS对象序列化成JSON字符串,这两个方法结合起来就能产生一个便捷的深克隆.const newObj = JSON.parse(JSON.stringify(oldObj..., oldObj.a); // TypeError: Converting circular structure to JSON对象的循环引用会抛出错误.2.2 构造一个深克隆函数我们知道要想实现一个靠谱的深克隆方法...JS对象，stringify方法可以将JS对象序列化成JSON字符串,这两个方法结合起来就能产生一个便捷的深克隆.const newObj = JSON.parse(JSON.stringify(oldObj..., oldObj.a); // TypeError: Converting circular structure to JSON对象的循环引用会抛出错误.2.2 构造一个深克隆函数我们知道要想实现一个靠谱的深克隆方法
== "function") throw TypeError(); 8 function f(){} 9 f.prototype = p; 10 return new f()...in 4 console.log('name' in people) //true 5 console.log('x' in people) //false 6 7 //遍历属性，使用for/in 循环语句...（六）序列化对象JSON 对象序列化，即将对象的状态转换为字符串，也可将字符串还原为对象。...JS提供了JSON.stringify()和JSON.parse()来序列化和还原对象，这些方法都使用JSON作为数据交换格式。...1 var people = {name:'小明',weight:35,hobbies:'旅游'} 2 3 var p = JSON.stringify(people) //序列化对象 4 console.log
❞ image.png 「直接错误原因」 ❝非必填情况下，signInfo字段中经过JSON.stringify后的字符串对象缺少value key，导致后端parse之后无法正确读取value值，进而报接口系统异常...，用户无法进行下一步动作。...之后的数据,少了value key,导致后端无法读取value值进行报错 // 具体原因是`undefined`、`任意的函数`以及`symbol值`，出现在`非数组对象`的属性值中时在序列化过程中会被忽略...异常[2] 当在循环引用时会抛出异常TypeError ("cyclic object value")（循环对象值） 当尝试去转换 BigInt 类型的值会抛出TypeError ("BigInt value...(alsoHuge)) // TypeError: Do not know how to serialize a BigInt 手写一个JSON.stringify ❝终于重新学完JSON.stringify
由于 JSON.stringify 的错误使用，他负责的其中一个业务模块上线后出现了 bug，导致某个页面无法使用，进而影响用户体验，差点让他失去年终奖。 在这篇文章中，我将分享这个悲伤的故事。...产品经理先是抱怨：项目中有一个bug，用户无法提交表单，客户抱怨这个。请开发组尽快修复。 然后测试工程师说：我之前测试过这个页面，为什么上线后就不行了？...因此，此类数据上传到服务器后，服务器无法解析 value 字段，进而导致错误。...7、 所有其他 Object 实例（包括 Map、Set、WeakMap 和 WeakSet）将仅序列化其可枚举的属性。 8、找到循环引用时抛出TypeError（“循环对象值”）异常。...9、 尝试对 BigInt 值进行字符串化时抛出 TypeError（“BigInt 值无法在 JSON 中序列化”）。 自己实现 JSON.stringify 理解一个函数的最好方法是自己实现它。
比如说，它无法处理函数、undefined、Symbol 等特殊类型的数据，这些数据在转换成 JSON 字符串时会被忽略掉。此外，如果对象中存在循环引用，JSON.stringify 也会报错。...并不会返回 JSON 字符串，而是直接返回 undefined，表示这些值无法被序列化。...处理 Map、Set 等对象 类似地，对于 Map、Set 等对象，JSON.stringify 也只会序列化它们的可枚举属性，而这些对象的特殊数据结构本身不会被直接序列化。...循环引用的问题 当对象存在循环引用时，JSON.stringify() 会抛出错误，因为 JSON 不支持循环结构。...，这导致 JSON.stringify() 在处理时抛出了 TypeError 错误。
JSON.stringify 强大的第二个参数 replacer 这个参数是可选的，可以是一个函数，也可以是一个数组 当是一个函数的时候，则在序列化的过程中，被序列化的每个属性都会经过该函数的转换和处理...就会在序列化中被忽略的特性（后面我们会提到）。...JSON.stringify([undefined, Object, Symbol("")]); // '[null,null,null]' 一种是非数组对象，在序列化的过程中会被忽略。...console.log(resut) // {"x":"undefined","y":"function Object() { [native code] }","z":"Symbol(test)"} 包含循环引用的对象...(objA) 会报以下错误： Uncaught TypeError: Converting circular structure to JSON --> starting at object
对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误 我认为 JSON.stringify 能够返回字符串以外的东西是挺惊讶的。...带有 toJSON 函数的对象将被运行，而不是试图正常地序列化它们。但是如果 toJSON 返回上面的一个值，试图在顶层序列化它将导致 JSON.stringify 返回undefined。...JSON.stringify 也可能遇到问题，导致它抛出一个错误。在正常情况下，有四种情况会发生： 循环引用会导致抛出一个类型错误。...BigInts不能用 JSON.stringify 进行序列化，这些也会导致一个TypeError。...处理循环引用 根据个人经验，JSON.stringify 在传递循环引用时最容易出错。如果这对你来说是一个常见的问题，我推荐 json-stringify-safe 包，它能很好地处理这种情况。
因为字段中经过JSON.stringify后的字符串对象缺少value key，导致后端parse之后无法正确读取value值，进而报接口系统异常，用户无法进行下一步动作。...JSON.stringify(value[, replacer [, space]]) 复制代码 value：必填参数，需要序列化的JSON对象。 replacer：可选参数。...注意： 循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。...('Do not know how to serialize a BigInt') } if (isCyclic(data)) { throw new TypeError('...()》 《就因为JSON.stringify，我的年终奖差点打水漂了》 写在最后 我们平时开发中将JSON.stringify应用最多的可能就是浅层的对象进行深拷贝，也就是进行序列化处理。
本文会介绍如何实现 JSON.stringify() 方法。 JSON.stringify() 可以将对象或值转化为 JSON 字符串。...检测循环引用 循环引用指的是对象的结构是回环状的，不是树状的： // 下面的对象/数组存在循环引用 let obj = {}; obj.a = obj; let obj1 = { a: { b: {}...') } } }) console.log('不存在循环引用') } 在 JSON.stringify 的实现中，遍历 key 的过程已经在主代码完成了...方法，产生一个标准的序列化结果； 如果处理的 target 是对象字面量，则可以将它的每个 key-value 的序列化结果 push 到 res 中，最终再和 {、} 字符拼接，也同样会产生一个标准的序列化结果...if (type == "Object" || type == "Array") { if (currentParent.includes(obj)) { throw new TypeError
参考链接：https://blog.csdn.net/lgno2/article/details/124996065 对象属性的可枚举和不可枚举 for in 循环只能遍历可枚举的，如果含有 Symbol...，则无法遍历，会报错 Uncaught TypeError: obj is not iterable https://developer.mozilla.org/zh-CN/docs/Web/JavaScript...false false false false false false false 继承的 Symbol 键 true false false false false false false false JSON.stringify...(xxx),此方法也只能读取对象本身的可枚举属性，并序列化为JSON对象。
(tabs)) 上面代码报错: [f0np2w3fta.png] 看意思应该是产生了循环引用的结构，下面是不同浏览器对于这个类型错误报出错的形式： TypeError: cyclic object value...(Firefox) TypeError: Converting circular structure to JSON (Chrome and Opera) TypeError: Circular reference...(circularReference); // 报错信息如下 VM685:1 Uncaught TypeError: Converting circular structure to JSON...既然是由于循环引用导致的，那我们可以在发生循环引用的地方给切断。 那如何切断呢？...幸好 JSON.stringify 方法提供了便利，语法如下： JSON.stringify(value[, replacer[, space]]) replacer 可以作为一个函数传入，且接受 key
本文将详细介绍 JSON.stringify() 的属性、应用场景，并提供一个完整而优雅的实现，处理循环引用、特殊类型（如日期和正则表达式）以及性能相关的问题。...数据传输 当需要将 JavaScript 对象转换为字符串，以便在网络中传输给后端或其他系统时，可以使用 JSON.stringify() 进行序列化。...return value; } function replacer(key, value) { if (seen.has(value)) { throw new TypeError...注意事项 在使用 JSON.stringify() 时，需要注意以下事项： a. 循环引用 如果要序列化的对象存在循环引用，即对象之间相互引用，会导致无限递归的情况。...特殊类型 特殊类型（如日期和正则表达式）需要进行适当的处理，以确保正确的序列化和反序列化。 c. 性能优化 JSON.stringify() 可能会在处理大型对象或嵌套层次较深的对象时产生性能问题。
TypeError —— 创建一个error实例，表示错误的原因：变量或参数不属于有效类型。...关于序列化，有下面五点注意事项： 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。...' JSON.stringify("foo"); // '"foo"' JSON.stringify([1, "false", false]); //...'[1,"false",false]' JSON.stringify({ x: 5 }); // '{"x":5}' JSON.stringify({x: 5, y...在 RxTypeError 构造函数内部，会对传入的参数对象进行序列化处理，然后与 code 对应的错误信息进行拼接，最终生成完整异常信息。
的理解 什么是JSON JSON是Douglas Crockford[1]发明的一种数据结构。...//'{}' 当被序列化的值位于数组或对象中时，会发生更多不一致的行为。...TypeError错误 。...另一种情况时，当传递循环对象时，JSON.stringify会抛出错误。大多数情况下，JSON.stringify是相当宽容的。...它不会因为你违反了JSON的规则而使你的程序崩溃（除非是BigInt或循环对象）。
：JSON.parse(JSON.stringify())，这个方式实现深拷贝会因为序列化的诸多特性从而导致诸多的坑点：比如现在我们要说的循环引用问题。...// 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。...deepClone(obj) /** VM44:9 Uncaught TypeError: Converting circular structure to JSON --> starting...() at deepClone (:9:26) at :11:13 */ 对包含循环引用的对象（对象之间相互引用，形成无限循环...这也就是为什么用序列化去实现深拷贝时，遇到循环引用的对象会抛出错误的原因。 第九大特性 所有以 symbol 为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。
在写Tab组件持久化功能时： localStorage.setItem('tabs',JSON.stringify(tabs)) 遇到如下的报错： 看意思应该是产生了循环引用的结构，经查阅资料和实践做个记录...以下是不同浏览器对于这个类型错误报出错的形式： TypeError: cyclic object value (Firefox) TypeError: Converting circular structure...to JSON (Chrome and Opera) TypeError: Circular reference in value argument not supported (Edge) 举个例子...既然是由于循环引用导致的，那我们可以在发生循环引用的地方给切断。 那如何切断呢？...幸好JSON.stringify方法提供了便利，语法如下： JSON.stringify(value[, replacer[, space]]) replacer可以作为一个函数传入，且接受key和value
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
实时音视频
