JavaScript如何从深层大型嵌套对象中提取slider和slides数据

目标数据结构参考截图：

核心思路 #

先梳理清楚数据的嵌套路径，再根据场景选择固定路径取值或者递归查找的方式提取目标数据，你需要的slider对象本身就内置了slides数组，提取一次就能拿到两部分数据。

方法1：固定路径直接取值（结构稳定场景首选） #

如果接口返回结构固定，直接顺着层级取值即可，性能最高。

注意：你提供的原始代码变量声明开头缺了co字符，实际使用时补全为const即可。

// 原始JSON字符串
const slide = `[{"data":{"pageLayouts":{"data":[{"attributes":{"title":"Home","subtitle":"Our project","slider":{"title":"She was undergoing treatment at Saifee Hospital in Mumbai for the past 15 day","slides":[{"id":"1","image":{"data":[{"id":"4","__typename":"UploadFileEntity"}],"__typename":"UploadFileRelationResponseCollection"},"title":"Prime Minister Narendra Modi","subtitle":"Prime Minis a Modi","__typename":"ComponentSlidesComSlides"},{"id":"3","image":{"data":[{"id":"5","__typename":"UploadFileEntity"}],"__typename":"UploadFileRelationResponseCollection"},"title":"Another slider","subtitle":"sub title for another slider","__typename":"ComponentSlidesComSlides"},{"id":"2","image":{"data":[{"id":"4","__typename":"UploadFileEntity"}],"__typename":"UploadFileRelationResponseCollection"},"title":"some more slider","subtitle":"sub title fore some more slider","__typename":"ComponentSlidesComSlides"}],"__typename":"ComponentSliderComSlider"},"__typename":"PageLayout"},"__typename":"PageLayoutEntity"}],"__typename":"PageLayoutEntityResponseCollection"}},"loading":false,"networkStatus":7,"stale":false}]`;

// 第一步：把JSON字符串解析为JS对象
const parsedData = JSON.parse(slide);

// 第二步：按层级路径提取目标slider（已包含内部slides数组）
// 层级路径：数组第0项 -> data -> pageLayouts -> data数组第0项 -> attributes -> slider
const targetSlider = parsedData[0].data.pageLayouts.data[0].attributes.slider;

如果担心中间某层数据为空导致报错，可以用可选链操作符做兼容：

const targetSlider = parsedData?.[0]?.data?.pageLayouts?.data?.[0]?.attributes?.slider;

提取完成后可直接使用对应数据：

• targetSlider.title：轮播主标题
• targetSlider.slides：轮播项数组，包含所有slide的id、图片、标题、副标题信息

方法2：递归深度查找（结构可能变动场景） #

如果后续接口返回结构可能调整，不需要提前记层级，写一个递归遍历函数自动查找目标key即可：

/**
 * 深度遍历对象查找指定key的值
 * @param {object|array} obj 待遍历的对象/数组
 * @param {string} targetKey 要查找的目标key名
 * @returns 找到的目标值，没找到返回null
 */
function findDeepByKey(obj, targetKey) {
  // 基础类型直接终止遍历
  if (typeof obj !== 'object' || obj === null) return null;
  // 当前层级存在目标key，直接返回对应值
  if (Object.prototype.hasOwnProperty.call(obj, targetKey)) return obj[targetKey];
  // 遍历所有子节点递归查找
  for (const key in obj) {
    const result = findDeepByKey(obj[key], targetKey);
    if (result) return result;
  }
  return null;
}

// 用法
const parsedData = JSON.parse(slide);
const targetSlider = findDeepByKey(parsedData, 'slider');

这个方法不管对象嵌套多深，只要内部存在key为slider的属性，就能正确提取到对应值。

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