javascript - 如何重构检查数组长度的长 if-else 语句？

Question

我正在编写一个使用复选框来过滤项目列表的程序。

我有一组 3 个复选框: phase 、 specialty 和 type 。一旦复选框被标记，它们就会被放入一个数组中，如果条件匹配，则该数组用于过滤掉一个列表。

在做这个的时候，我遇到了几个问题:

如果没有选中任何框，则根本不会出现列表。

如果选中了所有类别中的一个框，那么它将显示两个条件而不是两个条件都为真时(因此，如果我选中了阶段 Base 1 和专业 Race，那么列表将显示所有 Race 匹配和所有 Base 1 匹配)

如果一个框未被选中，而另一个框被选中，则不会出现任何内容，因为它不适合这两个类别。

为了解决所有这三个问题，我做了一个 if, if/else 语句来检查每个类别的数组长度。如果所有数组(复选框)都为空(未选中)，则会出现原始列表。如果选中了 1 个框，但没有选中其他框，那么什么都不会损坏。等等。这是一个很长的声明。

现在，我确实计划再添加 2-3 个复选框选项，并且不想让事情变得更加复杂。如果我继续按照现在的方式做，我可能会得到两倍于现在的陈述。

目前，过滤此列表的方式如下，请注意，console.logs 将识别我正在使用的条件:

if (phases.length === 0 && specialties.length === 0 && type.length === 0) {
      const workouts = this.workouts;
      this.selectedWorkouts.next(workouts);
    } else if (phases.length > 0 && specialties.length > 0 && type.length > 0) {
      const workouts = this.workouts.filter(
        workout => byPhase(workout) && bySpecialty(workout) && byType(workout)
      );
      this.selectedWorkouts.next(workouts);
      console.log("1 EVERYTHING CHECKED");
    } else if (
      phases.length > 0 &&
      specialties.length > 0 &&
      type.length === 0
    ) {
      const workouts = this.workouts.filter(
        workout => byPhase(workout) && bySpecialty(workout)
      );
      this.selectedWorkouts.next(workouts);
      console.log("2 PHASE AND SPECIALTY (no type)");
    } else if (
      phases.length > 0 &&
      specialties.length === 0 &&
      type.length > 0
    ) {
      const workouts = this.workouts.filter(
        workout => byPhase(workout) && byType(workout)
      );
      this.selectedWorkouts.next(workouts);
      console.log("3 PHASE AND TYPE (no specialty)");
    } else if (
      phases.length > 0 &&
      specialties.length === 0 &&
      type.length === 0
    ) {
      const workouts = this.workouts.filter(workout => byPhase(workout));
      this.selectedWorkouts.next(workouts);
      console.log("4 PHASE ONLY (no type or specialty)");
    } else if (
      phases.length === 0 &&
      specialties.length > 0 &&
      type.length > 0
    ) {
      const workouts = this.workouts.filter(
        workout => bySpecialty(workout) && byType(workout)
      );
      this.selectedWorkouts.next(workouts);
      console.log("5 SPECIALTY AND TYPE (no phase)");
    } else if (
      phases.length === 0 &&
      specialties.length > 0 &&
      type.length === 0
    ) {
      const workouts = this.workouts.filter(workout => bySpecialty(workout));
      this.selectedWorkouts.next(workouts);
      console.log("6 SPECIALTY ONLY (no phase nor type)");
    } else if (
      phases.length === 0 &&
      specialties.length === 0 &&
      type.length > 0
    ) {
      const workouts = this.workouts.filter(workout => byType(workout));
      this.selectedWorkouts.next(workouts);
      console.log("7 TYPE ONLY (no phase nor specialty)");
    }

有没有办法重构这个，所以我不会继续添加到语句中，使它成为更长的代码块？或者，我的发言时间这么长真的不值得担心吗？

Here is the stackblitz to my full project. 你可以在 if/else 中找到 src/app/features/workouts-page/workoutservice/workout.service.ts 语句。上面找到的代码应该对这个语句足够具体。

谢谢你。

Answer 1

这就是我将如何做到的。这使用单个 filter经过:

filterWorkouts(phases: string[], specialties: string[], types: string[]) {
  const workouts = this.workouts.filter(workout => {
    return (
      (phases.length === 0 || phases.indexOf(workout.phase) >= 0) &&
      (specialties.length === 0 || specialties.indexOf(workout.specialty) >= 0) &&
      (types.length === 0 || types.indexOf(workout.type) >= 0)
    );
  });
  this.selectedWorkouts.next(workouts);
}

您需要为每个额外的过滤器添加一个衬里。这是 working implementation on stackblitz供你玩耍。