高效遍历与操作树形结构：实用的 JavaScript 实现

在处理复杂的数据结构时，树形结构是一种常见的组织方式。无论是文件系统还是网站导航，树形结构都能有效地管理和展示信息。然而，如何高效地遍历和操作这些树形结构中的节点，成为了开发者们经常面临的挑战。本文将介绍一种实用的JavaScript实现方法——treeLoop函数，它可以帮助您轻松地遍历树形结构、查找特定节点以及更新节点状态。通过使用treeLoop，您可以更加灵活地管理树形结构中的数据，无论是在文件系统中查找特定文件，还是在网站导航中更新节点信息，都将变得轻而易举。接下来，我们将深入探讨这一方法的具体实现细节，以及如何将其应用于实际项目中，以提高开发效率并优化用户体验。

/**
 * 遍历树形结构的函数。
 * 
 * @param {treeDataNode[]} data - 树形结构的数据数组。
 * @param {React.Key | null} key - 要查找的节点ID，如果为null则遍历所有节点。
 * @param {function} callback - 回调函数，用于处理找到的节点。
 *   - node: 当前节点的所有数据。
 *   - i: 当前节点在数据数组中的索引。
 *   - data: 当前层级的所有节点数据。
 *   - parent: 当前节点的父节点数据。
 * @param {treeDataNode | null} [parentNode=null] - 当前节点的父节点，默认为null。
 */

const treeLoop = (data, key, callback, parentNode = null) => {
  for (let i = 0; i < data.length; i++) {
    const currentNode = data[i];
    
    // 如果 key 未指定，则对每个节点执行回调
    if (key === null) {
      callback(currentNode, i, data, parentNode);
      
      // 如果当前节点有子节点，则递归遍历子节点
      if (currentNode.children) {
        treeLoop(currentNode.children, key, callback, currentNode);
      }
    } else {
      // 如果找到了匹配的 key，则执行回调并停止搜索
      if (currentNode.id === key) {
        callback(currentNode, i, data, parentNode);
        return; // 找到后直接返回
      }
      
      // 如果当前节点有子节点，则递归遍历子节点
      if (currentNode.children) {
        treeLoop(currentNode.children, key, callback, currentNode);
      }
    }
  }
};

// 示例用法:
// treeLoop(treeData, targetId, myCallbackFunction);

treeLoop 函数是一个通用的树形结构遍历工具，可用于多种场景，例如查找特定节点、更新节点状态等。通过传递不同的 callback 函数，可以实现不同的功能。当 key 为 null 时，callback 将在遍历到每一个节点时被调用；而当 key 不为空时，只有在找到与 key 匹配的节点时才会调用 callback。

本文被 前端开发 专题收录