vue 前端调接口传参，参数为空则不传给后端问题

一只前端小菜鸡.

已于 2023-08-17 15:23:50 修改

阅读量2k

点赞数

文章标签： vue.js 前端 javascript

于 2023-07-25 16:08:31 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_49826079/article/details/131920284

版权

文章介绍了一个JavaScript函数`removeEmptyValues`，用于在前后端交互时过滤掉传递对象中的空值，包括嵌套对象的空值。该函数通过递归遍历对象并删除值为空或者空对象的属性，确保只传递有意义的数据给后端。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在我们前后端联调的过程中，正常情况下我们是一股脑把所有的参数都传过去，不管是否为空，但是有些时候，后端需要我们把为空的参数就不要传给他们，这是我们可以用此方法来解决去掉为空的参数：

let data = {
    topoType: 'API',
    relationship: '访问次数',
    name: 'httpapi:http://dns.weixin.qq.com.cn/mmtls/$(param)',
    limit: '5',
    time: '一周',
    dotIp: '源IP名称',
    dotApi: '接口名称',
    dotApp: '应用名称',
    filter: {
        type: '',
        await:11,
        b:111
    },
    obj:{},
    obj1:{a:'',b:''}

}
function removeEmptyValues(obj) {
    for (const key in obj) {
        if (typeof obj[key] === 'object') {
            removeEmptyValues(obj[key]);
        }

        if (!obj[key] || (typeof obj[key] === 'object' && !Reflect.ownKeys(obj[key]).length)) {
            delete obj[key];
        }
    }
}

removeEmptyValues(data)

console.log(data)
dotApi: "接口名称"
dotApp: "应用名称"
dotIp: "源IP名称"
filter: {await: 11, b: 111}
limit: "5"
name: "httpapi:http://dns.weixin.qq.com.cn/mmtls/$(param)"
relationship: "访问次数"
time: "一周"
topoType: "API"

此方法可以过滤掉对象中的空值，也可以过滤掉对象中对象的空值。