Question

我有对象数组，每个对象必须具有键和标题，但是child是可选的，并且可以嵌套，我可以在child内多次生孩子。我想通过提供的键值（例如键677）删除一些对象。我尝试使用过滤器，但我只删除了第一级。也尝试过递归，但不确定我是否做对了。

const data = [{
    key: '1',
    title: 'title 1',
    children: [{
      key: '098',
      title: 'hey',
      children: [{
        key: '677',
        title: 'child'
      }]
    }]
  },
  {
    key: '123',
    title: 'tile 111'
  },
  {
    key: '345',
    title: 'something'
  }
];

const rem = '677';

const del = (el) => {
  if (!el.children) {
    return el.key !== rem;
  } else {
    if (el.key !== rem) {
      del(el.children);
      return el;
    }
  }
};
const res = data.filter((el) => {
  return del(el);
});

console.log(res);

Answer 1

我想您现有的解决方案就像

const data = [
  {
    key: '1',
    title: 'title 1',
    children: [{
      key: '098',
      title: 'hey',
      children: [{ key: '677', title: 'child'}]
    }]
  },
  { key: '123', title: 'tile 111' },
  { key: '345', title: 'something' }
];

function removeByKey(arr, removingKey){
  return arr.filter( a => a.key !== removingKey);
}

因此，它在第一级上起作用，但并不深入。

只需更改它即可完成工作

function removeByKey(arr, removingKey){
  return arr.filter( a => a.key !== removingKey).map( e => {
    return { ...e, children: removeByKey(e.children || [], removingKey)}
  });
}

几乎没有警告，对于没有孩子的每个商品，孩子属性不会设置为[]。

那么它如何工作？好吧，我们没有使用可接受的项目，而是使用{...e}制作了一个副本，在这种情况下，该副本等效于{key:e.key, title:e.title, children:e.children}。

我们知道用removeByKey(e.children || [], removingKey)覆盖属性子级的强制，因此我们递归地调用该方法。该功能无法正常运行。

Answer 2

您可以使用一些简单的递归来达到目的：

const data = [
  {
    key: '1',
    title: 'title 1',
    children: [
     {
      key: '098',
      title: 'hey',
      children: [{ key: '677', title: 'child'}]
     }
    ]
  },
  { key: '123', title: 'tile 111' },
  { key: '345', title: 'something' }
];

function removeByKey(key, arr) {
  // loop through all items of array
  for(let i = 0; i < arr.length; i++) {
    // if array item has said key, then remove it
    if(arr[i].key === key) {
      arr.splice(i, 1);
    } else if(typeof(arr[i].children) !== "undefined") {
      // if object doesn't have desired key but has children, call this function 
      // on the children array
      removeByKey(key, arr[i].children);
    }
  }
}

removeByKey('098', data);

console.log(data);

这可能比提供的其他答案更容易理解。

Answer 3

我将对findIndex和splice使用递归方法。使用some将允许代码退出而无需遍历整个树。

const data = [{
    key: '1',
    title: 'title 1',
    children: [{
      key: '098',
      title: 'hey',
      children: [{
        key: '677',
        title: 'child'
      }]
    }]
  },
  {
    key: '123',
    title: 'tile 111'
  },
  {
    key: '345',
    title: 'something'
  }
];

const removeKey = (data, key) => {
  // look to see if object exists
  const index = data.findIndex(x => x.key === key);
  if (index > -1) {
    data.splice(index, 1); // remove the object
    return true
  } else {
    // loop over the indexes of the array until we find one with the key
    return data.some(x => {
      if (x.children) {
        return removeKey(x.children, key);
      } else {
        return false;
      }
    })
  }
}

console.log(removeKey(data, '677'))
console.log(JSON.stringify(data));

Javascript-从嵌套数组中删除对象

3 个答案: