详解JavaScript中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 的解析逻辑。

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

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}

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

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 方法的返回值进行序列化。

看下面的例子：

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

总结

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

到此这篇关于详解JavaScript中JSON.stringify方法的文章就介绍到这了,更多相关JavaScript JSON.stringify方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论