編寫具有多個參數的數組排序和過濾函數的最佳方法是什麼？

Question

有一個遊戲目錄，其中的遊戲清單經過多個過濾器。

遊戲按平台劃分（HTC、PSVR、PS5、Favorites），當你點擊選項卡時，會觸發一個計算屬性，對於PS5 來說是showPS5Games，它接受選擇的流派（genre）、排序（selectedSort） )、複選框「適合兒童」(isChild)、複選框「適合兩個」(isLocalMultiplayer) 以及按名稱/標籤/流派搜尋遊戲（查詢）。所有參數都可以以任何方式組合。

showPS5Games 的完整程式碼：

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

我為每種可能的組合編寫了一個帶有許多 if 的分支函數，該函數沒有經過最佳化，也不美觀。此外，由於某種原因，透過兩個選定的複選框過濾數組不起作用，只有一個可以正常工作。重寫它的最佳方法是什麼？

Answer 1

這裡有很多重複的邏輯。提高效率的第一步是清理 if 語句。例如你有：

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

其中一些條件可以使用嵌套 if 檢查一次：

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

此外，同樣的原因，還可以簡化退貨。例如這個回傳

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

可以簡化為：

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

我希望這能幫助您弄清楚您在這裡遇到的其他問題，祝您好運！