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;
}

以上代碼可以從樹形結構中選取符合條件的節點，並返回符合條件的節點數組。

在遍歷樹形結構時，需要將符合條件的節點放入結果數組中，然後將所有子節點遞歸遍歷，並將其返回的符合條件的節點合併到結果數組中。