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 分钟前
迭代器和生成器
前端·javascript
源猿人3 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
RoyLin3 小时前
TypeScript设计模式:迭代器模式
javascript·后端·node.js
小桥风满袖5 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
编程贝多芬6 小时前
Promise 的场景和最佳实践
前端·javascript
Asort6 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio6 小时前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
Lotzinfly6 小时前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
一个大苹果6 小时前
setTimeout延迟超过2^31立即执行?揭秘JavaScript定时器的隐藏边界
javascript
普郎特6 小时前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript