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)

期望的输出是一个具有前一个结构的新（不可变）数组，除了已删除的项目（嵌套）

这是在运行方法并传递ID为2的待删除参数后的预期输出

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

我尝试过

使用Array.reduce（）或Array.filter（）转换函数，但它破坏了递归性，每次都返回未定义的值。

编辑：这不仅是一个简单的深度克隆问题，还涉及逻辑，例如检查父母是否有孩子。

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))

Answer 2

相反，您可以使用生成器来执行此操作，从而避免所有麻烦。然后yield*可用于将子级数据上移。

const data = [{"id":2,"children":[{"id":1,"children":[]}]},{"id":3,"children":[]}]

function * _removeId(data, id){
  for(o of data){
    if(o.id===id) yield* o.children;
    else yield Object.assign({},o,{children: removeId(o.children, id)});
  }
}

function removeId(data, id){
  return Array.from(_removeId(data, id));
}

console.log(removeId(data,1));
console.log(removeId(data,2));
console.log(removeId(data,3));

基本上，yield*将数组迭代推迟到另一个函数调用，因此，如果ID匹配，则在序列中插入子元素而不是根元素。这也意味着无需传递父对象。 Object.assign处理对象克隆，Array.from每次确保一个新的数组对象。

Answer 3

您可以通过递归创建数组来做到这一点

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

function removeData(myarray, removable) {
 var branch = [];
 var datas= {};
 myarray.forEach((dat, key) => {
  if(dat.id != removable) {
     datas.id = dat.id;
     datas.children = [];
  }

 if(dat.children.length >0) {
       var children =   removeData(dat.children, removable);
       if(children && datas.id) {
            datas.children = children;
        } else {
             datas = children[0];
        } 
    }
    if(datas.children || datas.id) {
        branch.unshift(datas);
        datas ={};
    }   
 });
 return branch;
 }

 console.log(JSON.stringify(removeData(data, 2)));

http://jsfiddle.net/djky4gtq/3/

使递归函数不可变？

我尝试过

3 个答案: