如何在未知深度的嵌套数组中查找并删除指定ID元素？

对于这种嵌套深度不固定的数组结构，递归遍历是最适配的解决方案，固定层数循环显然无法应对任意深度的场景。以下是几种实用的实现方式，以及对应的最佳实践：

1. 直接修改原数组的递归实现 #

这个方法会直接修改输入的数组，找到目标ID元素后立即删除并终止遍历：

function removeNestedItem(arr, targetId) {
  for (let i = 0; i < arr.length; i++) {
    const item = arr[i];
    // 匹配到目标ID，删除元素并返回成功标记
    if (item.id === targetId) {
      arr.splice(i, 1);
      return true;
    }
    // 存在子数组则递归处理
    if (item.children?.length) {
      const deleted = removeNestedItem(item.children, targetId);
      if (deleted) return true;
    }
  }
  return false; // 未找到目标元素
}

// 使用示例
removeNestedItem(exampleArray, 'your-target-id');

逻辑说明 #

• 遍历当前数组的每个元素，优先检查当前元素是否为目标
• 若当前元素不是目标，且存在children子数组，则递归进入子数组继续查找
• 一旦找到并删除目标元素，立即返回true终止整个递归流程，避免不必要的遍历

2. 纯函数式实现（不修改原数组） #

如果需要保持原数组不变（比如React状态管理场景），可以用纯函数方式返回全新的数组：

function removeNestedItemPure(arr, targetId) {
  return arr.reduce((result, item) => {
    // 匹配到目标ID，跳过该元素
    if (item.id === targetId) {
      return result;
    }
    // 递归处理子数组，生成新的子元素结构
    const updatedItem = {
      ...item,
      children: item.children ? removeNestedItemPure(item.children, targetId) : []
    };
    result.push(updatedItem);
    return result;
  }, []);
}

// 使用示例
const newArray = removeNestedItemPure(exampleArray, 'your-target-id');

逻辑说明 #

• 用reduce遍历数组，逐个构建新的结果数组
• 遇到目标ID元素时直接跳过，不加入结果
• 非目标元素会被浅拷贝，并递归处理其children子数组，保证整个结构是全新的

3. 迭代式实现（避免递归栈溢出） #

如果嵌套数组的深度极大（比如超过1000层），递归可能导致栈溢出，此时可以用**深度优先搜索（DFS）**的迭代版本：

function removeNestedItemIterative(arr, targetId) {
  // 栈中存储每个元素的父数组、元素本身和索引
  const stack = arr.map((item, index) => ({ parentArr: arr, item, index }));

  while (stack.length > 0) {
    const { parentArr, item, index } = stack.pop();

    if (item.id === targetId) {
      parentArr.splice(index, 1);
      return true;
    }

    // 将子元素推入栈，保持遍历顺序
    if (item.children?.length) {
      item.children.forEach((child, idx) => {
        stack.push({ parentArr: item.children, item: child, index: idx });
      });
    }
  }
  return false;
}

逻辑说明 #

• 用栈模拟递归调用过程，避免JavaScript引擎的递归栈限制
• 每次从栈中取出元素处理，找到目标则删除，否则将子元素推入栈继续处理

最佳实践总结 #

• 大多数场景下优先选择递归实现，代码简洁易读，开发效率高
• 需要保持数据不可变性时，使用纯函数式实现
• 处理超大规模/极深嵌套的数组时，改用迭代式DFS避免栈溢出

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