JSON.stringify 方法

JSON 对象是我们经常使用的一种数据存储对象,它的适用范围非常广。

而 JSON.stringify 方法的使用频率也极高,合理使用 stringify 方法,我们可以实现很多简单需求:

  • 要实现对象的深拷贝时,我们可以用 JSON 对象的 JSON.stringify 和 JSON.parse 来拷贝一个完全一样的对象,而不会对原对象产生任何引用关系。
  • 在使用 localStorage 时,也会用到它,因为 localStorage 只能存储字符串格式的内容,所以,我们在存之前,将数值转换成 JSON字符串。

JSON.stringify

JSON.stringify 方法可以帮我们把一个对象或数组转换成一个 JSON字符串。

我们通常只会用到它的第一个参数,其实它还有另外两个参数,可以让它实现一些非常好用的功能。

语法:

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

参数:

  • value:将要被序列化的变量的值
  • replacer:替代器。可以是函数或者是数组:
    • 如果是一个函数,则value 每个属性都要经过这个函数的处理,该函数的返回值就是最后被序列化后的值。
    • 如果是一个数组,则要求该数组的元素是字符串,且这些元素会被当做value 的键(key)进行匹配,最后序列化的结果,是只包含该数组每个元素为key 的值。
  • space:指定输出数值的代码缩进,美化格式之用,可以是数字或者字符串:
    • 如果是数字(最大为10)的话,代表每行代码的缩进是多少个空格。
    • 如果是字符串的话,该字符串(最多前十个字符)将作显示在每行代码之前。

这时候,你应该知道了。我们可以用 JSON.stringify 来做序列化时的过滤,相当于我们可以自定义JSON.stringify 的解析逻辑。

使用函数过滤并序列化对象

javascript 复制代码
function replacer(key, value) {
    if (typeof value === "string") {
        return undefined;
    }
    return value;
}
var foo = {
    foundation: "Mozilla",
    model: "box",
    week: 45,
    transport: "car",
    month: 7
};
var jsonString = JSON.stringify(foo, replacer); // {"week":45,"month":7}

使用数组过滤并序列化对象

javascript 复制代码
const user = {
    name: "zollero",
    nick: "z",
    skills: ["JavaScript", "CSS", "HTML5"]
};
JSON.stringify(user, ["name", "skills"], 2); 
// "{//   "name": "zollero",//   "skills": [//     "JavaScript",//     "CSS",//     "HTML5"//   ]// }"

还有一个有意思的东西,是对象的toJSON 属性。

如果一个对象有toJSON 属性,当它被序列化的时候,不会对该对象进行序列化,而是将它的toJSON 方法的返回值进行序列化。

看下面的例子:

javascript 复制代码
var obj = {
    foo: "foo",
    toJSON: function () {
        return "bar";
    }
};
JSON.stringify(obj); 
// '"bar"'JSON.stringify({x: obj}); // '{"x":"bar"}'

总结

stringify 方法的重点和难点在于第二和第三个参数的灵活使用上,需要多加练习。

相关推荐
幸运小猿9 小时前
模拟慢上传-处理超时重试image 丢失线上问题
前端·javascript·html
速易达网络11 小时前
ECharts 图表制作完全指南:从零到可视化实战
前端·javascript·echarts
paopaokaka_luck12 小时前
灾害应急物资管理系统(AI应急助手、Echarts可视化数据看板、捐赠入库联动、 物资全流程管理、库存变动追溯、灾情资讯与互动反馈、物资发放公示)
java·前端·javascript·spring boot·mysql·tomcat·echarts
kyriewen12 小时前
我验了 7 种 sticky 失效说法:3 种根本不成立
前端·javascript·程序员
我命由我1234514 小时前
Python 实用操作 - 文件操作(打开与关闭文件、读取文件、文件写入)
java·开发语言·前端·javascript·数据库·python·java-ee
Momo__14 小时前
你写的 import 重试,从来没生效过
前端·javascript·typescript
tryCbest15 小时前
Vue3——第 11 篇:组合式 API(上)——setup 与响应式 API 深度解析
前端·javascript·vue.js
tryCbest16 小时前
Vue3——第 13 篇:计算属性与侦听器——computed 与 watch 的进化
前端·javascript·vue.js
用户1179536547816 小时前
企业团队编程软件怎么选:AI编程工具的协作与落地能力对比
javascript
believed_breadfruit16 小时前
我开源了一个HTML 分页导出工具,解决了复杂页面的内容截断、跨页错乱和长文档白屏问题
前端·javascript·github