js 常用方法

Question

1、树级结构数据字段转换
mapTree (org) {
  const haveChildren =
    Array.isArray(org.children) && org.children.length > 0
  return {
    id: org.id,
    label: org.classifyName,
    children: haveChildren ? org.children.map(i => this.mapTree(i)) : []
  }
},

Answer 1

改成参数是列表

var mapTree = (orgs = []) => orgs.map(org => ({
    id: org.id,
    label: org.classifyName,
    children: mapTree(org.children || [])
}));
mapTree([{
    id: 1,
    classifyName: 'abd',
    children: [{
        id: 11,
        classifyName: 'ccc'
    }]
}])

结果

[
  {
    "id": 1,
    "label": "abd",
    "children": [
      {
        "id": 11,
        "label": "ccc",
        "children": []
      }
    ]
  }
]

Answer 2

看起来是想写个映射树节点的方法：

function mapTree(tree, mapper, getChildren = node => node.children) {
    if (!tree?.length) {
        return tree;
    }

    return tree.map(node => {
        const newNode = mapper(node);
        newNode.children = mapTree(getChildren(node), mapper, getChildren);
        return newNode;
    });
}

调用示例（设计节点结构是：{id, label, children}）

const r = mapTree(tree, node => ({ ...node, name: node.label }));

这会映射出一棵新树，每个节点都比原来多一个 name。

---

完全用例

const list = [
    { id: 1, parentId: 0, label: "8WUg35y" },
    { id: 2, parentId: 1, label: "Pms1S5Mx" },
    { id: 3, parentId: 1, label: "RUTKSF" },
    { id: 4, parentId: 1, label: "IYkxXlhmU12x" },
    { id: 5, parentId: 4, label: "p2Luabg9mK2" },
    { id: 6, parentId: 0, label: "P6mtcgfCD" },
    { id: 7, parentId: 1, label: "yluJgpnqKthR" },
    { id: 8, parentId: 6, label: "m6o5UsytQ0" },
    { id: 9, parentId: 2, label: "glcR5yGx" },
    { id: 10, parentId: 0, label: "lhDGTNeeSxLNJ" },
    { id: 11, parentId: 1, label: "r7ClxBCQS6" },
    { id: 12, parentId: 7, label: "5W6vy0EuvOjN" },
    { id: 13, parentId: 5, label: "LbpWq" },
    { id: 14, parentId: 6, label: "ysYwG8EFLAu1a" },
    { id: 15, parentId: 8, label: "R2PmAh1" },
    { id: 16, parentId: 10, label: "RKuQs4ki65wo" },
    { id: 17, parentId: 10, label: "YN88ixWO1PY7f4" },
    { id: 18, parentId: 13, label: "03X6e4UT" },
    { id: 19, parentId: 7, label: "LTJTeF" },
    { id: 20, parentId: 19, label: "3rqUqE3MLShh" }
];

function makeTree(treeNodes) {
    var _a;
    // 提前生成节点查找表。
    // 如果明确节点是顺序可以保证先父后子，可以省去这次遍历，在后面边遍历过程中填充查找表
    const nodesMap = new Map(treeNodes.map(node => [node.id, node]));
    // 引入虚拟根节点来统一实现 parent 始终有效，避免空判断
    const virtualRoot = {};
    treeNodes.forEach((node, i) => {
        var _a, _b;
        const parent = (_a = nodesMap.get(node.parentId)) !== null && _a !== void 0 ? _a : virtualRoot;
        ((_b = parent.children) !== null && _b !== void 0 ? _b : (parent.children = [])).push(node);
    });
    return (_a = virtualRoot.children) !== null && _a !== void 0 ? _a : [];
}

const tree = makeTree(list);

function mapTree(tree, mapper, getChildren = node => node.children) {
    if (!tree?.length) {
        return tree;
    }

    return tree.map(node => {
        const newNode = mapper(node);
        newNode.children = mapTree(getChildren(node), mapper, getChildren);
        return newNode;
    });
}

const r = mapTree(tree, node => ({ ...node, name: node.label }));
console.log(JSON.stringify(r, null, 2));

输出

[
  {
    "id": 1,
    "parentId": 0,
    "label": "8WUg35y",
    "children": [
      {
        "id": 2,
        "parentId": 1,
        "label": "Pms1S5Mx",
        "children": [
          {
            "id": 9,
            "parentId": 2,
            "label": "glcR5yGx",
            "name": "glcR5yGx"
          }
        ],
        "name": "Pms1S5Mx"
      },
      {
        "id": 3,
        "parentId": 1,
        "label": "RUTKSF",
        "name": "RUTKSF"
      },
      {
        "id": 4,
        "parentId": 1,
        "label": "IYkxXlhmU12x",
        "children": [
          {
            "id": 5,
            "parentId": 4,
            "label": "p2Luabg9mK2",
            "children": [
              {
                "id": 13,
                "parentId": 5,
                "label": "LbpWq",
                "children": [
                  {
                    "id": 18,
                    "parentId": 13,
                    "label": "03X6e4UT",
                    "name": "03X6e4UT"
                  }
                ],
                "name": "LbpWq"
              }
            ],
            "name": "p2Luabg9mK2"
          }
        ],
        "name": "IYkxXlhmU12x"
      },
      {
        "id": 7,
        "parentId": 1,
        "label": "yluJgpnqKthR",
        "children": [
          {
            "id": 12,
            "parentId": 7,
            "label": "5W6vy0EuvOjN",
            "name": "5W6vy0EuvOjN"
          },
          {
            "id": 19,
            "parentId": 7,
            "label": "LTJTeF",
            "children": [
              {
                "id": 20,
                "parentId": 19,
                "label": "3rqUqE3MLShh",
                "name": "3rqUqE3MLShh"
              }
            ],
            "name": "LTJTeF"
          }
        ],
        "name": "yluJgpnqKthR"
      },
      {
        "id": 11,
        "parentId": 1,
        "label": "r7ClxBCQS6",
        "name": "r7ClxBCQS6"
      }
    ],
    "name": "8WUg35y"
  },
  {
    "id": 6,
    "parentId": 0,
    "label": "P6mtcgfCD",
    "children": [
      {
        "id": 8,
        "parentId": 6,
        "label": "m6o5UsytQ0",
        "children": [
          {
            "id": 15,
            "parentId": 8,
            "label": "R2PmAh1",
            "name": "R2PmAh1"
          }
        ],
        "name": "m6o5UsytQ0"
      },
      {
        "id": 14,
        "parentId": 6,
        "label": "ysYwG8EFLAu1a",
        "name": "ysYwG8EFLAu1a"
      }
    ],
    "name": "P6mtcgfCD"
  },
  {
    "id": 10,
    "parentId": 0,
    "label": "lhDGTNeeSxLNJ",
    "children": [
      {
        "id": 16,
        "parentId": 10,
        "label": "RKuQs4ki65wo",
        "name": "RKuQs4ki65wo"
      },
      {
        "id": 17,
        "parentId": 10,
        "label": "YN88ixWO1PY7f4",
        "name": "YN88ixWO1PY7f4"
      }
    ],
    "name": "lhDGTNeeSxLNJ"
  }
]