Question

我有一组锻炼数据，可以在锻炼时以JSON格式进行。我正在为此数据实现一个过滤系统，该系统具有三种不同类型的用户可以应用的过滤器：排序过滤器（采用当前练习集并按名称az或以z来对它们进行排序），肌肉群（属于运动在相同的目标肌肉群下）和训练程序（属于同一训练程序的运动）。

用户应该能够选择任何过滤器，它将立即应用它，但是并非必须同时应用所有3种类型的过滤器。因此，我在JS中提出了以下功能：

function applyFilters(filters) {
  const sort = filters[0];
  const muscles = filters[1];
  const programs = filters[2];
  const exerciseJSONData = "exercises.json";

  $.getJSON(exerciseJSONData, {
    format: JSON,
  }).done(function (result) {
    let filteredArr = [];
    if (muscles.length === 0 && programs.length === 0) {
      filteredArr = result;
    } else if (muscles.length !== 0 && programs.length === 0) {
      $.each($(result), function (key, val) {
        if (muscles.some((item) => val.MainMuscleGroup.indexOf(item) >= 0)) {
          filteredArr.push(this);
        }
      });
    } else if (muscles.length === 0 && programs.length !== 0) {
      $.each($(result), function (key, val) {
        if (programs.some((item) => val.TrainingProgram.indexOf(item) >= 0)) {
          filteredArr.push(this);
        }
      });
    } else {
      $.each($(result), function (key, val) {
        if (
          muscles.some((item) => val.MainMuscleGroup.indexOf(item) >= 0) &&
          programs.some((item) => val.TrainingProgram.indexOf(item) >= 0)
        ) {
          filteredArr.push(this);
        }
      });
    }
    $("#number-of-exercises").text(filteredArr.length + " Exercises Found");
    $("#exercises").empty();
    createExerciseHTML(filteredArr);
  });
}

此功能按预期工作，但是，我认为if else语句的可读性可能很难为他人所理解，并且打破了不重复代码的规则。我想知道是否有更简洁有效的方法来编码此功能？预先感谢。

P.S。抱歉，如果本文开头的信息过多，我想提供一些背景信息，以避免读者产生任何困惑。

Answer 1

您可以先将$ each取出，然后将if放在其中。

function applyFilters(filters) {
   const sort = filters[0];
   const muscles = filters[1];
   const programs = filters[2];
   const exerciseJSONData = "exercises.json";
   
   $.getJSON(exerciseJSONData, {
      format: JSON,
   }).done(function (result) {
      let filteredArr = [];
      var hasMuschle = muscles.length > 0 ? 1 : 0;
      var hasProgram = programs.length > 0 ? 1 : 0;
      var muscleAndProgram = hasMuschle - hasProgram;
      $.each($(result), function (key, val) {
         
         if (muscles.length === 0 && programs.length === 0) {
            filteredArr = result;
         } else if (muscles.length !== 0 && programs.length === 0) {
            if (muscles.some((item) => val.MainMuscleGroup.indexOf(item) >= 0)) {
               filteredArr.push(this);
            }
         } else if (muscles.length === 0 && programs.length !== 0) {
            if (programs.some((item) => val.TrainingProgram.indexOf(item) >= 0)) {
               filteredArr.push(this);
            }
         } else {
            if (
               muscles.some((item) => val.MainMuscleGroup.indexOf(item) >= 0) &&
               programs.some((item) => val.TrainingProgram.indexOf(item) >= 0)
               ) {
                  filteredArr.push(this);
               }
            }
         })
         $("#number-of-exercises").text(filteredArr.length + " Exercises Found");
         $("#exercises").empty();
         createExerciseHTML(filteredArr);
      });
   }

此功能更有效或更简洁的方法？

1 个答案: