javascript - 在 javascript 中搜索具有 id 的 child

Question

我有一个这样的数组:

[
    {
        id: "1233",
        parentId: "5436"
    },
    {
        id: "5436",
        parentId: "5664"
    },
    ...
]

它是一棵树的代表，有 child 和 parent 。所以它实际上是一个对象数组，每个对象都有一个 id 和一个父 id。

我想创建一个函数，最好使用 ES6 来搜索给定 id 的元素的所有子元素(不仅是直接子元素，还有子元素的子元素)。

或者，最好有一个函数将此数组转换为更方便的形式，例如具有 id 和子数组的对象数组。

我使用了以下功能进行搜索:

function searchForChildren(parentId, tree) {
const children = [];
tree.forEach(element => {
    if (element.parentUid === parentId) {
        children.push(element);
    }
});
for (const child of children) {
    const childrenTemp = searchForChildren(child.id, tree);
    children.concat(childrenTemp);
}
return children;
}

示例数据如下:

 0: {id: "7020441", parentUid: "2442074"}
 1: {id: "7020438", parentUid: "2442077"}
 2: {id: "7020435", parentUid: "2442079"}
 3: {id: "7020437", parentUid: "2442079"}
 4: {id: "7013749", parentUid: "2442086"}
 5: {id: "7013750", parentUid: "2442086"}
 6: {id: "7013752", parentUid: "2442086"}
 7: {id: "7013753", parentUid: "2442086"}
 8: {id: "7013751", parentUid: "2442086"}
 9: {id: "7013746", parentUid: "2442089"}
 10: {id: "7013747", parentUid: "2442089"}
 11: {id: "7013765", parentUid: "2442092"}
 12: {id: "7013767", parentUid: "2442092"}
 13: {id: "7013768", parentUid: "2442092"}
 14: {id: "7013765", parentUid: "2442092"}
 15: {id: "7013767", parentUid: "2442092"}
 16: {id: "7013768", parentUid: "2442092"}
 17: {id: "7013765", parentUid: "2442092"}
 18: {id: "7013767", parentUid: "2442092"}
 19: {id: "7013768", parentUid: "2442092"}
 20: {id: "7013765", parentUid: "2442092"}
 21: {id: "7013767", parentUid: "2442092"}
 22: {id: "7013768", parentUid: "2442092"}
 23: {id: "7013765", parentUid: "2442092"}
 24: {id: "7013767", parentUid: "2442092"}
 25: {id: "7013768", parentUid: "2442092"}
 26: {id: "7013765", parentUid: "2442092"}
 27: {id: "7013767", parentUid: "2442092"}
 28: {id: "7013768", parentUid: "2442092"}
 29: {id: "7013765", parentUid: "2442092"}
 30: {id: "7013767", parentUid: "2442092"}
 31: {id: "7013768", parentUid: "2442092"}
 32: {id: "7013765", parentUid: "2442092"}
 33: {id: "7013767", parentUid: "2442092"}
 34: {id: "7013768", parentUid: "2442092"}
 35: {id: "7013765", parentUid: "2442092"}
 36: {id: "7013767", parentUid: "2442092"}
 37: {id: "7013768", parentUid: "2442092"}
 38: {id: "7013765", parentUid: "2442092"}
 39: {id: "7013767", parentUid: "2442092"}
 40: {id: "7013768", parentUid: "2442092"}
 41: {id: "7013765", parentUid: "2442092"}
 42: {id: "7013767", parentUid: "2442092"}
 43: {id: "7013768", parentUid: "2442092"}
 44: {id: "7013765", parentUid: "2442092"}
 45: {id: "7013767", parentUid: "2442092"}
 46: {id: "7013768", parentUid: "2442092"}
 47: {id: "2442074", parentUid: ""}
 48: {id: "2442075", parentUid: "2442074"}
 49: {id: "2442076", parentUid: "2442075"}
 50: {id: "2442077", parentUid: "2442076"}
 51: {id: "2442078", parentUid: "2442076"}
 52: {id: "2442079", parentUid: "2442075"}
 53: {id: "2442080", parentUid: "2442075"}
 54: {id: "2442081", parentUid: "2442075"}
 55: {id: "2442082", parentUid: "2442074"}
 56: {id: "2442083", parentUid: "2442074"}
 57: {id: "2442084", parentUid: "2442074"}
 58: {id: "2442085", parentUid: "2442084"}
 59: {id: "2442086", parentUid: "2442084"}
 60: {id: "2442087", parentUid: "2442084"}
 61: {id: "2442088", parentUid: "2442084"}
 62: {id: "2442089", parentUid: "2442088"}
 63: {id: "2442090", parentUid: "2442074"}
 64: {id: "2442091", parentUid: "2442090"}
 65: {id: "2442092", parentUid: "2442091"}
 66: {id: "2442092", parentUid: "2442091"}
 67: {id: "2442092", parentUid: "2442091"}
 68: {id: "2442091", parentUid: "2442090"}
 69: {id: "2442092", parentUid: "2442091"}
 70: {id: "2442092", parentUid: "2442091"}
 71: {id: "2442092", parentUid: "2442091"}
 72: {id: "2442091", parentUid: "2442090"}
 73: {id: "2442092", parentUid: "2442091"}
 74: {id: "2442092", parentUid: "2442091"}
 75: {id: "2442092", parentUid: "2442091"}
 76: {id: "2442091", parentUid: "2442090"}
 77: {id: "2442092", parentUid: "2442091"}
 78: {id: "2442092", parentUid: "2442091"}
 79: {id: "2442092", parentUid: "2442091"}
 80: {id: "2442093", parentUid: "2442090"}
 81: {id: "2442094", parentUid: "2442074"}
 82: {id: "2442095", parentUid: "2442074"}

