首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JSON.stringify驯服循环引用的对象

在写Tab组件持久化功能时: localStorage.setItem('tabs',JSON.stringify(tabs)) 遇到如下的报错: 看意思应该是产生了循环引用的结构,经查阅资料和实践做个记录...var circularReference = {otherData: 123}; circularReference.myself = circularReference; 此时到控制台里面运行一下: JSON.stringify...幸好JSON.stringify方法提供了便利,语法如下: JSON.stringify(value[, replacer[, space]]) replacer可以作为一个函数传入,且接受key和value...作为入参,如下: JSON.stringiify({},function(key,value){ // do sth }) 那解决方案就有啦: JSON.stringify(circularReference...,vue-devtools内部也使用它) flatted (上面库的继承者) json-stringify-safe cycle.js

6.6K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    将对象转换为JSON字符串,即手写JSON.stringify

    NaN、Function、null会返回null,但是呢,function会被过滤掉 Infinity会转为null 如果是数组的话,返回的是数组的序列化 string返回原始值 number、boolean...则返回string Map/Set/WeakMap/WeakSet会返回空对象{} 接受三个参数,第一个是要序列化的变量,第二个是function/array,第三个是间距 上代码: function...undefined, null, NaN, ], map: map, set: map, weakMap: weakMap, weakSet: weakSet, } 使用JSON.stringify...:["Jerry",123,null,null,null,null,null],"map":{},"set":{},"weakMap":{},"weakSet":{}}' 使用stringify得到的是...不是很完善的一个方法,和原生JSON.stringify还是有一定的差距,JSON.stringify是可以接受三个参数的,我这边暂不支持,后续再加吧。

    29330

    如何提升JSON.stringify()的性能?

    需要先确定对象的结构信息; 根据其结构信息,为该种结构的对象创建“定制化”的stringify方法,其内部实际是通过字符串拼接生成结果的; 最后,使用该“定制化”的方法来 stringify 对象即可。...3.1.1. scheme 的定义方式 fast-json-stringify 使用了 JSON Schema Validation 来定义(JSON)对象的数据格式。...这种 scheme 的巧妙之处在于,这样定义之后,我们可以先把 scheme JSON.stringify一下,然后“扣去”所有类型值,最后等着我们的就是把实际的值直接填充到 scheme 对应的类型声明处...,因此可以根据 prop 访问到对象中某个属性的值,循环遍历数组,将其与对应的 chunks 拼接即可。...,模版方法里会对属性与值进行字符串拼接(显然,属性访问与字符串拼接的效率要高多了); 最后开发者调用返回的方法来 stringify Object 即可。

    1.4K10

    Javascript的JSON.stringify()知多少?

    因为字段中经过JSON.stringify后的字符串对象缺少value key,导致后端parse之后无法正确读取value值,进而报接口系统异常,用户无法进行下一步动作。...JSON.stringify() JSON.stringify是日常开发中经常用到的JSON对象中的一个方法,用于将一个 JavaScript 对象或值转换为 JSON 字符串,如果指定了一个 replacer...函数类型:则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理; 数组类型:则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中; null或未提供:则对象所有的属性都会被序列化...注意: 循环引用的对象(对象之间相互引用,形成无限循环)执行此方法,会抛出错误。 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。...undefined、任意的函数以及symbol值,在序列化过程中会被忽略(出现在非数组对象的属性值中时)或者被转换成 null(出现在数组中时)。

    1.3K00

    JSON.parse,JSON.stringify 深浅拷贝的缺陷

    JSON.parse,JSON.stringify 深浅拷贝的缺陷 经常使用 JSON.parse, JSON.stringify 的小伙伴都知道,他们两个可以用于深拷贝对象,但是可能会不太注意一些缺陷...,是又一次我使用他们去深拷贝对象,我发现有些属性莫名其妙的丢失了,之前没有太深究其弊端,今天趁着有空深究一下这些弊端。...首先我们来看下代码: let deepClone = function(obj) { return JSON.parse(JSON.stringify(obj)) } let a = {...,我们可以知道: 不会拷贝对象上的 value 值为 undefined 和 函数的键值对 NaN,无穷大,无穷小会被转为 null 自定义对象测试 let Ken = function() {...-01-14T06:47:12.337Z" 总结 取不到值为 undefined 的 key NaN 和 无穷大,无穷小转变为 null 取不到原型的内容 date 对象转变为 date 字符串

    95220

    你不知道的JSON.stringify

    [bmuwt4me9c.gif] 点击上方蓝色字体,关注我们 最近使用 Vue 写后台管理系统,在做 Tab 组件的持久化时遇到一个问题: localStorage.setItem('tabs',JSON.stringify...幸好 JSON.stringify 方法提供了便利,语法如下: JSON.stringify(value[, replacer[, space]]) replacer 可以作为一个函数传入,且接受 key...和 value 作为入参,如下: JSON.stringiify({},function(key,value){ // do sth }) 那解决方案就有啦: JSON.stringify(circularReference...,这里xxx是什么条件就是什么 return } return value }) 每次需要定位 key 值,如果嫌麻烦还有更简便的方法: const getCircularReplacer...: circular-json (只维护,vue-devtools 内部也使用它) flatted (上面的继承者) json-stringify-safe cycle.js

    93620

    前端 JavaScript 中 JSON.stringify() 的基本用法

    前言 在开发工作中,我们可能会碰到这样的需求:需要将某个对象内容弹窗显示或者保存在文件中,这时候如果你直接弹窗的话,很可能就是下面这样的:[image-20210629184729132] 因为很多接口它对参数有要求...这时候,就需要我们将对象转换为字符串进行输出,JSON.stringify() 方法就可以帮我们实现将对象转为字符串的过程。...方法描述 JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串,如果指定了一个 replacer 函数,则可以选择性地替换值,或者指定的 replacer...作为函数,它有两个参数,键(key)和值(value),它们都会被序列化。 在开始时, replacer 函数会被传入一个空字符串作为 key 值,代表着要被 stringify 的这个对象。...随后每个对象或数组上的属性会被依次传入。 函数应当返回JSON字符串中的value, 如下所示: 如果返回一个 Number,转换成相应的字符串作为属性值被添加入 JSON 字符串。

    87910

    JSON.stringify方法的5个秘密功能

    JSON.stringify()方法将JavaScript对象或值转换为JSON字符串。 作为JavaScript开发人员,JSON.stringify()是用于调试的最常用功能。...因此,我们使用JSON.stringify()首先将对象转换为字符串,然后像这样在控制台中进行打印。...当对象内容变大时,难度增加。 stringify函数的第二个参数就要派上用场了。让我们再次重写代码并查看结果。...console.log(JSON.stringify(product,['name']); // 结果 {"name" : "Cake"} 解决了问题,而不是打印整个JSON对象,我们可以通过将所需的键作为数组传递给第二个参数来仅打印所需的键...JSON.stringify返回此函数的结果并将其字符串化,而不是将整个对象转换为字符串。

    76610

    你不知道的 JSON.stringify() 的威力

    JSON.stringify() 九大特性 JSON.stringify()第一大特性 对于 undefined、任意的函数以及 symbol 三个特殊的值分别作为对象属性的值、数组元素、单独的值时 JSON.stringify...) 作为单独的值进行序列化时都会返回 undefined JSON.stringify() 第一大特性总结 undefined、任意的函数以及 symbol 作为对象属性值时 JSON.stringify...直接上代码: JSON.stringify(NaN) JSON.stringify() 第六大特性 关于基本类型的序列化: 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。...总结 JSON.stringify() 九大特性: 一、对于 undefined、任意的函数以及 symbol 三个特殊的值分别作为对象属性的值、数组元素、单独的值时的不同返回结果。...undefined、任意的函数以及 symbol 作为对象属性值时 JSON.stringify() 跳过(忽略)对它们进行序列化 undefined、任意的函数以及 symbol 作为数组元素值时,JSON.stringify

    88030

    【JS】261- 如何提升JSON.stringify()的性能?

    需要先确定对象的结构信息; 根据其结构信息,为该种结构的对象创建“定制化”的stringify方法,其内部实际是通过字符串拼接生成结果的; 最后,使用该“定制化”的方法来 stringify 对象即可。...3.1.1. scheme 的定义方式 fast-json-stringify 使用了 JSON Schema Validation 来定义(JSON)对象的数据格式。...这种 scheme 的巧妙之处在于,这样定义之后,我们可以先把 scheme JSON.stringify一下,然后“扣去”所有类型值,最后等着我们的就是把实际的值直接填充到 scheme 对应的类型声明处...,因此可以根据 prop 访问到对象中某个属性的值,循环遍历数组,将其与对应的 chunks 拼接即可。...,模版方法里会对属性与值进行字符串拼接(显然,属性访问与字符串拼接的效率要高多了); 最后开发者调用返回的方法来 stringify Object 即可。

    1.6K10
    领券