你是否知道 JSON.stringify 的作用意义?

目录
文章目录隐藏
  1. 场景一:localStorage 的存储
  2. 场景二:对象的深拷贝
  3. 场景三:删除对象属性

当面试被问到你是否知道 JSON.stringify 的作用意义,我们该如何回答。查阅网上的八股文答案大概教你这样回答:

JSON.stringify(value,replacer,space)

它是一个用于序列化对象的方法,接受三个参数,第一个参数是要被序列化的对象,接受对象或数组类型。第二个参数用于标记需要序列化的属性,接受数组和函数类型。第三个参数用于描述序列化后的缩进字符数,用于美化格式。

当然以上的回答也没有错,不过面试官考察的更多是大家的实际应用能力以及实战场景,如果只回答八股文的内容,更多的只能体现大家的背诵能力而已,所以接下来我将给大家呈现 JSON.stringify 的实际应用场景。

场景一:localStorage 的存储

前端 localStorage 中只能接受字符串的存储类型,而且它是一个 KV 的结构,我们尝试模拟存储一个对象这种场景:

localStorage 的存储

我们会发现是存储失败的,我们没有办法把整个 obj 存储到 localStorage 中,所以在这种场景下,我们就需要用到 JSON.stringify,把对象先序列化再进行存储:

对象先序列化再进行存储

我们发现这样是可以存储成功的,我们只需要把存进去的对象再进行一次 JSON.parse:

对象再进行一次 JSON.parse

整个过程我们就可以把对象给存储进去,同时能提取出来,这样就 ok 了。

场景二:对象的深拷贝

JS 中的对象它都是一个引用的类型。

对象的深拷贝

如上图把 obj 赋予给 objA,当改动 objA 里面的 a 属性,本质上其实在 obj 里面的 a 属性它也被改动了,那怎么样解决这个问题呢?这里可以利用 JSON.stringify 以及 JSON.parse 给做一次对象的深复制,具体应用是这样的:

利用 JSON.stringify 以及 JSON.parse 给做一次对象的深复制

我们用 JSON.stringify 序列化一次这个 obj,再把它解析出来,最后的结果赋予给 objB,这时候我改动 objB 里面的 a 属性,但 obj 里面的属性并没有进行变化,这样的话我们就成功的做了一次深度复制,这也是 JSON.parse 一个巧妙的应用。

场景三:删除对象属性

如果我们需要删除对象中某个属性,也可以利用 JSON.stringify 去实现,比如说下面这个对象我们要把 b 属性删掉,可以利用  JSON.stringify 的第二个参数去巧妙应用:

删除对象属性

第二个参数接受一个方法,方法接受两个参数,一个是 key,一个是 value,我们可以在里面写逻辑,如果 key===’b’,这时候我们返回 undefine,否则的话我们把 value 返回,这时候我们就可以得到一个没有 b 属性的一个序列化的字符串,我们再把这个字符串给 JSON.parse 回来,就可以得到消除 b 之后的一个对象,这也是 JSON.stringify 的一个巧妙应用。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 你是否知道 JSON.stringify 的作用意义?

发表回复