javascript - 是否可以获取与另一个数组中的项目匹配的对象数组中的所有项目的列表？

Question

我正在开发一个 React 项目，该项目允许我搜索游戏列表，帮助我根据自己的心情决定玩什么，目前我可以将游戏添加到 JSON 文件中但我在搜索部分真的很挣扎。

现在，要添加新游戏，您需要输入游戏的标题、类型和描述。流派字段是一个 ReduxForm FieldArray 对象，我认为这就是给我带来麻烦的原因。这是我当前的 JSON 文件

{
  "games": [
    {
      "name": "Rainbow Six: Siege",
      "genres": [
        {
          "genre": "tactical"
        },
        {
          "genre": "shooter"
        }
      ],
      "description": "tactical team based shooter",
      "id": 1
    },
    {
      "name": "Resident Evil 2",
      "genres": [
        {
          "genre": "horror"
        },
        {
          "genre": "survival"
        },
        {
          "genre": "shooter"
        }
      ],
      "description": "classic resident evil 2 remake in 2019",
      "id": 2
    },
    {
      "name": "Rocket League",
      "genres": [
        {
          "genre": "cars"
        },
        {
          "genre": "competition"
        },
        {
          "genre": "one more game"
        }
      ],
      "description": "soccar!",
      "id": 3
    }
  ]
}

这是我用来搜索的虚拟数据:

const searchedGenres = 'horror, shooter';
const searchedList = searchedGenres.split(', ');
let foundGame = [];

一旦我使用这些数据进行搜索，计划是允许我在前端的一个文本框中输入数据，因此“恐怖，射手”将是我的搜索词。此搜索的结果应该仅返回《生化危机 2》，但我也收到了《彩虹六号:围攻》，尽管它缺少我请求的类型之一。

searchedList.forEach(searchedGenre => {
  this.props.games.map(game => {
    if (
      game.genres.find(
        ({ genre }) =>
          genre.toLowerCase() ===
          searchedGenre.toLowerCase().trim()
      ) !== undefined
    ) {
      foundGames.push(game);
    }
  });
});

我明白为什么我会同时获得《彩虹六号》和《生化危机》，因为我实际上并没有检查这两种类型是否都在游戏类型中我将游戏添加到foundGames数组中，但我完全不知道在添加游戏之前如何确保所有类型都在游戏中。

Answer 1

如果您的流派是简单的字符串数组而不是对象，这会更容易一些，但您仍然可以通过利用 some() 和 every() 来非常简洁地检查filter() 中的 code> (顺便说一句，filter() 是比 map() + push() 更好的选择> 此处)

let games = [{"name": "Rainbow Six: Siege","genres": [{"genre": "tactical"},{"genre": "shooter"}],"description": "tactical team based shooter","id": 1},{"name": "Resident Evil 2","genres": [{"genre": "horror"},{"genre": "survival"},{"genre": "shooter"}],"description": "classic resident evil 2 remake in 2019","id": 2},{"name": "Rocket League","genres": [{"genre": "cars"},{"genre": "competition"},{"genre": "one more game"}],"description": "soccar!","id": 3}]

const searchedGenres = 'horror, shooter';
const searchedList = searchedGenres.split(', ');

let foundGame = games.filter(game => searchedList.every(searchItem => game.genres.some(g => g.genre == searchItem) ))
console.log(foundGame)

过滤条件基本上表示您希望 searchedList 中的每个游戏都至少匹配游戏中的一种类型。这将使其仅返回与每种类型匹配的游戏。