Quelle est la meilleure façon d'écrire des fonctions de tri et de filtrage de tableaux avec plusieurs paramètres ?

Question

Il existe un répertoire de jeux avec des listes de jeux passées via plusieurs filtres.

Les jeux sont divisés par plateforme (HTC, PSVR, PS5, Favoris). Lorsque vous cliquez sur l'onglet, une propriété calculée sera déclenchée. Pour PS5, il s'agit de showPS5Games, qui accepte le genre sélectionné (genre), le tri (selectedSort)). , Cochez la case "Convient aux enfants" (isChild), cochez la case "Convient pour deux" (isLocalMultiplayer) et recherchez des jeux par nom/tag/genre (requête). Tous les paramètres peuvent être combinés de n'importe quelle manière.

showPS5Games code complet :

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;
}

J'ai écrit une fonction de branchement avec de nombreux si pour chaque combinaison possible, qui n'était ni optimisée ni jolie. De plus, pour une raison quelconque, filtrer le tableau par deux cases à cocher sélectionnées ne fonctionne pas, une seule fonctionne correctement. Quelle est la meilleure façon de le réécrire ?

Answer 1

Il y a beaucoup de logique répétitive ici. La première étape pour améliorer l’efficacité consiste à nettoyer vos instructions if. Par exemple vous avez :

if (genre == "все" && isChild && isLocalMultiplayer) {
...
} else if (isChild && isLocalMultiplayer) {

Certaines de ces conditions peuvent être vérifiées une seule fois à l'aide de ifs imbriqués :

if (isChild && isLocalMultiplayer) {
    if (genre == "все" {
    ...
    }
}

De plus, les retours peuvent être simplifiés pour la même raison. Par exemple, ceci renvoie

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))
  );

peut être simplifié en :

return (
    game.category == "ps5" &&
    isChild &&
    game.isLocalMultiplayer && 
   (game.title.toLowerCase().includes(query) || 
    game.genre.includes(query) ||
    game.tag.includes(query))
);

J'espère que cela vous aidera à résoudre les autres problèmes que vous rencontrez ici, bonne chance !