详解JavaScript中JSON.stringify方法

JSON 对象作为常见的数据存储格式，应用范围十分广泛。

其中，JSON.stringify 方法的使用频率极高，合理运用该方法，能够满足多种简单的数据处理需求。

• 在进行对象深拷贝时，可以结合 JSON.stringify 和 JSON.parse 方法，生成一个与原对象完全独立的新对象，从而避免引用关系带来的副作用。
• 在操作 localStorage 时，由于该存储机制仅支持字符串格式的数据，因此在存入数值或对象前，需先将其转换为 JSON 字符串。

JSON.stringify

该方法的核心作用是将一个对象或数组转换为标准的 JSON 字符串格式。

虽然日常开发中通常只使用第一个参数，但该方法实际上还包含另外两个可选参数，能够扩展出许多实用的功能。

语法格式如下：

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

各参数定义如下：

• value：指定需要被序列化的变量值。
• replacer：替代器。可以是函数或者是数组：
  • 若 replacer 为函数，则 value 的每个属性都会经过该函数的处理，函数的返回值将作为最终被序列化的值。
  • 若 replacer 为数组，则要求数组元素均为字符串，这些字符串会被视为 value 的键（即 key）进行匹配，最终序列化结果仅包含数组中每个元素作为 key 对应的值。
• space：指定输出数值的代码缩进，美化格式之用，可以是数字或者字符串：
  • 若 space 为数字（最大值为10），则代表每行代码的缩进空格数。
  • 若 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"}'

总结

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

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