JS递归遍历树结构详解

一、JS递归遍历树结构并修改

function traverse(node) {
  if(node == null) return; //遍历结束
  node.value++; // 修改当前节点
  traverse(node.left); // 遍历左子树
  traverse(node.right); // 遍历右子树
}

以上代码遍历了一个树形结构，并对每一个节点的value值加1。

在遍历树形结构的过程中，每一个节点可以看作是一颗全新的树，因此，我们可以通过递归的方式在每个节点上重复执行遍历操作。这里需要注意的是，在对一个节点进行某种操作之后，需要继续递归遍历其左右子节点，否则会导致整个树形结构没有完全遍历到。

二、JS递归实现数组转树结构

function arrToTree(arr, pid) {
  let result = [];
  arr.forEach(item => {
    if(item.parentId === pid) {
      item.children = arrToTree(arr, item.id);
      result.push(item);
    }
  });
  return result;
}

以上代码可以将一个带有parentId和id的数组转换成树形结构，parentId为当前节点的父级节点的id，id为当前节点的唯一标识。函数中的arr参数为待转换的数组，pid为当前节点的parentId。

在遍历数组的过程中，识别每个节点的父节点与其他节点的关系，为节点添加children属性，将其转换为树形结构。这里还需要注意的是，函数需要返回生成的树形结构。

三、JS递归遍历树结构删除指定节点

function deleteNode(node, id) {
  if(node === null) return null;
  if(node.id === id) {
    return node.children;
  } else {
    node.children = node.children.map(child => deleteNode(child, id));
  }
  return node;
}

以上代码可以从树形结构中删除指定节点及其所有子节点。

在遍历树形结构的过程中，识别到需要删除的节点时，返回其子节点并赋值给该节点的父节点的children属性，从而删除该节点及其所有子节点。这里需要注意的是，在遍历树形结构时需要保持树形结构不断的完整性。

四、JS递归遍历DOM树

function traverse(el) {
  if(el === null) return; // 遍历结束
  // 对每一个元素进行某种操作
  traverse(el.firstElementChild); // 遍历子元素
  traverse(el.nextElementSibling); // 遍历下一个兄弟元素
}

以上代码可以遍历一个DOM树，对树中的每个元素进行某种操作。

遍历树形结构可以将DOM结构视为一颗树，从而递归的遍历树中的每一个元素。需要注意的是，在遍历DOM树时需要分别遍历其子元素和下一个兄弟元素。

五、JS递归树结构过滤

function filter(tree, func) {
  if(tree == null) return null;
  tree.children = tree.children
    .map(child => filter(child, func))
    .filter(child => child !== null);
  if(func(tree)) {
    return tree;
  } else if(tree.children.length > 0) {
    return {
      ...tree,
      children: tree.children
    };
  } else {
    return null;
  }
}

以上代码可以根据给定的过滤器筛选树形结构中符合条件的节点，并生成一个全新的树形结构。

在树形结构中过滤节点时，需要递归遍历树中的每个节点，进而将每个节点与过滤器进行比较，符合条件的节点需要加入到新生成的树中。需要注意的是，如果某个节点被任意一个子节点保留了，则需要将该节点添加到新生成的树中。

六、JS递归遍历树形结构并修改

function traverse(tree, func) {
  if(tree == null) return null;
  const newTree = func(tree);
  newTree.children = newTree.children.map(child => traverse(child, func));
  return newTree;
}

以上代码可以遍历树形结构并修改节点的属性。

在遍历树形结构时，首先需要对树中的每个节点进行某种操作，操作完成后需要继续递归遍历该节点的子节点，并将其构造为新的树形结构并返回。

七、JS递归生成树形结构

function createTree(data, parentId) {
  let tree = [];
  data.forEach(item => {
    if(item.parentId === parentId) {
      item.children = createTree(data, item.id);
      tree.push(item);
    }
  });
  return tree;
}

以上代码可以首先在数据集中找到根节点，然后递归创建整个树形结构。

在递归生成树形结构的过程中，需要将子节点添加到它的父节点中。如果某个节点不是根节点，则需要查找该节点的父节点并将其添加到父节点的children属性中，递归操作直至所有节点都被遍历到。

八、树结构从里往外遍历JS

function traverse(tree, func) {
  if(tree == null) return;
  const nodes = [tree];
  let node, children;
  while(nodes.length > 0) {
    node = nodes.shift();
    func(node);
    children = node.children || [];
    nodes.unshift(...children);
  }
}

以上代码可以从里往外遍历树形结构（自下而上遍历），并对每个节点进行某种操作。

在从里往外遍历树形结构时，需要使用循环代替递归。在遍历时，需要首先将根节点添加到数组中，然后循环遍历数组中的每个节点，并将其子元素添加到数组的前端，直至数组中所有节点都被遍历到。

九、JS递归遍历多维数组

function flat(arr) {
  let result = [];
  arr.forEach(item => {
    if(Array.isArray(item)) {
      result.push(...flat(item));
    } else {
      result.push(item);
    }
  });
  return result;
}

以上代码可以遍历一个多维数组，将其变为一维数组。

在递归的过程中，需要对数组中的每个元素进行分类，如果是一个数组则需对其递归调用函数进行扁平化处理，如果是其他元素则直接将其添加到结果数组中。

十、JS递归遍历树选取

function select(tree, fn) {
  if(tree == null) return [];
  const children = tree.children || [];
  const result = children
    .map(child => select(child, fn))
    .reduce((acc, val) => acc.concat(val), []);
  if(fn(tree)) {
    result.push(tree);
  }
  return result;
}

以上代码可以从树形结构中选取符合条件的节点，并返回符合条件的节点数组。

在遍历树形结构时，需要将符合条件的节点放入结果数组中，然后将所有子节点递归遍历，并将其返回的符合条件的节点合并到结果数组中。