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 方法的重点和难点在于第二和第三个参数的灵活使用上,需要多加练习。

相关推荐
吃好喝好玩好睡好3 分钟前
Flutter与Electron在OpenHarmony生态的融合实践:构建下一代跨平台应用
javascript·flutter·electron
四眼肥鱼39 分钟前
全网最全的 qiankun 基于 react18+(主应用)、vue3.4+(微应用)实现页签缓存,页面缓存
前端·javascript
老前端的功夫1 小时前
前端水印技术深度解析:从基础实现到防破解方案
开发语言·前端·javascript·前端框架
www_stdio1 小时前
手写 instanceof:深入理解 JavaScript 原型与继承机制
前端·javascript·html
一 乐1 小时前
物业管理|基于SprinBoot+vue的智慧物业管理系统(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot
c骑着乌龟追兔子1 小时前
Day 32 函数专题1:函数定义与参数
开发语言·前端·javascript
zlpzlpzyd2 小时前
vue.js 2和vue.js 3的生命周期与对应的钩子函数区别
前端·javascript·vue.js
爱敲代码的小冰2 小时前
js 时间的转换
开发语言·前端·javascript
AAA阿giao2 小时前
深入理解 JavaScript 中的面向对象编程(OOP):从构造函数到原型继承
开发语言·前端·javascript·原型·继承·原型模式·原型链
加油乐3 小时前
css及js实现正反面翻转
前端·javascript·css