Angular中如何在filter函数返回两个值？优化现有代码方案

算力阿峰

2026-8-21

如何在Angular中一次遍历数组同时拆分两组数据？

现有数组allData，需要拆分出service.id === "123"的对象存入bookedServiceData，其余对象存入unbookedServiceData。当前用了两次filter方法实现，希望合并为更高效的单次遍历方案。

最优方案：单次遍历分组（推荐）

使用reduce或forEach只需遍历数组一次，比两次filter的性能更优（时间复杂度从O(2n)降至O(n)），以下是两种实现方式：

方式1：使用`Array.reduce`（更函数式风格）

private splitServiceData(): void {
  // 初始化累加器，包含两个空数组
  const groupedData = this.allData?.reduce((acc, current) => {
    const isTargetService = current.service?.id === "123";
    isTargetService ? acc.booked.push(current) : acc.unbooked.push(current);
    return acc;
  }, { booked: [], unbooked: [] } as { booked: typeof this.allData; unbooked: typeof this.allData });

  this.bookedServiceData = groupedData?.booked;
  this.unbookedServiceData = groupedData?.unbooked;
}

逻辑：通过reduce的累加器对象，在遍历每个元素时判断归属，将元素推入对应数组，最后一次性赋值给目标变量。

方式2：使用`Array.forEach`（更直观易懂）

private splitServiceData(): void {
  // 先初始化空数组
  this.bookedServiceData = [];
  this.unbookedServiceData = [];

  this.allData?.forEach(item => {
    if (item.service?.id === "123") {
      this.bookedServiceData.push(item);
    } else {
      this.unbookedServiceData.push(item);
    }
  });
}