如何在JS嵌套数组及对象数组中根据id查找目标对象

问题描述 #

你有如下结构的嵌套数组，需要根据指定ID查找对应的对象，要求遍历所有嵌套层级（包括父级数组和子级数组），目标ID可能来自父级或任意子级：

const cars = [{
  id: 1,
  name: 'toyota',
  subs: [{
    id: 43,
    name: 'supra'
  }, {
    id: 44,
    name: 'prius'
  }]
}, {
  id: 2,
  name: 'Jeep',
  subs: [{
    id: 30,
    name: 'wranger'
  }, {
    id: 31,
    name: 'sahara'
  }]
}]
const selectedId = 31;

你原本的代码无法得到预期结果：

const result = cars.find((val) => val.subs.id === selectedId)
console.log(result) // undefined

期望输出为：

{id: 31, name: 'sahara'}

原代码问题分析 #

• val.subs是数组类型，直接访问val.subs.id会得到undefined，无法匹配目标ID
• 仅遍历父级数组，未深入子级数组查找
• 没有检查父级对象自身的ID是否与目标ID匹配

解决方案 #

方法1：递归查找（适合层级不深的场景） #

编写递归函数，遍历数组中的每个元素，先检查自身ID，再递归查找其子级数组：

function findById(arr, targetId) {
  for (const item of arr) {
    // 检查当前对象的ID是否匹配
    if (item.id === targetId) {
      return item;
    }
    // 如果存在子级数组，递归查找
    if (item.subs && Array.isArray(item.subs)) {
      const foundItem = findById(item.subs, targetId);
      if (foundItem) {
        return foundItem;
      }
    }
  }
  // 未找到匹配项时返回null
  return null;
}

// 使用示例
const result = findById(cars, selectedId);
console.log(result); // {id: 31, name: 'sahara'}

方法2：非递归队列查找（适合层级较深的场景，避免栈溢出） #

用队列存储待遍历的元素，循环处理队列中的每个元素，避免递归带来的调用栈限制：

function findById(arr, targetId) {
  // 初始化队列，放入所有父级元素
  const queue = [...arr];
  
  while (queue.length > 0) {
    const currentItem = queue.shift();
    // 检查当前元素ID
    if (currentItem.id === targetId) {
      return currentItem;
    }
    // 将子级元素加入队列待处理
    if (currentItem.subs && Array.isArray(currentItem.subs)) {
      queue.push(...currentItem.subs);
    }
  }
  return null;
}

// 使用示例
const result = findById(cars, selectedId);
console.log(result); // {id: 31, name: 'sahara'}

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