Terdapat direktori permainan dengan penyenaraian permainan yang melalui berbilang penapis.

Permainan dibahagikan mengikut platform (HTC, PSVR, PS5, Kegemaran Apabila anda mengklik pada tab, sifat yang dikira akan dicetuskan untuk PS5 ia adalah showPS5Games, yang menerima genre (genre), pengisihan (selectedSort)). , Kotak semak "Sesuai untuk kanak-kanak" (isChild), kotak semak "Sesuai untuk dua orang" (isLocalMultiplayer) dan cari permainan mengikut nama/tag/genre (pertanyaan). Semua parameter boleh digabungkan dalam apa jua cara.

tunjukkan kod penuh PS5Games:

showPS5Games: state => (
  query,
  genre,
  isChild,
  isLocalMultiplayer,
  selectedSort
) => {
  if (genre == "все" && isChild && isLocalMultiplayer) {
    var tmpArray = state.games.filter(game => {
      return (
        (game.category == "ps5" &&
          isChild &&
          game.isLocalMultiplayer &&
          game.title.toLowerCase().includes(query)) ||
        (game.category == "ps5" &&
          isChild &&
          game.isLocalMultiplayer &&
          game.genre.includes(query)) ||
        (game.category == "ps5" &&
          isChild &&
          game.isLocalMultiplayer &&
          game.tag.includes(query))
      );
    });
  } else if (isChild && isLocalMultiplayer) {
    var tmpArray = state.games.filter(game => {
      return (
        (game.category === "ps5" &&
          isChild &&
          game.isLocalMultiplayer &&
          game.genre === genre &&
          game.title.toLowerCase().includes(query)) ||
        (game.category === "ps5" &&
          isChild &&
          game.isLocalMultiplayer &&
          game.genre === genre &&
          game.genre.includes(query)) ||
        (game.category === "ps5" &&
          isChild &&
          game.isLocalMultiplayer &&
          game.genre === genre &&
          game.tag.includes(query))
      );
    });
  } else if (genre === "все" && isChild) {
    var tmpArray = state.games.filter(game => {
      return (
        (game.category === "ps5" &&
          game.isChild &&
          game.title.toLowerCase().includes(query)) ||
        (game.category === "ps5" &&
          game.isChild &&
          game.genre.includes(query)) ||
        (game.category === "ps5" &&
          game.isChild &&
          game.tag.includes(query))
      );
    });
  } else if (isChild) {
    var tmpArray = state.games.filter(game => {
      return (
        (game.category === "ps5" &&
          game.isChild &&
          game.genre === genre &&
          game.title.toLowerCase().includes(query)) ||
        (game.category === "ps5" &&
          game.isChild &&
          game.genre === genre &&
          game.genre.includes(query)) ||
        (game.category === "ps5" &&
          game.isChild &&
          game.genre === genre &&
          game.tag.includes(query))
      );
    });
  } else if (genre === "все" && isLocalMultiplayer) {
    var tmpArray = state.games.filter(game => {
      return (
        (game.category === "ps5" &&
          game.isLocalMultiplayer &&
          game.title.toLowerCase().includes(query)) ||
        (game.category === "ps5" &&
          game.isLocalMultiplayer &&
          game.genre.includes(query)) ||
        (game.category === "ps5" &&
          game.isLocalMultiplayer &&
          game.tag.includes(query))
      );
    });
  } else if (isLocalMultiplayer) {
    var tmpArray = state.games.filter(game => {
      return (
        (game.category === "ps5" &&
          game.isLocalMultiplayer &&
          game.genre === genre &&
          game.title.toLowerCase().includes(query)) ||
        (game.category === "ps5" &&
          game.isLocalMultiplayer &&
          game.genre === genre &&
          game.genre.includes(query)) ||
        (game.category === "ps5" &&
          game.isLocalMultiplayer &&
          game.genre === genre &&
          game.tag.includes(query))
      );
    });
  } else if (genre === "все") {
    var tmpArray = state.games.filter(game => {
      return (
        (game.category === "ps5" &&
          game.title.toLowerCase().includes(query)) ||
        (game.category === "ps5" && game.genre.includes(query)) ||
        (game.category === "ps5" && game.tag.includes(query))
      );
    });
  } else {
    var tmpArray = state.games.filter(game => {
      return (
        (game.category === "ps5" &&
          game.genre === genre &&
          game.title.toLowerCase().includes(query)) ||
        (game.category === "ps5" &&
          game.genre === genre &&
          game.genre.includes(query)) ||
        (game.category === "ps5" &&
          game.genre === genre &&
          game.tag.includes(query))
      );
    });
  }
  var filteredGames = [];
  if (selectedSort == "ascending") {
    filteredGames = tmpArray.sort((a, b) => a.title.localeCompare(b.title));
  } else if (selectedSort == "descending") {
    filteredGames = tmpArray.sort((a, b) => b.title.localeCompare(a.title));
  } else if (selectedSort == "bygenre") {
    filteredGames = tmpArray.sort((a, b) => a.genre.localeCompare(b.genre));
  } else if (selectedSort == "bytag") {
    filteredGames = tmpArray.sort((a, b) => a.tag.localeCompare(b.tag));
  } else {
    filteredGames = tmpArray;
  }
  return filteredGames;
}

Saya menulis fungsi percabangan dengan banyak ifs untuk setiap kombinasi yang mungkin, yang tidak dioptimumkan dan tidak cantik. Selain itu, atas sebab tertentu menapis tatasusunan dengan dua kotak pilihan yang dipilih tidak berfungsi, hanya satu yang berfungsi dengan baik. Apakah cara terbaik untuk menulis semula?