如何将React中多轮数组filter调用简化为单逻辑或if分支实现

实现方案 #

你可以通过单轮遍历加条件分支完成所有告警的分类，仅遍历原数组1次就能替代原来的5次filter调用，最终输出的结果和原有逻辑完全一致，后续的渲染代码不需要做任何修改。

代码实现 #

// 初始化各状态告警的空数组
const pendingAlerts = [];
const deniedAlerts = [];
const upcomingAlerts = [];
const activeAlerts = [];
const expiredAlerts = [];

// 单轮遍历完成全部分类
array.forEach(alertItem => {
  // 优先判断过期/取消状态，和原逻辑优先级保持一致
  if (alertItem.canceled_at || alertItem.end_at < today) {
    expiredAlerts.push(alertItem);
    return;
  }
  // 非过期项判断审批状态
  if (alertItem.approval_status === approvalStatuses.pending) {
    pendingAlerts.push(alertItem);
  } else if (alertItem.approval_status === approvalStatuses.denied) {
    deniedAlerts.push(alertItem);
  } else if (isApproved(alertItem)) {
    // 审批通过的项按时间区间分类
    if (alertItem.begin_at > today) {
      upcomingAlerts.push(alertItem);
    } else if (alertItem.begin_at <= today && alertItem.end_at > today) {
      activeAlerts.push(alertItem);
    }
  }
});

// 对各分类数组执行排序
pendingAlerts.sort(sortCommunicationsByDateRule);
deniedAlerts.sort(sortCommunicationsByDateRule);
upcomingAlerts.sort(sortCommunicationsByDateRule);
activeAlerts.sort(sortCommunicationsByDateRule);
expiredAlerts.sort(sortCommunicationsByDateRule);

优化说明 #

• 分类判断的优先级和原有filter逻辑完全对齐，优先匹配过期/取消条件，避免和其他状态的判断产生冲突
• 如果你想简化排序部分的重复代码，也可以封装公共排序方法：const sortAlertList = arr => arr.sort(sortCommunicationsByDateRule)，再分别调用即可

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