优化JavaScript对象数组：单次filter同时获取count与目标对象

原代码在构建this.data时，针对不同状态多次调用filter方法，既影响性能，也造成代码冗余。我们可以通过一次遍历完成数据分组，再基于分组结果构建目标数组，实现只遍历一次原数组，同时得到各状态的count和additionalObj。

优化后的代码 #

// 先遍历一次request，完成所有状态分组
const grouped = {
  total: details.request.length,
  inProgress: [],
  success: [],
  failed: []
};

details.request.forEach(obj => {
  const { statusId } = obj;
  if ([0, 1, 3, 4].includes(statusId)) {
    grouped.inProgress.push(obj);
  } else if (statusId === 6) {
    grouped.success.push(obj);
  } else if ([2, 5].includes(statusId)) {
    grouped.failed.push(obj);
  }
});

// 基于分组结果构建目标数组
this.data = [
  {
    label: 'Total',
    count: grouped.total
  },
  {
    label: 'In-Progress',
    count: grouped.inProgress.length
  },
  {
    label: 'Success',
    count: grouped.success.length,
    additionalObj: grouped.success
  },
  {
    label: 'Failed',
    count: grouped.failed.length,
    additionalObj: grouped.failed
  }
];

代码说明 #

• 分组逻辑：通过forEach遍历一次details.request，根据statusId将请求分别存入对应的分组数组，同时直接获取总长度。
• 构建目标数组：直接使用分组好的数组，count取对应数组的length，additionalObj直接复用分组数组，完全避免重复过滤。
• 可读性提升：把状态判断逻辑集中在一次遍历中，后续构建目标数组的代码更简洁直观，也方便后续维护状态规则。

额外优化点 #

如果状态规则需要复用，可以把状态映射抽成常量，用Set做判断性能更优：

const STATUS_GROUPS = {
  inProgress: new Set([0, 1, 3, 4]),
  success: new Set([6]),
  failed: new Set([2, 5])
};

// 遍历分组时直接用Set判断
details.request.forEach(obj => {
  const { statusId } = obj;
  if (STATUS_GROUPS.inProgress.has(statusId)) {
    grouped.inProgress.push(obj);
  } else if (STATUS_GROUPS.success.has(statusId)) {
    grouped.success.push(obj);
  } else if (STATUS_GROUPS.failed.has(statusId)) {
    grouped.failed.push(obj);
  }
});

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