你所不知道的JSON.parse() 和 JSON.stringify() – 高级用法

JSON 是前端开发中经常使用的数据格式之一，而 JSON.parse() 和 JSON.stringify() 则是处理 JSON 数据的常用方法。本文将介绍这两个方法的高级用法，帮助您更好地理解和运用它们。

JSON.parse()

JSON.parse() 方法可以将一个 JSON 字符串解析为 JavaScript 对象。但除此之外，它还有以下几个高级用法：

1. 转换日期

如果 JSON 数据中包含了日期类型，那么在将它们转换为 JavaScript 对象时，日期类型将会变成字符串。为了保留原来的日期类型，可以通过传入一个 reviver 函数作为第二个参数来实现。

-- -------------------- ---- -------
----- -------- - --------- -----------------------------
----- ------- - ----- ------ -- -
    -- ------------------------------------------------------------ -
        ------ --- ------------
    -
    ------ ------
--
----- ------- - -------------------- ---------
-------------------------- -- ------ --- -- ---- -------- -------- --------

2. 处理循环引用

在 JSON 数据中存在循环引用的情况下，直接使用 JSON.parse() 方法会抛出 TypeError 异常。但可以通过传入一个 reviver 函数作为第二个参数来处理循环引用。

const jsonLoop = '{"a": {"b": {"c": {}}}}';
const objLoop = JSON.parse(jsonLoop, (key, value) => {
    if (key === 'c') {
        return objLoop.a.b;
    }
    return value;
});
console.log(objLoop); // 输出：{ a: { b: { c: [Circular] } } }

3. 实现深拷贝

使用 JSON.parse() 方法进行深拷贝时需要注意，如果对象中包含了函数、正则表达式、Map 等非原始类型的数据，那么它们将无法被正确地序列化。因此，可以在实现深拷贝时先将这些非原始类型的数据转换成序列化后的 JSON 字符串，再调用 JSON.parse() 方法进行解析。

const deepClone = (obj) => {
    const str = JSON.stringify(obj);
    return JSON.parse(str);
};

JSON.stringify()

JSON.stringify() 方法可以将 JavaScript 对象序列化为 JSON 字符串。但除此之外，它还有以下几个高级用法：

1. 过滤属性

在将 JavaScript 对象序列化为 JSON 字符串时，可以通过传入一个 replacer 函数作为第二个参数来过滤属性。replacer 函数可以是一个数组或一个函数，用于指定要序列化的属性。

-- -------------------- ---- -------
----- --------- - -
    ----- -----
    ---- ---
    -------- -
        ----- -----
        ------- -----
    -
--
----- --------- - ------------------------- -------- ------------
----------------------- -- -------------------------------------------------------

2. 转换值

在将 JavaScript 对象序列化为 JSON 字符串时，可以通过传入一个 replacer 函数作为第二个参数来转换属性的值。replacer 函数可以是一个数组或一个函数，用于指定要序列化的属性及其转换方式。

-- -------------------- ---- -------
----- ------------ - -
    ----- -----
    ---- ---
    ------ --- ------------------
--
----- ------------ - ---------------------------- ----- ------ -- -
    -- ---- --- -------- -
        ------ ----------------------------------------------- -

- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------