如何根据 3 种不同条件进行过滤 (ReactJS)

Question

我有三个选择器：

• multiselector (genres)，例如所选流派 [14, 8, 6] 的数组 id，并应检查该数组中是否存在 'genre_id的 ID。

• year，这应该检查'release_year'的键值

• 输入字段，应该检查'title'和'artist'的键值

为空时的默认值

1. multiselector(流派) --> []
2. 年 --> []
3. 输入框 --> ''

请记住，当用户仅输入输入字段或仅选择流派时，它也应该起作用

为了构建一个函数，我需要过滤并检查对象键值中是否存在该函数。

Click on the link to codesandbox to get a better understanding of this issue

0: {id: 501437, artist: "Bob", title: "All In", release_year: 2014, genre_id: 14, …}
1: {id: 501649, artist: "Elina", title: "Veni paca to", release_year: 2014, genre_id: 8, …}
2: {id: 501895, artist: "Timbo", title: "I Should Have Known It", release_year: 2010, genre_id: 8, …}
3: {id: 502139, artist: "Wakanda", title: "Grove St. Party", release_year: 2011, genre_id: 6, …}
4: {id: 502992, artist: "Beyoncé", title: "Single Ladies (Put a Ring on It)", release_year: 2008, genre_id: 62,

所以我想知道如何编写一个简洁的代码来过滤所有内容。因此，如果我写类似“bob”的内容，但选择“2013”​​年，它将不会显示任何内容，如果我将“年份”更改为“2014”。然后'Bob' 'All In' 将显示在结果中。

const selectedYear = 2014;
const inputValue = 'bob';
const selectedGenres = [14, 6, 8];

const filterRequirements = (data: any) => {
        if(selectedYear !== data.release_year) return false;
        return true;
    }
const filteredVideos = videoList.filter(filterRequirements);

Answer 1

试试下面的过滤器。

• 添加了条件 inputValue.trim() == '' || ，因此如果未提供输入，则不会根据输入进行过滤。
• 类似添加了 selectedGenres.length == 0 || ，因此如果没有选择 Genres 进行过滤，则不会使用 Genres 进行过滤。
• 您也可以为 selectedYear 设置相同的条件，因为我无法假设它的默认值是什么，所以我没有添加这样的条件。
• 在条件中使用了 .ToLowerCase，因此它将以不区分大小写的方式显示结果。

let videoList = [
{id: 501437, artist: "Bob", title: "All In", release_year: 2014, genre_id: 14},
{id: 501649, artist: "Elina", title: "Veni paca to", release_year: 2014, genre_id: 8},
{id: 501895, artist: "Timbo", title: "I Should Have Known It", release_year: 2010, genre_id: 8},
{id: 502139, artist: "Wakanda", title: "Grove St. Party", release_year: 2011, genre_id: 6},
{id: 502992, artist: "Beyoncé", title: "Single Ladies (Put a Ring on It)", release_year: 2008, genre_id: 62}]

const selectedYear = [];
const inputValue = 'bob';
const selectedGenres = [14, 6, 8];

const filterRequirements = (data) => {  
  return (selectedYear == null || selectedYear == 0 || (Array.isArray(selectedYear) && selectedYear.length == 0) || data.release_year == selectedYear)
          && (inputValue.trim() == '' || data.artist.toLowerCase().includes(inputValue.toLowerCase()) || data.title.toLowerCase().includes(inputValue.toLowerCase()))
          && (selectedGenres.length == 0 || selectedGenres.includes(data.genre_id));
}

const filteredVideos = videoList.filter(filterRequirements);

console.log(filteredVideos);

Answer 2

const videos = [
    {id: 501437, artist: "Bob", title: "All In", release_year: 2014, genre_id: 14 },
    {id: 501649, artist: "Elina", title: "Veni paca to", release_year: 2014, genre_id: 8 },
    {id: 501895, artist: "Timbo", title: "I Should Have Known It", release_year: 2010, genre_id: 8 },
    {id: 502139, artist: "Wakanda", title: "Grove St. Party", release_year: 2011, genre_id: 6 },
    {id: 502992, artist: "Beyoncé", title: "Single Ladies (Put a Ring on It)", release_year: 2008, genre_id: 62 },
];

const selectedYear = 2011;
const inputValue = 'grove';
const selectedGenres = new Set([14, 6, 8]);

const filteredVideos = videos
.filter((video) => video.release_year === selectedYear)
.filter((video) => video.title.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0)
.filter((video) => selectedGenres.has(video.genre_id));

console.log(filteredVideos);

Answer 3

我会为每个过滤器操作设置单独的函数。在我看来，这将使实际的过滤更容易阅读和理解。

像这样：

const myArr = [
  {id: 501437, artist: "Bob", title: "All In", release_year: 2014, genre_id: 14 },
  {id: 501649, artist: "Elina", title: "Veni paca to", release_year: 2014, genre_id: 8 },
  {id: 501895, artist: "Timbo", title: "I Should Have Known It", release_year: 2010, genre_id: 8 },
  {id: 502139, artist: "Wakanda", title: "Grove St. Party", release_year: 2011, genre_id: 6 },
  {id: 502992, artist: "Beyoncé", title: "Single Ladies (Put a Ring on It)", release_year: 2008, genre_id: 62 },
];

const byYear = (year = 0, item) => (item.release_year === year);
const byArtist = (artist = '', item) => (item.artist === artist)
const byGenres = (genres = [], item) => (genres.includes(item.genre_id))

const filteredArr = myArr
  .filter(byYear.bind(this, 2014))
  .filter(byArtist.bind(this, 'Bob'))
  .filter(byGenres.bind(this, [14,6,8]));

console.log(filteredArr);

Answer 4

我真的不认为有“单衬”解决方案。一种可能：

const selectedYear = 2014;
const inputValue = "bob";
const selectedGenres = [14, 6, 8];

const checkYear = (data, year) => {
  return year ? data.release_year === year : true;
};
const checkValue = (data, value) => {
  return value
    ? data.artist.includes(value) || data.title.includes(value)
    : true;
};
const checkGenre = (data, genres) => {
  return genres ? genres.includes(data.genre_id) : true;
};

const filterRequirements = (data) =>
  checkYear(data, selectedYear) &&
  checkValue(data, inputValue) &&
  checkGenre(data, selectedGenres);

const filteredVideos = videoList.filter(filterRequirements);

取决于你想抽象到分离函数的程度。

编辑：具有多个 .filter() 的其他解决方案可能更好！