你不知道的JSON.parse

JSON.parse()方法用于将一个 JSON 字符串转换为对象。

语法

JSON.parse(text[, reviver])

参数说明:

text:必需, 一个有效的 JSON 字符串。

reviver: 可选,一个转换结果的函数, 将为对象的每个成员调用此函数。

返回值:

返回给定 JSON 字符串转换后的对象。

JSON.stringify()方法用于将 JavaScript 值转换为 JSON 字符串。

语法

JSON.stringify(value[, replacer[, space]])

参数说明:

value:

必需, 要转换的 JavaScript 值(通常为对象或数组)。

replacer:

可选。用于转换结果的函数或数组。

如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined,则排除成员。根对象的键是一个空字符串:""。

如果 replacer 是一个数组,则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时,将忽略 replacer 数组。

space:

可选,文本添加缩进、空格和换行符,如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格,如果 space 大于 10,则文本缩进 10 个空格。space 有可以使用非数字,如:\t。

返回值:

返回包含 JSON 文本的字符串。

那么JSON.parse(JSON.stringfy())有没有意义呢?把一个JSON字符串转为一个对象再转为JSON?

我们先来了解一下深拷贝与浅拷贝。

浅拷贝:只会将对象的各个属性进行依次复制,并不会进行递归复制。简单来说就是保存的不是value 值,而且引入的地址。

浅复制‘复制’的是引用的地址,如果我们在a中将地址2的值改变,在b中我们想要原始的值怎么办?

此时深复制来了,它会分配给新对象一个新的内存地址,将原对象的各个属性逐个复制出去,而且将原对象各个属性所包含的对象也依次采用深拷贝的方法递归复制到新对象上。

怎样进行深拷贝呢?

JSON.parse(JSON.stringfy())就可以实现深拷贝,用法简单,然而使用这种方法会有一些隐藏的坑:因为在序列化JavaScript对象时,所有函数和原型成员会被有意忽略。通俗点说,JSON.parse(JSON.stringfy(X)),其中X只能是Number, String, Boolean, Array, 基本数据类型,具体如何使用还要看业务场景了。

留几个问题:

为什么JSON.parse(JSON.stringfy())可以实现深拷贝呢?与其它方式相比那种拷贝方式效率更高兼容性更好呢?有兴趣也可以自己实现一个拷贝方法。

参考文献

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

http://jerryzou.com/posts/dive-into-deep-clone-in-javascript/

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180605G020RF00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券