JSON.stringify 和 JSON.parse 的高阶用法

前言

一般人使用 JSON.stringify 或者 JSON.parse 大多数是用来储存或者转换后端 JSON 数据。其实这两个函数均有第二个参数。可以过滤或者处理部分数据。用法上有点类似 Object.defineProperties 或者 Proxy，对数据进行拦截。

基本用法

对象转字符串：

var userInfo = {userName:'jack',userId:'12',mobile:'12312312312'};
userInfo = JSON.stringify(userInfo);
console.log(userInfo);//{"userName":"jack","userId":"12","mobile":"12312312312"}"
userInfo = sessionStorage.setItem("userInfo",userInfo);

字符串转对象：

var users = sessionStorage.getItem("userInfo");
users = JSON.parse(users);
console.log(users);//{userName:'jack',userId:"12",mobile:"12312312312"}

深度复制对象：
如下案例所示，userInfo1 通过 JSON.parse 和 JSON.stringify 的方式深度复制了一份 userInfo（直接赋值的话只是对象的引用，修改原对象会改变新对象）。

var userInfo = {userName:'jack',userId:'12',mobile:'12312312123',child:{child:"zhangsan"}};
var userInfo1 = JSON.parse(JSON.stringify(userInfo));
userInfo.child.child = 'jack';
console.log(userInfo)//{child: {child: "jack"},mobile: "12312312123",userId: "12",userName: "jack"}
console.log(userInfo1)//{child: {child: "zhangsan"},mobile: "12312312123",userId: "12",userName: "jack"}

高阶用法之第二个参数

1. 第二个参数为数组
   第二个参数为数组时，表示过滤对象。如下所示从对象中获取某个属性。

var obj={name:'jack',age:18};
obj = JSON.stringify(obj,['name']);
console.log(obj);//"{"name":"jack"}"

2. 第二个参数为函数
   语法形式为(key,value)=>() 其中 key 表示每个键，value 表示每个值。
   假设现在有一个需求，手机尾号为 1、2、3 的用户为中奖用户，需要在手机尾号拼接 “zj” 做特殊标志。那么在缓存信息的时候就可以对这些用户做特殊处理。

在 JSON.stringify 做处理：

var userInfo = {userName:'jack',userId:'12',mobile:'12312312123'};
    userInfo = JSON.stringify(userInfo,(key,value)=>{
        if(key == 'mobile'){
            var list = value.split("").splice(value.length-2,3);          
                if(list.includes("1")||list.includes("2")||list.includes("3")){
                return value+"zj"
                }
        }
        return value
    });
    console.log(userInfo)//得到JSON字符串 {"userName":"jack","userId":"12","mobile":"12312312123zj"}

在 JSON.parse 做处理：

var userInfo = JSON.stringify({userName:'jack',userId:'12',mobile:'12312312123'});
    userInfo = JSON.parse(userInfo,(key,value)=>{
        if(key == 'mobile'){
            var list = value.split("").splice(value.length-2,3);          
                if(list.includes("1")||list.includes("2")||list.includes("3")){
                return value+"zj"
                }
        }
        return value
    });
    console.log(userInfo)//得到JSON对象 {userName: "jack", userId: "12", mobile: "12312312123zj"}

高阶用法之第三个参数

这里的第三个参数指的 JSON.stringify，JSON.parse 没有第三个参数。
第三个参数为基本类型，主要表示缩进，如果是数值，表示缩进多少空格，最多10个。如果是字符串，表示按照字符串缩进。如果不需要第二个参数可以设置为 null。

1. 第三个参数为数值

var userInfo = {userName:'jack',userId:'12',mobile:'12312312123'};
    userInfo = JSON.stringify(userInfo,null,4);

如下所示，每个键值对前多出4个空格。

2. 第三个参数为字符串

var userInfo = {userName:'jack',userId:'12',mobile:'12312312123'};
    userInfo = JSON.stringify(userInfo,null,'--');

如下所示，每个键值对前多出 ‘–’ 分隔符。