JSON.stringify中的replacer

需求分析

当我们在遇到需要深拷贝一个对象所有属性的时候
会想把关联的数据排除在外，例如这样的一个对象关联的send_by_user

当你的需求是修改这个庞大对象并且整体提交更新的时候会发现以下问题

这个多余关联的对象不需要提交
发出请求的数据量变大

{
    "id": 41,
    "title": "消息标题",
    "content": "消息内容",
    "send_by": 2,
    "send_by_user": {
        "id": 2,
        "name": "admin",
        "telephone": "",
        "email": "10000@qq.com",
        "department_id": 1,
        "department_name": "",
        "department": {
            "id": 1,
            "name": "产品设计部",
            "status": 1,
            "created_at": "1970-01-01T08:00:00+08:00",
            "updated_at": "2021-08-21T16:12:05+08:00"
        },
        "status": 1,
        "info": "",
        "created_at": "1970-01-01T08:00:00+08:00",
        "updated_at": "1970-01-01T08:00:00+08:00"
    },
    "send_to": 2,
    "status": 2,
    "created_at": "2021-08-21T16:55:53+08:00",
    "deleted_at": "0001-01-01T00:00:00Z",
    "updated_at": "2021-08-25T10:14:57+08:00"
}

解决方法

控制 JSON.stringify 序列化层级
JSON.stringify(value[, replacer [, space]])

使用JSON.stringify时传入第二个参数

replacer 可选
如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。

那我们只需要通过replacer传入函数过滤掉属性值是Object即可

JSON.stringify(message,(k,v) => {
    // k,v分别代表传入对象的属性名和属性值
    // 判断k是因为replace会传入一个 传入参数对象 的值,但是没有k, 我们直接返回即可
    if(!k) {
        return v
    }
    if(typeof v === "object") {
        return null
    }
    return v
})

参考资料

MDN Web Docs