搜索动态生成的多级对象数组

Question

我目前有一个 Javascript 对象数组，如下所示：

myArray = [
    {
        id: 'top-id1',
        title: 'title1',
        subElements: [
            {
                id: 'id2',
                title: 'title2',
                subElements: [
                    {
                        id: 'id3',
                        title: 'title2',
                        subElements: [
                            ...
                        ]
                    }
                ]
            },
            {
                id: 'id4',
                title: 'title4',
             },
             ...
         ]
     },
     {
         id: 'top-id5',
         title: 'title5',
         subElements: [
             ...
         ]
     },
     ...
];

这个数组在技术上可以无限长和无限深（通过子元素），但实际上它在顶层最多只有 4 个对象，并且最大深度为 4 级，因此性能和运行时不是一个大问题。

我要查找的内容： 给定任何 id，我需要返回包含第一个 id 的顶级对象的 id。因此，如果我得到“id3”，我需要返回“top-id1”。如果我得到'top-id5'，我还需要返回'top-id5'。重要的是，这是在 React 应用程序的上下文中。有人可以帮我找出一个算法吗？

Answer 1

这将适用于您的情况。

const myArray = [{ id: 'top-id1', title: 'title1', subElements: [{ id: 'id2', title: 'title2', subElements: [{ id: 'id3', title: 'title2', subElements: [ ] }] }, { id: 'id4', title: 'title4', }, ] }, { id: 'top-id5', title: 'title5', subElements: [ ] }, ];

function searchTree(element, matchingId) {
  if (element.id == matchingId) {
    return element;
  } else if (element.subElements != null) {
    var i;
    var result = null;
    for (i = 0; result == null && i < element.subElements.length; i++) {
      result = searchTree(element.subElements[i], matchingId);
    }
    return result;
  }
  return null;
}

function searchTopNode(element, data) {
  for (var i = 0; i < data.length; i++) {
    if (searchTree(data[i], element) != null)
      return data[i].id;
  }
}

console.log(searchTopNode('id3', myArray));
console.log(searchTopNode('top-id5', myArray));

Answer 2

const myArray = [{ id: 'top-id1', title: 'title1', subElements: [{ id: 'id2', title: 'title2', subElements: [{ id: 'id3', title: 'title2', subElements: [ ] }] }, { id: 'id4', title: 'title4', }, ] }, { id: 'top-id5', title: 'title5', subElements: [ ] }, ];

function deepSearch(obj, result) {

  if (typeof obj !== 'object') {
    return;
  }
  if (Array.isArray(obj)) {
    for (let i = 0, elem; elem = obj[i]; i++) {
      deepSearch(elem, result);
    }
    return;
  }
  if (!!obj['id']) {
    result.push(obj.id);
  }
  if (!!obj['subElements'] && Array.isArray(obj.subElements)) {
    deepSearch(obj.subElements, result);
  }
}

const results = [];
deepSearch(myArray, results);
console.log(results);

Answer 3

const myArray = [{ id: 'top-id1', title: 'title1', subElements: [{ id: 'id2', title: 'title2', subElements: [{ id: 'id3', title: 'title2', subElements: [ ] }] }, { id: 'id4', title: 'title4', }, ] }, { id: 'top-id5', title: 'title5', subElements: [ ] }, ];


function findRoot(array, id) {
  let node = null
  array.forEach(x => {
    if (x.id == id) {
      node = x
    } else {
      if (x.subElements) {
        let found = findRoot(x.subElements, id)
        if (found)
          node = x
      }
    }
    if (node)
      return
  })
  return node
}

var result = findRoot(myArray, 'id3')
if (result && result.id)
  document.querySelector('#result').innerHTML = result.id

<div id="result"></div>

也许是这样的？