JavaScript实现树结构转换的五种方法总结

当需要将树形结构进行转换时，可以采用JavaScript进行处理。下面介绍JavaScript实现树结构转换的五种方法总结。

方法一：递归法

递归法是常用的处理树形结构的方式。将树形结构节点递归展开，然后通过JS数组的push方法进行数据填充。

function treeArray(tree) {
  var arr = [];
  tree.forEach(function(node) {
    var obj = {
      id: node.id,
      name: node.name
    };
    if (node.children && node.children.length > 0) {
      obj.children = treeArray(node.children);
    }
    arr.push(obj);
  });
  return arr;
}

// 示例

var tree = [{
  id: 1,
  name: 'Node1',
  children: [{
      id: 2,
      name: 'Child1'
    },
    {
      id: 3,
      name: 'Child2'
    }
  ]
}];

var result = treeArray(tree);
console.log(result); // 输出结果：[{id: 1, name: 'Node1', children: [{id: 2, name: 'Child1'}, {id: 3, name: 'Child2'}]}]

方法二：广度优先遍历

广度优先遍历的过程中，借助了队列实现。遍历树形结构，将节点塞入队列中，并不断输出队列头节点，并将其子节点加入队列中。

function broadTraversal(tree) {
  var arr = [],
    queue = [];
  if (tree && tree.length > 0) {
    queue = queue.concat(tree);
  }
  while (queue.length > 0) {
    var out = queue.shift(),
      obj = {
        id: out.id,
        name: out.name
      };
    if (out.children && out.children.length > 0) {
      obj.children = out.children;
      queue = queue.concat(out.children);
    }
    arr.push(obj);
  }
  return arr;
}

// 示例

var tree = [{
  id: 1,
  name: 'Node1',
  children: [{
      id: 2,
      name: 'Child1'
    },
    {
      id: 3,
      name: 'Child2'
    }
  ]
}];

var result = broadTraversal(tree);
console.log(result); // 输出结果：[{id: 1, name: 'Node1', children: [{id: 2, name: 'Child1'}, {id: 3, name: 'Child2'}]}]

方法三：深度优先遍历

深度优先遍历的过程中，借助了递归实现。遍历树形结构，将节点按深度递归展开，然后逐一输出。

function depthTraversal(tree) {
  var arr = [];

  function recursive(current) {
    if (current) {
      var obj = {
        id: current.id,
        name: current.name
      };
      if (current.children && current.children.length > 0) {
        obj.children = [];
        for (var i = 0; i < current.children.length; i++) {
          obj.children.push(recursive(current.children[i]));
        }
      }
      return obj;
    }
  }

  if (tree && tree.length > 0) {
    for (var j = 0; j < tree.length; j++) {
      arr.push(recursive(tree[j]));
    }
  }
  return arr;
}

// 示例

var tree = [{
  id: 1,
  name: 'Node1',
  children: [{
      id: 2,
      name: 'Child1'
    },
    {
      id: 3,
      name: 'Child2'
    }
  ]
}];

var result = depthTraversal(tree);
console.log(result); // 输出结果：[{id: 1, name: 'Node1', children: [{id: 2, name: 'Child1'}, {id: 3, name: 'Child2'}]}]

方法四：扩展运算符

扩展运算符是ES6语法中的一种运算符。可以将...表达式作为运算符，在数组和对象一级元素作用下进行拆分。

function expandOperators(tree) {
  var arr = [];
  tree.forEach(function(node) {
    var obj = {
      id: node.id,
      name: node.name
    };
    if (node.children && node.children.length > 0) {
      obj.children = [...expandOperators(node.children)];
    }
    arr.push(obj);
  });
  return arr;
}

// 示例

var tree = [{
  id: 1,
  name: 'Node1',
  children: [{
      id: 2,
      name: 'Child1'
    },
    {
      id: 3,
      name: 'Child2'
    }
  ]
}];

var result = expandOperators(tree);
console.log(result); // 输出结果：[{id: 1, name: 'Node1', children: [{id: 2, name: 'Child1'}, {id: 3, name: 'Child2'}]}]

方法五：reduce方法

reduce方法是ES5语法中的一种数组方法。在数组元素遍历的过程中，将当前元素与上一次返回的结果进行计算，最终返回一个计算完成的结果。

function reduceTree(tree) {
  function recursive(current) {
    var obj = {
      id: current.id,
      name: current.name
    };
    if (current.children && current.children.length > 0) {
      obj.children = current.children.reduce(function(prev, cur) {
        prev.push(recursive(cur));
        return prev;
      }, []);
    }
    return obj;
  }
  return recursive(tree[0]);
}

// 示例

var tree = [{
  id: 1,
  name: 'Node1',
  children: [{
      id: 2,
      name: 'Child1'
    },
    {
      id: 3,
      name: 'Child2'
    }
  ]
}];

var result = reduceTree(tree);
console.log(result); // 输出结果：{id: 1, name: 'Node1', children: [{id: 2, name: 'Child1'}, {id: 3, name: 'Child2'}]}

以上是JavaScript实现树结构转换的五种方法总结，能够帮助开发者更好的处理树形结构数据，提升开发效率。