javascript - 使递归函数不可变？

Question

我有一个递归函数，它通过 id 删除一个项目，如果这个项目嵌套在子数组中，它会将它向上移动一个级别，它基本上是一种菜单结构。当一个项目被删除时， children 不会被扔掉，而是留在原来的对象中。

现在这需要一个“数据”参数并对其进行操作，但是 我想知道是否可以将其转换为返回全新数组的函数，同时保持参数不可变？

这是函数

function removeId(data, id, parent = null) {
  data.forEach((o, i) => {
    if (o.id && o.id === id) {
      if (parent) {
        o.children.forEach(c => parent.children.push(c));
      }
      data.splice(i, 1);
      return true;
    } else if (o.children) {
      removeId(o.children, id, o);
    }
  });
}

这是使用的测试数据

const data = [
  {
    id: 2,
    children: [
      {
        id: 1,
        children: []
      }
    ]
  },
  {
    id: 3,
    children: [],
  }
]

函数是这样调用的

data = removeId(data, itemIdToDelete)

预期的输出是一个新的(不可变的)数组，除了删除的项目(嵌套的)外，其结构与前一个数组相同

这是运行该方法并传递要删除的 2 的 id 后的预期输出

const data = [
  {
    id: 1,
    children: []
  },
  {
    id: 3,
    children: [],
  }
]

我试过了

• 使用 Array.reduce() 或 Array.filter() 转换函数，但它破坏了递归性并每次都返回未定义。

编辑:这不仅仅是一个简单的深度克隆问题，其中涉及逻辑，例如检查 parent 是否有 child 。

Answer 1

您可以使用 reduce 方法并在每个递归级别上创建新数组。

const data = [{"id":2,"children":[{"id":1,"children":[]}]},{"id":3,"children":[]}]

function removeId(data, id) {
  return data.reduce((r, e) => {
    // create shallow copy of the current object
    const o = Object.assign({}, e);
    
    // if object has children property
    // create nested copy of children with recursive call
    // where data param will now be children of the current element
    if(e.children) {
      o.children = removeId(e.children, id);
    }
    
    // if id of the current element is equal to target id
    // push(spread) its children to current accumulator - r
    // that will depend of the current recursion level
    // else just push current object shallow copy - o
    if (id == e.id) {
      r.push(...o.children)
    } else {
      r.push(o)
    }
    
    // return accumulator
    return r;
  }, [])
}

console.log(removeId(data, 1))
console.log(removeId(data, 3))
console.log(removeId(data, 2))