如何用JavaScript过滤深层嵌套数组中navigation为true的对象？

问题背景 #

给定多层嵌套的页面导航数据数组，需要提取所有包含"navigation": true的对象。原始数据如下：

[
        {
          "name": "home page",
          "title": "Find Jobs in Technology",
          "url": "https://www.url1.com/",
          "elements": [
            {
              "category": "navigation",
              "buttons": [
                {
                  "title": "Tech Careers",
                  "type": "DropDown",
                  "options": [
                    {
                      "title": "Job Search",
                      "type": "Button",
                      "navigation": true
                    },
                    {
                      "title": "Career Events",
                      "type": "Button",
                      "navigation": false
                    }
                  ]
                },
                {
                  "title": "Insights",
                  "type": "Link",
                  "navigation": true
                }
              ]
            }
          ]
        },
        {
          "name": "tech careers",
          "title": "careers",
          "url": "https://www.url1.com/careers",
          "elements": [
            {
              "category": "navigation",
              "buttons": [
                {
                  "title": "Login",
                  "type": "Link",
                  "navigation": true
                }
              ]
            }
          ]
        }
    ]

预期过滤结果：

[
  {
    "title": "Job Search",
    "type": "Button",
    "navigation": true
  },
  {
    "title": "Insights",
    "type": "Link",
    "navigation": true
  },
  {
    "title": "Login",
    "type": "Link",
    "navigation": true
  }
]

常规的Array.filter仅适用于单层数组，无法处理这种多层嵌套结构，需要递归遍历解决。

解决方案 #

使用递归遍历所有层级的对象，收集符合条件的项：

function collectNavigationTrueItems(data) {
  const result = [];

  data.forEach(item => {
    // 检查当前对象是否满足条件
    if (item.navigation === true) {
      result.push(item);
    }

    // 遍历对象属性，处理嵌套数组
    for (const key in item) {
      if (Array.isArray(item[key])) {
        // 递归处理嵌套数组并合并结果
        result.push(...collectNavigationTrueItems(item[key]));
      }
    }
  });

  return result;
}

// 原始数据
const originalData = [
  {
    "name": "home page",
    "title": "Find Jobs in Technology",
    "url": "https://www.url1.com/",
    "elements": [
      {
        "category": "navigation",
        "buttons": [
          {
            "title": "Tech Careers",
            "type": "DropDown",
            "options": [
              {
                "title": "Job Search",
                "type": "Button",
                "navigation": true
              },
              {
                "title": "Career Events",
                "type": "Button",
                "navigation": false
              }
            ]
          },
          {
            "title": "Insights",
            "type": "Link",
            "navigation": true
          }
        ]
      }
    ]
  },
  {
    "name": "tech careers",
    "title": "careers",
    "url": "https://www.url1.com/careers",
    "elements": [
      {
        "category": "navigation",
        "buttons": [
          {
            "title": "Login",
            "type": "Link",
            "navigation": true
          }
        ]
      }
    ]
  }
];

// 执行过滤
const filteredItems = collectNavigationTrueItems(originalData);
console.log(filteredItems);

代码说明 #

1. 递归遍历：函数会遍历传入的数组，对每个对象先检查是否符合navigation: true的条件，符合则加入结果数组。
2. 处理嵌套数组：遍历对象的所有属性，若属性值为数组，则递归调用自身处理该数组，将返回的结果展开合并到总结果中。
3. 通用性：该方法支持任意深度的嵌套结构，不会遗漏任何层级的符合条件对象。

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