Question

我对过滤多个条件有疑问。我有一个可以正常工作的代码，在其中我可以使用filter函数在两个条件下进行过滤，但是当我要添加第三个条件时，这真的很困难。

在代码片段中，您可以看到两个过滤器选项的工作代码。我只需要找到一种过滤日期的方法，但这确实很困难。

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

{
  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>

Answer 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)
    // && …
  );
}

我想在3个条件下进行过滤时出现问题

1 个答案: