ES6 递归遍历树形结构，添加层级路径并返回新数据格式

假设我们有以下的树形结构数据：

const data = {
  id: 1,
  name: 'root',
  children: [
    {
      id: 2,
      name: 'child1',
      children: [
        {
          id: 4,
          name: 'grandchild1',
          children: []
        },
        {
          id: 5,
          name: 'grandchild2',
          children: []
        }
      ]
    },
    {
      id: 3,
      name: 'child2',
      children: [
        {
          id: 6,
          name: 'grandchild3',
          children: []
        }
      ]
    }
  ]
};

我们可以通过递归的方式遍历每个对象，并增加 path 属性来表示层级关系。同时，我们可以通过返回新数据格式的方式来得到处理后的数据。下面是一个实现的示例代码：

function addPathToTree(data, path = '0') {
  const newPath = path + '.';

  // 如果数据没有子节点，则直接返回
  if (!data.children || !data.children.length) {
    return { ...data, path };
  }

  // 如果数据有子节点，则递归遍历子节点
  const newChildren = data.children.map((child, index) => {
    const childPath = newPath + index;
    return addPathToTree(child, childPath);
  });

  // 返回处理后的数据
  return { ...data, path, children: newChildren };
}

const newData = addPathToTree(data);
console.log(newData);

输出结果为：

{
  "id": 1,
  "name": "root",
  "path": "0",
  "children": [
    {
      "id": 2,
      "name": "child1",
      "path": "0.0",
      "children": [
        {
          "id": 4,
          "name": "grandchild1",
          "path": "0.0.0",
          "children": []
        },
        {
          "id": 5,
          "name": "grandchild2",
          "path": "0.0.1",
          "children": []
        }
      ]
    },
    {
      "id": 3,
      "name": "child2",
      "path": "0.1",
      "children": [
        {
          "id": 6,
          "name": "grandchild3",
          "path": "0.1.0",
          "children": []
        }
      ]
    }
  ]
}

可以看到，每个对象都增加了 path 属性来表示层级关系，并且返回了一个新的数据格式。