JavaScript如何提取嵌套对象数组中selected为true的所有id

原有实现逻辑仅遍历数组第一层节点，没有处理subItems字段下的嵌套结构，因此无法获取子层级中符合条件的id。要覆盖所有层级的匹配项，遍历节点时增加递归判断，遇到存在嵌套子数组的节点深入遍历即可。

基础递归实现（易读易维护） #

const items = [
  {
    id: 1,
    name: 'banana',
    selected: true,
  },
  {
    id: 2,
    subItems: [
      {
        id: '2a',
        name: 'apple',
        selected: true,
      },
      {
        id: '2b',
        name: 'orange',
        selected: false,
      },
    ],
  },
  {
    id: 3,
    name: 'watermalon',
    selected: true,
  },
  {
    id: 4,
    name: 'pear',
    selected: false,
  },
]

function getSelectedIds(list) {
  const result = []
  for (const item of list) {
    // 收集当前节点符合条件的id
    if (item.selected) {
      result.push(item.id)
    }
    // 存在嵌套子项时递归遍历，合并子项结果
    if (Array.isArray(item.subItems)) {
      result.push(...getSelectedIds(item.subItems))
    }
  }
  return result
}

const selectedItemId = getSelectedIds(items)
console.log(selectedItemId) // 输出 [1, '2a', 3]，和预期结果完全一致

精简版实现（基于flatMap） #

如果偏好更短的代码写法，可以用flatMap实现同样的递归逻辑：

const getSelectedIds = list => list.flatMap(item => [
  ...(item.selected ? [item.id] : []),
  ...(item.subItems ? getSelectedIds(item.subItems) : [])
])

说明 #

• 上述递归逻辑支持任意深度的subItems嵌套，不局限于两层结构
• 用Array.isArray做类型判断，可以避免节点不存在subItems字段时触发运行时报错

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