1. 程式人生 > 實用技巧 >將陣列轉為樹形結構

將陣列轉為樹形結構

1. 有隨機生成的陣列如下(facode表示父節點code,facode = 0表示根節點):

const oriData = [
  { facode: "14220of5ccke", code: "pwyi3pvv81r" },
  { facode: "wd2jonfr2gr", code: "qayt3py2r2k" },
  { facode: "0", code: "yj0trvotbcn" },
  { facode: "yj0trvotbcn", code: "g9cchavsl3o" },
  { facode: "7t7t1tcxamx", code: "da11rv2gcv4" },
  { facode: 
"0", code: "s0mzz0apf48" }, { facode: "0e4i3c1a8tju", code: "ycwt4bw7x9" }, { facode: "wd2jonfr2gr", code: "yr1mhqx75ug" }, { facode: "ml31bygfup", code: "twac6e13jvl" }, { facode: "ctg2cqt8s", code: "mddcn1cmk1" }, { facode: "0", code: "qa3p9onzh5m" }, { facode: "0", code: "v60544frgk" }, { facode:
"j4zcdi1brad", code: "418bvcfx9o7" }, { facode: "op838jb851", code: "qxl0luzf7ag" }, { facode: "op838jb851", code: "kqx1f1o4oba" }, { facode: "qayt3py2r2k", code: "xhkjfcs05je" }, { facode: "0", code: "1ewgmyhcdhu" }, { facode: "7t7t1tcxamx", code: "ml31bygfup" }, { facode: "qa3p9onzh5m", code: "wd2jonfr2gr" }, { facode:
"2pyp8qffpqp", code: "xsrb6j7ki4n" }, { facode: "0", code: "j4zcdi1brad" }, { facode: "g9cchavsl3o", code: "r74ttb4848" }, { facode: "uwwescsspb", code: "1fl7yvkr9q0h" }, { facode: "su5k19scvx", code: "gyfsl7kboxh" }, { facode: "2965ett2s9s", code: "18eyu3lujr1" }, { facode: "418bvcfx9o7", code: "0e4i3c1a8tju" }, { facode: "voxjjv6clao", code: "od0mejv6g1" }, { facode: "kfpfwmq3l3", code: "69hem49d6kd" }, { facode: "0", code: "7t7t1tcxamx" }, { facode: "0", code: "3xis54q7war" }, { facode: "7t7t1tcxamx", code: "ctg2cqt8s" }, { facode: "gnrrqp7lcz", code: "ibvb0d1qio" }, { facode: "14220of5ccke", code: "u5hg8fj5d6l" }, { facode: "0", code: "2dk7e2pg2ar" }, { facode: "tfhilwpg3n", code: "2b55or3kxnp" }, { facode: "jbn5lzwph0r", code: "gnrrqp7lcz" }, { facode: "7eblz7lox0e", code: "dzcg8vsy3o6" }, { facode: "ctg2cqt8s", code: "r6xv3gs0xd" }, { facode: "6t7jhjdl32u", code: "hqmh0sx28db" }, { facode: "69hem49d6kd", code: "2965ett2s9s" }, { facode: "gnrrqp7lcz", code: "jelxkty0r7d" }, { facode: "mddcn1cmk1", code: "uwwescsspb" }, { facode: "zcfd6f4663", code: "9ui26os5uod" }, { facode: "j4zcdi1brad", code: "vi83rfke7qd" }, { facode: "su5k19scvx", code: "7bg9ws7gsrh" }, { facode: "0", code: "su5k19scvx" }, { facode: "kfpfwmq3l3", code: "41gdq40vxbe" }, { facode: "0", code: "6t7jhjdl32u" }, { facode: "0", code: "nw31bqozo9j" }, { facode: "gdl483qpeaq", code: "amsca4h6tvt" }, { facode: "ibvb0d1qio", code: "bj8p27nwhet" }, { facode: "ctg2cqt8s", code: "0r6it18he2v" }, { facode: "amsca4h6tvt", code: "9ij0fxvstqc" }, { facode: "ctg2cqt8s", code: "al086kygjt" }, { facode: "aozhnmqjgz4", code: "wsg98ysddve" }, { facode: "ysf66r5mr4i", code: "nu5jn74lwce" }, { facode: "nw31bqozo9j", code: "4bdrmkb3s3" }, { facode: "6y9j3wb5ppt", code: "nmcjnjvl6o" }, { facode: "qtyl5t0xtvj", code: "9wncjxzi6cd" }, { facode: "0", code: "z0smnkjrl2o" }, { facode: "xsrb6j7ki4n", code: "bspxj4zreb" }, { facode: "gnrrqp7lcz", code: "shpm7hv0i2" }, { facode: "v60544frgk", code: "6y9j3wb5ppt" }, { facode: "sboh2zzbyg", code: "msq2u1nzg7o" }, { facode: "zz91xe8dv1a", code: "h0hyx2t5cnb" }, { facode: "ibvb0d1qio", code: "irhp2fu66bn" }, { facode: "6jyuqabwx2b", code: "dcr70ccivd8" }, { facode: "cwubwq0rn3p", code: "1nqihriynui" }, { facode: "gdl483qpeaq", code: "nfrjnd6psi" }, { facode: "te582n3ibwg", code: "7eblz7lox0e" }, { facode: "1ewgmyhcdhu", code: "jvnzg31r92m" }, { facode: "vjgwoi7gm3", code: "j8twy4nmsi" }, { facode: "nw31bqozo9j", code: "d0zo9be4rmt" }, { facode: "0", code: "ft4slnbv8w" }, { facode: "op838jb851", code: "zcfd6f4663" }, { facode: "0", code: "jbn5lzwph0r" }, { facode: "1ewgmyhcdhu", code: "pntkt3th1s" }, { facode: "s0mzz0apf48", code: "974htl0c7xg" }, { facode: "nw31bqozo9j", code: "ysf66r5mr4i" }, { facode: "s0mzz0apf48", code: "gdl483qpeaq" }, { facode: "0", code: "kfpfwmq3l3" }, { facode: "sboh2zzbyg", code: "14220of5ccke" }, { facode: "0", code: "qtyl5t0xtvj" }, { facode: "gyfsl7kboxh", code: "37z1iqapo66" }, { facode: "0", code: "amvqb027pj8" }, { facode: "gnrrqp7lcz", code: "tfhilwpg3n" }, { facode: "0r6it18he2v", code: "nv6v6i19zc" }, { facode: "0", code: "op838jb851" }, { facode: "qxl0luzf7ag", code: "voxjjv6clao" }, { facode: "msq2u1nzg7o", code: "i9cf7dpgr7q" }, { facode: "sylrvzy84ng", code: "zd04mji0iyg" }, { facode: "xhkjfcs05je", code: "8orpcunjqzk" }, { facode: "7t7t1tcxamx", code: "w0hkay5yupf" }, { facode: "qxl0luzf7ag", code: "0kmorp3afwi" }, { facode: "4bdrmkb3s3", code: "xq19gbubaj" }, { facode: "jbn5lzwph0r", code: "igkfwe3ocar" }, { facode: "974htl0c7xg", code: "gonp1a09s47" }, { facode: "nv6v6i19zc", code: "zwfh7h1ph4" }, { facode: "u5hg8fj5d6l", code: "zol8vtid6m" }, { facode: "kqx1f1o4oba", code: "bj6f3p6c7j4" }, { facode: "0", code: "sboh2zzbyg" }, { facode: "4bdrmkb3s3", code: "5ww8bcjnb8u" }, { facode: "h0hyx2t5cnb", code: "npa5m36ds3" }, { facode: "gonp1a09s47", code: "9fhq6ercb48" }, { facode: "yj0trvotbcn", code: "6jyuqabwx2b" }, { facode: "7t7t1tcxamx", code: "aozhnmqjgz4" }, { facode: "0", code: "zz91xe8dv1a" }, { facode: "xq19gbubaj", code: "te582n3ibwg" }, { facode: "voxjjv6clao", code: "zmmrm89wysf" }, { facode: "zcfd6f4663", code: "vjgwoi7gm3" }, { facode: "zz91xe8dv1a", code: "f9ots586jv4" }, { facode: "voxjjv6clao", code: "l1ii7d4gg2" }, { facode: "0", code: "sylrvzy84ng" }, { facode: "jelxkty0r7d", code: "pfkafreklti" }, { facode: "418bvcfx9o7", code: "ozuqy7752gj" }, { facode: "0", code: "cwubwq0rn3p" }, { facode: "nw31bqozo9j", code: "2pyp8qffpqp" }, { facode: "sylrvzy84ng", code: "xiv7wbgdwi" }, { facode: "37z1iqapo66", code: "1b86wlgp0zy" }, { facode: "aozhnmqjgz4", code: "ozauvemqypt" }, { facode: "op838jb851", code: "w30kzjoq29" }, { facode: "xsrb6j7ki4n", code: "ppflnpq5b5a" }, { facode: "6t7jhjdl32u", code: "rzord6bqbb" }, ];

