JSON.stringify()的小技巧

普通对象或值转换为 JSON 字符串是这样的

var data = {
    str: 'stringify',
    num: 3,
    list: ['J','S', 'O', 'N'],
    obj: {
        type: 'Object',
        value: '---'
    }
}
JSON.stringify(data)
// '{"str":"stringify","num":3,"list":["J","S","O","N"],"obj":{"type":"Object","value":"---"}}'

这样看起来很难看

怎么样和开发工具那样可以格式化呢

其实 JSON.stringify()还有另外两个参数

来自文档截图

第二个参数 replacer , 可以接收函数和数组类型

类型	解释
函数	有(key, value)参数，返回JSON字符串中的value ，其实就是过滤
数组	数组中元素为目标对象的属性
null或未提供	输出所有

传数组：

var data = {
    str: 'stringify',
    num: 3,
    list: ['J','S', 'O', 'N'],
    obj: {
        type: 'Object',
        value: '---'
    }
}
JSON.stringify(data, ['str', 'list'])
// '{"str":"stringify","list":["J","S","O","N"]}'

传函数：

var data = {
    str: 'stringify',
    num: 3,
    list: ['J','S', 'O', 'N'],
    obj: {
        type: 'Object',
        value: '---'
    }
}
JSON.stringify(data, (key, value)=>{
    if ( key === 'num' ||key == 'obj') {
        return 
    }
    return value
})
// '{"str":"stringify","list":["J","S","O","N"]}'

第三个参数 space ，缩进

类型	解释
数字	每一级别会比上一级别缩进多这个数字值的空格（最多10个空格）
字符串	每一级别会比上一级别多缩进该字符串（或该字符串的前10个字符）

var data = {
    str: 'stringify',
    num: 3,
    list: ['J','S', 'O', 'N'],
    obj: {
        type: 'Object',
        value: '---'
    }
}
console.log(JSON.stringify(data, null, 2))
// {
//  "str": "stringify",
//  "num": 3,
//  "list": [
//    "J",
//    "S",
//    "O",
//    "N"
//  ],
//  "obj": {
//    "type": "Object",
//    "value": "---"
//  }
//}