如何在ReactJS和JavaScript中按需在请求负载中传递参数

现有初始请求体：

const requestbody = {
    "applicationname":"app1",
    "applicationtype":"permenant",
    "startDate":"24 march",
    "endDate":"30 march",
    "refreshtime":""    
}

需要实现以下逻辑：

• 仅当startDate和endDate的值均非空时，才将这两个参数发送给后端，此时请求体如下：

const requestbody = {
    "applicationname":"app1",
    "applicationtype":"permenant",
    "startDate":"24 march",
    "endDate":"30 march",
    "refreshtime":""
}

• 若startDate和endDate均为空，则请求体不包含这两个日期参数，且refreshtime设为30，请求体如下：

const requestbodywithoutdate = {
    "applicationname":"app1",
    "applicationtype":"permenant",
    "refreshtime":30
}

方式一：基础条件判断构建对象 #

通过if-else分支判断日期参数状态，逻辑清晰易懂：

// 解构初始请求体中的属性
const { applicationname, applicationtype, startDate, endDate } = requestbody;
let finalRequestBody;

// 判断两个日期是否都非空（trim()用于排除纯空格的情况，可按需移除）
if (startDate.trim() && endDate.trim()) {
    finalRequestBody = {
        applicationname,
        applicationtype,
        startDate,
        endDate,
        refreshtime: ""
    };
} else {
    finalRequestBody = {
        applicationname,
        applicationtype,
        refreshtime: 30
    };
}

// 将finalRequestBody发送至后端即可

方式二：对象展开运算符简化实现 #

利用ES6的对象展开语法结合三元表达式，用更简洁的代码完成逻辑：

const { applicationname, applicationtype, startDate, endDate } = requestbody;

// 标记日期参数是否有效
const hasValidDates = startDate.trim() && endDate.trim();

// 动态生成请求体
const finalRequestBody = {
    applicationname,
    applicationtype,
    refreshtime: hasValidDates ? "" : 30,
    // 仅当日期有效时，才将startDate和endDate添加到对象中
    ...(hasValidDates && { startDate, endDate })
};

关键说明 #

• 若业务中仅需判断严格空字符串（不需要排除纯空格），直接去掉代码中的.trim()即可。
• 当前逻辑完全匹配需求：只有两个日期都非空时才携带它们，否则不包含日期参数并设置refreshtime为30。

内容的提问来源于stack exchange，提问作者sourabh k