2. 創造樹的節點類

class Node {
  constructor(item, path) {
    this[Tree.parent.keyName] = item[Tree.parent.valueName];
    this[Tree.data.keyName] = item[Tree.data.valueName];
    let newPath = JSON.parse(JSON.stringify(path));
    newPath.push(item[Tree.data.valueName]);
    this[Tree.path.keyName] = newPath;
  }
}

3. 創造樹類,新增轉為樹形資料的函式

class Tree {
  constructor(arr, option) {
    let { parent, data, path } = option;
    Tree.parent = parent;
    Tree.data = data;
    Tree.path = path;
    this.size = 0;
    this.tree = this.arrayToTree(arr, parent.rootParent);
  }
    arrayToTree(arr, parentCode, path = []) {
    let tree = [];
    arr.forEach((item) => {
      if (item[Tree.parent.valueName] === parentCode) {
        // 建立node節點
        let node = new Node(item, path);
        this.size++;
        // 遞迴, 並記錄路徑
        let children = this.arrayToTree(
          arr,
          item[Tree.data.valueName],
          node[Tree.path.keyName]
        );
        if (children.length > 0) {
          node.children = children;
        }
        tree.push(node);
      }
    });
    return tree;
  }
}

4. 轉為樹形結構的函式使用了遞迴和for迴圈,不是最優解,待優化。