javascript - 删除 JS 嵌套对象数组中任意级别的项目

Question

给定一个像这样的对象数组:

var items = [{
  id: 1
}, {
  id: 2, 
  child: {
    id: 3
  }
}, {
  id: 4,
  child: {
    id: 5,
    child: {
      id: 6
    }
  }
}];

我需要一种方法来删除任何级别的项目。这段代码实现了我想要的功能，但是有更好的方法吗？

最初我尝试使用一个递归函数来完成此操作，但无法使其工作。

var removed = removeItems(items, 5);
print(removed);

function removeItems(items, id) {
  items.forEach(function(item, index, allItems) {
    if (item.id === id) {
      items.splice(index, 1);
    }
    if (item.child) {
      item = testChild(item, item.child, id);
    }
  });
  return items;
}

function testChild(parent, child, id) {
  if (child.id === id) {
    delete parent.child
    return parent;
  } else {
    if (child.child) {
      return testChild(child, child.child, id);
    }
    return parent;
  }
}

function print(obj) {
  document.querySelector('#out').innerHTML += JSON.stringify(obj, null, 2);
}

jsfiddle:https://jsfiddle.net/syvf46uL/12/

Answer 1

这是一个通用删除函数，应该可以按照您的需要工作。

var items = [{
    id: 1
  }, { 
    id: 2, 
    child: { id: 3 }
  }, {
    id: 4,
    child: { 
      id: 5, 
      child: { 
        id: 6 
      } 
    }
  }
];

function remove(src, predicate) {
  
  // for Array
  if (Array.isArray(src)) {
    for (var i=src.length-1; i>-1; i--) {
      if (predicate(src[i])) {
        src.splice(i, 1);
      } else {
        remove(src[i], predicate);
      }
    }
  }
  
  // for Object
  else {
    for (var i in src) {
      if (predicate(src[i])) {
        delete src[i];
      } else {
        remove(src[i], predicate);
      }
    }
  }
}

// remove id == 1
remove(items, function(element) {
  return element.id && element.id == 1;
});

console.log(JSON.stringify(items));

// remove id == 6
remove(items, function(element) {
  return element.id && element.id == 6;
});

console.log(JSON.stringify(items));

您的代码有一个重要问题，这是一个非常常见的错误，那就是您尝试通过 splice 缩小数组。方法 - 向前迭代时。这将导致您每次删除元素时都会跳过一个元素。

这样想，你正在迭代0->length ;您删除 ith元素;现在你之前(i + 1)th元素已成为您的ith元素;但你仍在迭代0->length从而导致您跳过新的 ith元素并转到 (i + 1)th元素，这是您之前的 (i + 2)th元素。这是通过向后迭代解决的 length->0 ;数组的收缩不会影响迭代器，因为收缩总是从 i+1->length 开始发生。在病房上，但您正在从 i->0 迭代.