Answer 1

您使用递归的想法是正确的。您唯一的错误是您使用的 children.concat(childrenTemp) 对原始数组没有任何作用。而是使用 children.push(...childrenTemp)。

这是固定版本:

const data = [{
    id: "2442086",
    parentUid: "2442074"
  },
  {
    id: "7020438",
    parentUid: "2442077"
  },
  {
    id: "7020435",
    parentUid: "2442079"
  },
  {
    id: "7020437",
    parentUid: "2442079"
  },
  {
    id: "2442092",
    parentUid: "2442086"
  },
  {
    id: "7013750",
    parentUid: "2442086"
  },
  {
    id: "7013752",
    parentUid: "2442086"
  },
  {
    id: "7013753",
    parentUid: "2442086"
  },
  {
    id: "7013751",
    parentUid: "2442086"
  },
  {
    id: "7013746",
    parentUid: "2442089"
  },
  {
    id: "7013747",
    parentUid: "2442089"
  },
  {
    id: "7013765",
    parentUid: "2442092"
  },
  {
    id: "7013767",
    parentUid: "2442092"
  },
  {
    id: "7013768",
    parentUid: "2442092"
  },
  {
    id: "7013765",
    parentUid: "2442092"
  },
  {
    id: "7013767",
    parentUid: "2442092"
  },
  {
    id: "7013768",
    parentUid: "2442092"
  },
  {
    id: "7013765",
    parentUid: "2442092"
  },
  {
    id: "7013767",
    parentUid: "2442092"
  },
  {
    id: "7013768",
    parentUid: "2442092"
  },
  {
    id: "7013765",
    parentUid: "2442092"
  },
  {
    id: "7013767",
    parentUid: "2442092"
  },
  {
    id: "7013768",
    parentUid: "2442092"
  },
  {
    id: "7013765",
    parentUid: "2442092"
  },
  {
    id: "7013767",
    parentUid: "2442092"
  },
  {
    id: "7013768",
    parentUid: "2442092"
  },
  {
    id: "7013765",
    parentUid: "2442092"
  },
  {
    id: "7013767",
    parentUid: "2442092"
  }
];


function searchForChildren(parentId, tree) {
  const children = [];
  tree.forEach(element => {
    if (element.parentUid === parentId) {
      children.push(element);
    }
  });
  for (const child of children) {
    const childrenTemp = searchForChildren(child.id, tree);
    children.push(...childrenTemp);
  }
  return children;
}

console.log(searchForChildren("2442092", data));
console.log(searchForChildren("2442086", data));

来自docs :

The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.