Apakah cara terbaik untuk menulis fungsi pengisihan dan penapisan tatasusunan dengan berbilang parameter?
P粉982881583
P粉982881583 2024-01-16 23:10:56
0
1
461

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?

P粉982881583
P粉982881583

membalas semua(1)
P粉154798196

Terdapat banyak logik berulang di sini. Langkah pertama untuk meningkatkan kecekapan ialah membersihkan kenyataan if anda. Contohnya anda ada:

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

Sesetengah syarat ini boleh disemak sekali menggunakan nested ifs:

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

Selain itu, pemulangan boleh dipermudahkan atas sebab yang sama. Sebagai contoh, ini kembali

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

boleh dipermudahkan kepada:

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

Saya harap ini membantu anda mengetahui isu lain yang anda hadapi di sini, semoga berjaya!

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan