如何使用filter()函数删除嵌套数组中的指定元素

我明白你想在嵌套数组里删掉{id: 111,name: "A"}这个对象，但不知道怎么结合filter()处理嵌套结构。其实分两种场景处理就好，我给你一步步讲清楚：

场景1：单层嵌套（父元素包含children子数组） #

假设你的原始数据结构是类似这样的：

const originalData = [
  { id: 1, name: "Group 1", children: [{ id: 111, name: "A" }, { id: 222, name: "B" }] },
  { id: 2, name: "Group 2", children: [{ id: 333, name: "C" }] }
];

要删除children里id为111的元素，你可以用map()遍历主数组，对每个元素的children属性单独用filter()过滤：

// 生成新数组，不修改原数据
const updatedData = originalData.map(item => ({
  // 复制当前元素的所有属性
  ...item,
  // 过滤children数组，排除id=111的对象
  children: item.children.filter(child => child.id !== 111)
}));

如果主数组本身也可能存在id=111的元素，那主数组也要加一层filter()：

const updatedData = originalData
  .filter(parent => parent.id !== 111)
  .map(item => ({
    ...item,
    children: item.children.filter(child => child.id !== 111)
  }));

场景2：深层嵌套（子元素还有自己的children数组） #

如果你的数组是多层嵌套（比如子元素下还有嵌套的子数组），那就要用递归函数来遍历每一层：

// 递归函数：遍历任意层级的数组，删除指定ID的元素
function removeTargetItem(arr, targetId) {
  return arr.filter(item => {
    // 如果当前元素不是目标ID，就处理它的children（如果存在）
    if (item.id !== targetId) {
      // 检查是否有children数组，有的话递归处理
      if (item.children && Array.isArray(item.children)) {
        item.children = removeTargetItem(item.children, targetId);
      }
      // 保留这个元素
      return true;
    }
    // 如果是目标ID，直接过滤掉
    return false;
  });
}

// 使用示例
const updatedData = removeTargetItem(originalData, 111);

如果你不想修改原数据（保持不可变性），可以修改递归函数，每次都创建新对象：

function removeTargetItem(arr, targetId) {
  return arr
    .map(item => {
      // 复制当前元素，避免修改原对象
      const newItem = { ...item };
      // 递归处理children（如果有）
      if (newItem.children && Array.isArray(newItem.children)) {
        newItem.children = removeTargetItem(newItem.children, targetId);
      }
      return newItem;
    })
    .filter(item => item.id !== targetId);
}

这样不管嵌套多少层，都能精准删掉id为111的元素啦。

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