JSON.stringify()与JSON.parse()的妙用

JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串，而JSON.parse()可以将JSON字符串转为一个对象。

在使用JSON.parse()需要注意一点，由于此方法是将JSON字符串转换成对象，所以你的字符串必须符合JSON格式，即键值都必须使用双引号包裹：

let a = '["1","2"]';
let b = "['1','2']";
console.log(JSON.parse(a)); // Array [1,2]
console.log(JSON.parse(b)); // 报错

数组对象里的value值可以使用单引号，在用JSON.stringify()转化后，会变成双引号。

var arr = [
    {
        name: "张三",
        age: 18,
        sex: "男",
    },
];
console.log(JSON.stringify(arr)); //[{"name":"张三","age":18,"sex":"男"}]

JSON.stringify()与toString()的区别

这两者虽然都可以将目标值转为字符串，但本质上还是有区别的；

共同点：都可以将纯数组转换为字符串。

let arr = [1, 2, 3, "a"];
JSON.stringify(arr); // [1,2,3,"a"]
arr.toString(); // 1,2,3,a

不同点：虽然都是字符串，但是返回值不一样

1.toString() 方法是把一个对象转换为一个字符串，并返回结果，可以理解为是取出里面的值。

2.JSON.stringify()是把JavaScript 对象转换为 JSON 字符串，理论上也可以转换字符串，不过本身就是字符串就，再使用这个方法也没有什么意义了。上图就可以看出区别来。

3.toString() 不能转换数组对象。

let arr = [
    {
        name: "张三",
        age: 18,
        sex: "男",
    },
    {
        name: "张三",
        age: 18,
        sex: "男",
    },
];
console.log(arr.toString()); //[object Object],[object Object]

4.toString(radix) 还可以把要转换的值用其他进制展示出来，radix为可选。规定表示数字的基数，使 2 ~ 36 之间的整数。若省略该参数，则使用基数 10。但是要注意，如果该参数是 10 以外的其他值，则 ECMAScript 标准允许实现返回任意值。

var number = new Number(15);
console.log(number.toString()); //10 ,注：10为字符串，非数字
console.log(number.toString(2)); //1111
console.log(number.toString(16)); //f

进阶妙用：replacer 与 reviver

JSON.stringify 的第二个参数 replacer 和 JSON.parse 的第二个参数 reviver，是真正好用的地方。

1. stringify 的 replacer：过滤 / 改写字段

可以传数组（白名单）或函数（自定义处理逻辑）：

const user = { name: "张三", password: "123456", age: 18 };

// 数组：只保留 name 和 age，password 被剔除（避免敏感字段序列化）
JSON.stringify(user, ["name", "age"]);
// {"name":"张三","age":18}

// 函数：对每个键值对加工，返回 undefined 则该字段被忽略
JSON.stringify(user, (key, value) => {
    if (key === "password") return undefined; // 过滤密码
    return value;
});

2. 第三个参数 space：格式化输出

调试接口时让 JSON 可读：

JSON.stringify(user, null, 2);
// 带 2 个空格缩进的多行格式，方便看

3. parse 的 reviver：还原特殊类型

JSON 没有 Date 类型，存进去会变成字符串，取出来可借 reviver 还原：

const str = JSON.stringify({ time: new Date() });
// {"time":"2026-07-14T09:00:00.000Z"}

JSON.parse(str, (key, value) => {
    if (key === "time") return new Date(value); // 还原成 Date 对象
    return value;
});

4. 经典场景：深拷贝（注意局限）

const copy = JSON.parse(JSON.stringify(obj));

简单对象好用，但有局限：函数、undefined、Symbol、Date、RegExp、循环引用都会被丢失或转换。复杂对象请用结构化克隆 structuredClone(obj)（现代浏览器/Node 已支持）。