大家好，我是冒菜师，今天呈上的主菜是一份小碗冒菜，但是汤有点少，纯纯干货

今天有空做了一下代码的回顾，这个项目主要是后台管理，后台管理的代码代价都懂，就是怎么快怎么来，各种乱七八糟的方法命名。但是，还真让看到一点能够优化的地方，那就是JSON.stringify

我相信很少有人看过JSON.stringify的文档，大部分我们使用的时候都是直接传入一个对象或数组。但是，你能想象，JSON.stringify其实可以接收3个参数！！

看看MDN的简单介绍，其中多了一个replacer和space,容我先卖卖关子，咱们先看看space

输出格式化的json

这个操作我一般主要用于nodejs的时候，有时候输出个日志，或者爬虫的时候，往往需要把字符串写到文件里。如果你直接写入，那么文件只会有一行，如果你的对象很大，那么这样是很不友好的。

const data= {a:1...}//文件很长
fs.writeFileSync(file, JSON.stringify(data))

// 返回 {a:1...} 文件只会有一行

解决的办法很简单，只需要JSON.stringify(data,null,2),就会返回一个有格式的json字符串了

JSON.stringify(data, null, 2)
// "{
//   "100": 100,
//   "site": "Pitayan",
//   "url": "https://pitayan.com"
// }"

属性过滤

这个需求其实一直都有，只是我真的没有想过在JSON.stringify中已经提供了支持。在我做后台管理系统中有个常用的写法

const data = {a:1,b:2,c:3}
await axios({
    method:'post',
    data:{} //这里仅需要a,b两项
})

有一个对象内有很多属性，但是我们请求接口的时候只需要某一个或几个属性。一般我会这样处理

const {a,b} = {a:1,b:2,c:3}
// or
await axios({
    method:'post',
    data:{a:data.a,b:data.b} //这里仅需要a,b两项
})

但是借助JSON.stringify的第二个参数，我们可以更简单的解决这个问题

const {a,b} = {a:1,b:2,c:3}
await axios({
    method:'post',
    data:JSON.stringify(data,['a','b']) 
    //这里仅需要a,b两项
    //可以传json string,axios会处理的，如果我没记错的话
})

我觉得这样写会比上面2种写法更好些，更简便

对象恢复

还是在配置系统里，我经常会这样加工一下后端的返回值，其中statusText会在页面上显示。

const res = await axios('xxx')
res.statusText = res.status ? '成功'：'失败'

然后，用户提交修改，此时会把对应的数据再提交给后端

const data = {status:false,statusText:'失败'}
//需要手动删除statusText
delete data.statusText
await axios.pst('xxx',data)

如果后端验证比较严，你的body多了一个参数就会报错，而我之前的做法无非就是手动删除一下。现在我们可以这样做

const data = JSON.stringify({
    status:false,
    statusText:'失败',
    toJSON:function(key){
        delete this.statusText
        return this
    }
})

这样难道不比之前更好吗？而且，如果你保存了之前的原始值，你可以写一个通用的方法，在toJSON里调用。比如这样:

const originData = {status:false}
const data = JSON.stringify({
    status:false,
    statusText:'失败',
    toJSON:function(key){
        const originKeys= Object.keys(originData)
        Object.keys(this).forEach(e=>{
            if(!originKeys.includes(e)){
                delete this[e]
            }
        })
        return this
    }
})

这样才能叫会用JSON.stringify

新技能已Get

如果你真的会用JSON.stringify

输出格式化的json

属性过滤

对象恢复