具有多个条件javascript的数组过滤

Question

我不知道如何过滤具有多个条件的数组。我有一个搜索过滤器表单，其中包含 2 个选择、1 个复选框字段集和 1 个单选按钮字段集。我有一些函数可以返回符合所选条件的项目。它们只能单独工作。查找符合所有条件的对象的最佳方法是什么？

我试图为所有可能的选项制作 if 语句，但代码无法正常工作，看起来应该有一些更好的选择来这样做。

下面是函数示例：

     function chooseRating(hotel) {
      return hotel.rating == e.target.value;
    }

    function chooseMeal(hotel) {
      return hotel.mealType == e.target.value;
    }

    function choosePlace(hotel)  {
      for (let l = 0; l < chosenPlace.length; l++) {
      if(chosenPlace[l].checked) {
        return hotel.region == e.target.value;
      }
              }
    }

我应该如何用它过滤数组？

   let filteredCards = hotels.filter(function(hotel, index, hotels) {
    // ??
  });

用户选择他对酒店的要求，他应该得到符合所有要求的酒店。如果其中一些未被选中，则默认情况下它们不会被计算在内。

原文由 Tonya 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以链接您的 filter() 调用，如下所示：

 // first filter
function filterRating(hotel) {
  return hotel.rating >= filters.rating;
}

// second filter
function filterMeal(hotel) {
  return !filters.mealType.length || hotel.mealType == filters.mealType;
}

// apply both filters to initial array
function update() {
  let filteredCards = hotels.filter(filterRating).filter(filterMeal);
};

完整示例：

 var filters = {
  rating: 4,
  mealType: ""
};

rating.value = filters.rating;
mealtype.value = filters.mealType;

rating.addEventListener("input", function() {
  filters.rating = rating.value;
  update();
});
mealtype.addEventListener("input", function() {
  filters.mealType = mealtype.value;
  update();
});

function filterRating(hotel) {
  return hotel.rating >= filters.rating;
}

function filterMeal(hotel) {
  return !filters.mealType.length || hotel.mealType == filters.mealType;
}

function update() {
  let filteredCards = getHotels().filter(filterRating).filter(filterMeal);
  console.log(filters);
  output.innerHTML = filteredCards.map(hotel => `<span>${hotel.name}</span>`).join("");
};
update();

function getHotels() {
  return [{
      name: "A",
      rating: 5,
      mealType: "full"
    },
    {
      name: "B",
      rating: 4,
      mealType: "full"
    },
    {
      name: "C",
      rating: 4,
      mealType: "breakfast"
    },
    {
      name: "D",
      rating: 5,
      mealType: "breakfast"
    }
  ];
}

 input,
select {
  margin: 1em 0
}

#rating {
  width: 3em
}

#output span {
  display: inline-block;
  border: 1px solid black;
  padding: 0.5em;
  margin: 0.5em;
}

 Rating &gt;= <input id="rating" value="5" type="number"><br> Meal:
<select id="mealtype">
  <option value="">any</option>
  <option>breakfast</option>
  <option>full</option>
</select><br>
<p id="output"></p>

原文由 user5734311 发布，翻译遵循 CC BY-SA 4.0 许可协议