JS如何在层级树形数组中根据title值查找对应节点的id

现有如下树形结构的层级数组数据：

var myData = [
    {
      id: 0,
      title:"Item 1"
    }, {
      id: 1,
      title:"Item 2",
      subs: [
        {
          id: 10,
          title:"Item 2-1",
          subs: [
        {
          id: 100,
          title:"Item 2-2-1"
        }, {
          id: 110,
          title:"Item 2-2-2"
        }, {
          id: 120,
          title:"Item 2-2-3"
        }
      ]
        }, {
          id: 11,
          title:"Item 2-2"
        }, {
          id: 12,
          title:"Item 2-3"
        }
      ]
    }, {
      id: 2,
      title:"Item 3"
    },
    // 更多数据
];

需求是根据title字段值匹配获取对应节点的id，之前尝试的方法：

console.log(myData.findIndex(item=>item.title==="Item 3"))

只能查找顶层节点，无法获取Item 2-2这类存在于subs字段下的子节点id。

数组原生的findIndex方法仅会遍历当前数组的单层元素，不会自动递归遍历子节点，要实现全层级查找，手写递归遍历逻辑即可：

/**
 * 树形结构按title查找对应节点id
 * @param {Array} tree 树形数据源
 * @param {string} targetTitle 要匹配的title值
 * @returns 匹配到的节点id，未找到返回undefined
 */
function getNodeIdByTitle(tree, targetTitle) {
  for (const node of tree) {
    // 当前节点匹配直接返回id
    if (node.title === targetTitle) return node.id
    // 存在子节点则递归查找
    if (Array.isArray(node.subs)) {
      const subMatchId = getNodeIdByTitle(node.subs, targetTitle)
      if (subMatchId !== undefined) return subMatchId
    }
  }
}

// 调用测试
console.log(getNodeIdByTitle(myData, "Item 3"))      // 输出 2
console.log(getNodeIdByTitle(myData, "Item 2-2"))    // 输出 11
console.log(getNodeIdByTitle(myData, "Item 2-2-2"))  // 输出 110

如果业务场景中存在多个重名title节点，需要返回所有匹配的id，可以用如下版本：

function getAllMatchedNodeIds(tree, targetTitle, matchedList = []) {
  for (const node of tree) {
    if (node.title === targetTitle) matchedList.push(node.id)
    if (Array.isArray(node.subs)) {
      getAllMatchedNodeIds(node.subs, targetTitle, matchedList)
    }
  }
  return matchedList
}

上述代码默认子节点存储字段为subs，如果实际业务中子节点字段名不同，替换代码中对应subs字段即可。

内容的提问来源于stack exchange，提问作者Владимир Кузовкин