如何深度遍历嵌套对象提取电影标题至独立对象？

我们需要处理多层嵌套的JavaScript对象movies，遍历所有层级提取每个电影对象的title属性，最终生成以电影ID为键、标题为值的movieTitles对象。现有实现仅支持两层嵌套，无法适配animated这类更深层级结构，且需兼容未来新增的嵌套分类。

原始数据示例 #

const movies = {
  action: {
    actionMovie1: {
      title: "Action Movie 1",
      rating: 5,
    },
    actionMovie2: {
      title: "Action Movie 2",
      rating: 5,
    },
    actionMovie3: {
      title: "Action Movie 3",
      rating: 5,
    },
  },

  adventure: {
    adventureMovie1: {
      title: "Adventure Movie 1",
      rating: 5,
    },
    adventureMovie2: {
      title: "Adventure Movie 2",
      rating: 5,
    },
    adventureMovie3: {
      title: "Adventure Movie 3",
      rating: 5,
    },
  },

  animated: {
    new: {
      newAnimatedMovie1: {
        title: "New Animated Movie 1",
        rating: 5,
      },
      newAnimatedMovie2: {
        title: "New Animated Movie 2",
        rating: 5,
      },
    },
    reviewed: {
      reviewedAnimatedMovie1: {
        title: "Reviewed Animated Movie 1",
        rating: 5,
      },
      reviewedAnimatedMovie2: {
        title: "Reviewed Animated Movie 2",
        rating: 5,
      },
    },
  },
};

预期结果 #

const movieTitles = {
  actionMovie1: "Action Movie 1",
  actionMovie2: "Action Movie 2",
  actionMovie3: "Action Movie 3",

  adventureMovie1: "Adventure Movie 1",
  adventureMovie2: "Adventure Movie 2",
  adventureMovie3: "Adventure Movie 3",

  newAnimatedMovie1: "New Animated Movie 1",
  newAnimatedMovie2: "New Animated Movie 2",

  reviewedAnimatedMovie1: "Reviewed Animated Movie 1",
  reviewedAnimatedMovie2: "Reviewed Animated Movie 2",
};

当前代码的问题 #

现有代码仅支持两层嵌套，无法处理更深层级的结构：

const movieTitles = Object.fromEntries(
  Object.values(movies).flatMap((movie) =>
    Object.entries(movie).map(([key, value]) => [key, value.title])
  )
);

它只遍历了movies的直接子对象（如action、adventure），无法深入到animated下的new、reviewed等更深层级，导致部分电影标题无法提取。

通用解决方案 #

方案1：递归遍历 #

递归方案逻辑直观，适合大多数嵌套深度场景：

function extractMovieTitles(obj) {
  const result = {};
  for (const [key, value] of Object.entries(obj)) {
    // 识别电影对象：包含title属性
    if (value.hasOwnProperty('title')) {
      result[key] = value.title;
    } else if (typeof value === 'object' && value !== null) {
      // 递归处理嵌套对象，合并结果
      Object.assign(result, extractMovieTitles(value));
    }
  }
  return result;
}

// 生成目标对象
const movieTitles = extractMovieTitles(movies);

该函数会遍历对象的每个键值对，遇到电影对象则提取标题，遇到嵌套对象则递归处理，最终合并所有结果。

方案2：迭代式遍历（无递归） #

迭代式使用栈结构处理，避免递归可能的栈溢出问题，适合极深嵌套场景：

function extractMovieTitlesIterative(obj) {
  const result = {};
  const stack = [obj];
  
  while (stack.length > 0) {
    const current = stack.pop();
    for (const [key, value] of Object.entries(current)) {
      if (value.hasOwnProperty('title')) {
        result[key] = value.title;
      } else if (typeof value === 'object' && value !== null) {
        stack.push(value);
      }
    }
  }
  
  return result;
}

// 生成目标对象
const movieTitles = extractMovieTitlesIterative(movies);

通过栈保存待处理的对象，每次取出一个对象遍历，遇到嵌套对象则压入栈继续处理，直到所有层级遍历完成。

两种方案均能适配任意层级的嵌套结构，未来新增分类层级也无需修改代码，直接调用即可生成符合预期的movieTitles对象。

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