当我想过滤 3 个条件时出现问题答案

【问题标题】：Problem when I want to filter on 3 conditions当我想过滤 3 个条件时出现问题
【发布时间】：2019-01-23 00:38:01
【问题描述】：

我有一个关于过滤多个条件的问题。我有一个完整的工作代码，我使用过滤器功能过滤两个条件，但是当我想添加第三个条件时，它变得非常困难。

在代码 sn-p 中，您可以看到两个过滤器选项的工作代码。我只需要找到一种方法来过滤日子，但这真的很难。

有人可以帮我解决这个问题吗，我真的很想知道有什么解决方案:)

{
  const acts = [
    {
      id: 1,
      name: "Men in coats",
      locatie: 1,
      day: 24,
      soort: "straatact"
    },
    {
      id: 2,
      name: "Men in coats2",
      locatie: 4,
      day: 24,
      soort: "voorstelling"
    },
    {
      id: 3,
      name: "Men in coats3",
      locatie: 4,
      day: 24,
      soort: "voorstelling"
    },
    {
      id: 4,
      name: "Men in coats4",
      locatie: 2,
      day: 24,
      soort: "straatact"
    },
    {
      id: 5,
      name: "Men in coats5",
      locatie: 5,
      day: 24,
      soort: "straatact"
    }
  ];

  let currentDay = `alle`;

  const init = () => {
    const $location = document.querySelector(`.locatie`);
    $location.addEventListener(`input`, handleInputLocation);

    const $soort = document.querySelector(`.soort`);
    $soort.addEventListener(`input`, handleInputSoort);

    const $days = document.querySelectorAll(`.option_day`);
    const daysArray = Array.from($days);
    daysArray.forEach(day => {
      day.addEventListener(`click`, handleClickDay);
    });
  };

  const handleClickDay = e => {
    const currentTarget = e.currentTarget;
    const currentValue = currentTarget.dataset.name;

    const $soort = document.querySelector(`.soort`);
    let soort = $soort.value;

    const $locatie = document.querySelector(`.locatie`);
    const locatie = $locatie.value;

    currentDay = currentValue;

    filterData(locatie, soort, currentValue);
  };

  const handleInputLocation = e => {
    const currentTarget = e.currentTarget;
    const currentValue = currentTarget.value;

    const $soort = document.querySelector(`.soort`);
    let soort = $soort.value;

    const dag = currentDay;

    filterData(currentValue, soort, dag);
  };

  const handleInputSoort = e => {
    const currentTarget = e.currentTarget;
    const currentValue = currentTarget.value;

    const $locatie = document.querySelector(`.locatie`);
    const locatie = $locatie.value;

    const dag = currentDay;

    filterData(locatie, currentValue, dag);
  };

  const filterData = (locatie, soort, dag) => {
let filteredActs = acts;

if (locatie !== "alle") {
  locatie = parseInt(locatie);
  filteredActs = filteredActs.filter(act => act.locatie === locatie);
}
if (soort !== "alle") {
  filteredActs = filteredActs.filter(act => act.soort === soort);
}
if (dag !== "alle") {
  filteredActs = filteredActs.filter(act => act.dag === parseInt(dag));
  console.log(parseInt(dag));
}
// …

console.log(filteredActs);
return filteredActs;
  };

  init();
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <select class="select locatie">
      <option selected disabled value="alle">Location</option>
      <option value="alle">All</option>
      <option value="1">Location 1</option>
      <option value="2">Location 2</option>
      <option value="3">Location 3</option>
      <option value="4">Location 4</option>
      <option value="5">Location 5</option>
      <option value="6">Location 6</option>
    </select>
    <select class="select soort">
      <option selected disabled value="alle">Kind</option>
      <option value="alle">All</option>
      <option value="straatact">Straatacts</option>
      <option value="voorstelling">Voorstellingen</option>
    </select>
    <ul class="list_days">
      <li class="option_day" data-name="alle">All</li>
      <li class="option_day" data-name="24">Fr</li>
      <li class="option_day" data-name="25">Sa</li>
      <li class="option_day" data-name="26">Su</li>
    </ul>
    <script src="js/script.js"></script>
  </body>
</html>

【问题讨论】：

排序的方式和次数没有限制，但您需要确保条件逻辑没有问题。例如，您是否有重叠的条件，或者它们是否互斥等。那么，您要过滤的三个条件到底是什么？
很抱歉，您的代码没有任何问题。什么没有按预期工作？
嗯，我想要的是当我过滤的日子里，这也注意到已经过滤的位置和种类。

标签： javascript ecmascript-6 filtering

【解决方案1】：

你把它复杂化了。不要写多种条件，在没有选择other条件的情况下选择它们。对于许多过滤条件而言，这确实变得难以管理。

你可以做任何一个

function filterData = (…) => {
  let filteredActs = acts;
  if (locatie !== "alle") {
    locatie = parseInt(locatie);
    filteredActs = filteredActs .filter(act => act.locatie === locatie);
  }
  if (soort !== "alle") {
    filteredActs = filteredActs.filter(act => act.soort === soort);
  }
  // …
  return filteredActs;
}

或

function filterData = (…) => {
  return acts.filter(act =>
    (locatie === "alle" || act.locatie === parseInt(locatie)) &&
    (soort === "alle" || act.soort === soort)
    // && …
  );
}

【讨论】：

非常感谢，它更具可读性，但现在我遇到了这个问题，我无法过滤当天的数字，因此过滤后的Acts是空的，它不是选择一天后可以再过滤，我会更新上面的代码，以便人们可以看到我理解的内容。我真的完全没有看到问题
没关系，它完全有效，这是一个拼写错误，@Bergi 你的男人！