妙不可言！掌握Ctrl多选树状数据的两种超强方式

2023-12-14 02:25:54

Ctrl 多选树状数据：两种超强方式

在前端开发中，处理树状数据，例如文件目录、组织结构和菜单，是一种常见任务。为了满足用户对多选操作的需求，使用 Ctrl 键配合鼠标是高效实用的解决方案。本文将深入探讨两种实现 Ctrl 多选树状数据的超强方式：循环方法和递归方法。

循环方法：简单易行

循环方法以其简单易懂的特点著称，是实现 Ctrl 多选树状数据的初学者友好选项。它通过以下步骤完成：

获取节点引用： 首先，我们需要获取所有树状数据节点的引用，以便对它们进行操作。
循环遍历： 使用循环遍历这些节点，逐个检查其选中状态。
添加选中节点： 如果当前节点被选中，将其添加到选中的节点列表中。
返回选中列表： 循环完成后，我们将选中的节点列表返回给调用者。

function getCheckedNodes(nodes) {
  const checkedNodes = [];
  for (let i = 0; i < nodes.length; i++) {
    const node = nodes[i];
    if (node.checked) {
      checkedNodes.push(node);
    }
  }
  return checkedNodes;
}

循环方法的优点在于其简洁易懂，实现起来也相对容易。然而，它的效率问题在处理大型树状数据时尤为明显，因为需要遍历所有节点。

递归方法：高效强大

递归方法提供了更高效的解决方案，特别适合处理大型树状数据。它遵循以下步骤：

获取根节点： 首先，我们需要获取树状数据的根节点。
递归遍历： 使用递归函数遍历根节点及其所有子节点。
检查选中状态： 在递归过程中，检查每个节点的选中状态。
添加选中节点： 如果当前节点被选中，将其添加到选中的节点列表中。
返回选中列表： 递归结束后，我们将选中的节点列表返回给调用者。

function getCheckedNodes(node) {
  const checkedNodes = [];
  if (node.checked) {
    checkedNodes.push(node);
  }
  for (let i = 0; i < node.children.length; i++) {
    const childNode = node.children[i];
    checkedNodes.push(...getCheckedNodes(childNode));
  }
  return checkedNodes;
}

递归方法的效率优势体现在其只遍历被选中的节点和它们的子节点。当树状数据庞大时，这种有针对性的遍历方式大大减少了计算量。然而，递归方法的实现略显复杂，可能需要对递归概念有一定的了解。