JavaScript中嵌套数组项的过滤方法及根据类型（Genre）筛选电影标题的实现方案

我来帮你搞定这两个问题！先解决你遇到的电影筛选具体问题，再聊聊嵌套数组过滤的通用思路。

一、修正你的电影筛选代码 #

你的现有代码逻辑走偏了：先对每个电影的genre数组做了map+filter，得到的是符合条件的类型数组（比如搜索"Sci-Fi"时，会得到[["Sci-Fi"], [], ["Sci-Fi"], [], [], []]），再过滤空数组后结果还是类型数组，不是你要的电影标题。

正确的思路应该是先筛选出包含目标类型的电影对象，再提取它们的标题，代码如下：

const result = [ 
 { title: "Mad Max: Fury Road", genre: ["Action", "Adventure", "Sci-Fi"], }, 
 { title: "The Hunger Games: Mockingjay Part 1", genre: ["Adventure", "Thriller"], }, 
 { title: "Jurassic World", genre: ["Action", "Adventure", "Sci-Fi"], }, 
 { title: "Everest", genre: ["Drama", "Thriller"], }, 
 { title: "Insurgent", genre: ["Adventure"], }, 
 { title: "Sicario", genre: ["Action", "Crime", "Drama"], }, 
];

const search = "Sci-Fi";
const newResult = result
  .filter(movie => movie.genre.includes(search)) // 第一步：筛选出genre包含目标类型的电影
  .map(movie => movie.title); // 第二步：提取这些电影的标题

console.log(newResult); // 输出：["Mad Max: Fury Road", "Jurassic World"]

代码解释： #

• filter(movie => movie.genre.includes(search))：保留所有genre数组包含search值的电影对象
• map(movie => movie.title)：将筛选后的电影对象转换为对应的标题字符串，得到最终结果

如果需要兼容genre可能不是数组的极端情况，可以加个前置判断：

.filter(movie => Array.isArray(movie.genre) && movie.genre.includes(search))

二、JavaScript嵌套数组过滤的通用方法 #

嵌套数组的过滤场景主要分两种，对应不同的处理方式：

1. 筛选外层数组元素（要求内层数组满足条件） #

比如像电影案例这样，要保留外层数组中内层数组包含特定值/符合特定条件的元素，核心是用filter结合内层数组的判断方法：

• 精确匹配值：用includes()
• 判断是否存在符合条件的元素：用some()（比如要找genre里包含长度大于5的类型）

示例：筛选genre里包含长度大于5的类型的电影

const longGenreMovies = result
  .filter(movie => movie.genre.some(genre => genre.length > 5))
  .map(movie => movie.title);
// 输出：["The Hunger Games: Mockingjay Part 1", "Everest"]

2. 提取内层数组中符合条件的元素（整理为一维数组） #

如果需要把所有内层数组中符合条件的元素提取出来，合并成一个一维数组，可以用flatMap（ES2019+支持）或者map+flat：

示例：提取所有电影的"Action"类型（去重的话可以结合Set）

// 用flatMap一步到位
const actionGenres = result
  .flatMap(movie => movie.genre.filter(genre => genre === "Action"));
// 输出：["Action", "Action", "Action"]

// 用map+flat的方式（兼容旧环境）
const actionGenres = result
  .map(movie => movie.genre.filter(genre => genre === "Action"))
  .flat(1); // flat(1)表示只展开一层嵌套

3. 多层嵌套数组的递归过滤 #

如果是更深层次的嵌套（比如数组→对象→数组→对象...），可以用递归函数遍历每一层，收集符合条件的元素：

示例：递归提取所有嵌套层级中的字符串类型值

function filterNestedArray(arr) {
  let result = [];
  arr.forEach(item => {
    if (typeof item === "string") {
      result.push(item);
    } else if (Array.isArray(item)) {
      result = result.concat(filterNestedArray(item));
    } else if (typeof item === "object" && item !== null) {
      result = result.concat(filterNestedArray(Object.values(item)));
    }
  });
  return result;
}

内容的提问来源于stack exchange，提问作者Jacob