树形结构数据处理

Question

需求

把 待处理数据 中的数据跟 源数据 中比较，只要某项的子元素个数少了就删除那一项。

数据

源数据

[
  {
    "level": 1,
    "id": "1",
    "parentId": "0",
    "children": [
      {
        "level": 2,
        "id": "1-1",
        "parentId": "1"
      },
      {
        "level": 2,
        "id": "1-2",
        "parentId": "1",
        "children": [
          {
            "level": 3,
            "id": "1-2-1",
            "parentId": "1-2"
          },
          {
            "level": 3,
            "id": "1-2-2",
            "parentId": "1-2"
          }
        ]
      },
      {
        "level": 2,
        "id": "1-3",
        "parentId": "1",
        "children": [
          {
            "level": 3,
            "id": "1-3-1",
            "parentId": "1-3"
          },
          {
            "level": 3,
            "id": "1-3-2",
            "parentId": "1-3"
          }
        ]
      }
    ]
  },
  {
    "level": 1,
    "id": "2",
    "parentId": "0",
    "children": [
      {
        "level": 2,
        "id": "2-1",
        "parentId": "2",
        "children": [
          {
            "level": 3,
            "id": "2-1-1",
            "parentId": "2-1"
          },
          {
            "level": 3,
            "id": "2-1-2",
            "parentId": "2-1"
          }
        ]
      },
      {
        "level": 2,
        "id": "2-2",
        "parentId": "2",
        "children": [
          {
            "level": 3,
            "id": "2-2-1",
            "parentId": "2-2"
          },
          {
            "level": 3,
            "id": "2-2-2",
            "parentId": "2-2"
          }
        ]
      }
    ]
  }
]

待处理数据

[
  {
    "level": 1,
    "id": "1",
    "parentId": "0"
  },
  {
    "level": 2,
    "id": "1-1",
    "parentId": "1"
  },
  {
    "level": 2,
    "id": "1-2",
    "parentId": "1"
  },
  {
    "level": 3,
    "id": "1-2-1",
    "parentId": "1-2"
  },
  {
    "level": 1,
    "id": "2",
    "parentId": "0"
  },
  {
    "level": 2,
    "id": "2-2",
    "parentId": "2"
  },
  {
    "level": 3,
    "id": "2-2-1",
    "parentId": "2-2"
  }
]

处理后数据的样例

[
  // 这项本身就没有子元素，所以不处理
  {
    "level": 2,
    "id": "1-1",
    "parentId": "1"
  },
  // 这项的父元素及祖父元素都删除了，因为兄弟元素少了所以删除了父元素，因为删除了父元素，祖父元素的子元素就少了，所以删除了祖父元素
  {
    "level": 3,
    "id": "1-2-1",
    "parentId": "1-2"
  },
  {
    "level": 3,
    "id": "2-2-1",
    "parentId": "2-2"
  }
]

Answer 1

/**
 * * 格式化当前选中菜单的数据 
 * 如果_当前选中菜单_数组arr中，
 * 存在某个父元素的子元素数量小于_所有菜单_treeArr中对应父元素的子元素数量
 * 则将该父元素从_当前选中菜单_数组arr中剔除
 * 同理该父元素的祖父元素也会剔除
 * 
 * @param {Array} arr  选中菜单的数组。
 * @param {Array} treeArr 所有菜单的数组。是树形结构数组 
 */
export default function (arr, treeArr) {
    const ret = []
    const levelObj = getArrMapByKey(arr, 'level')
    const del = getDelMethod(levelObj, 'parentid')
    let curLevel = Math.max.apply(null, Object.keys(levelObj))
    do {
        for (const item of levelObj[curLevel]) {
            const { parentid } = item;
            const len1 = getChildrenLenById(treeArr, parentid)
            const len2 = levelObj[curLevel].filter(i => i.parentid === parentid).length
            len2 < len1 && del(parentid, curLevel - 1)
        }
    } while (--curLevel);
    for (const key in levelObj) {
        ret.push(...levelObj[key])
    }
    return ret
}


/**
     * * 将对象数组中的项，根据key的值分类
     * 
     * @param {Array} arr 源数组
     * @param {String} key 数组某项（对象类型）的key
     * @returns {Object} 分类后的对象
     * @example 
     * const arr = [{name: 'Tom', age: 19}, {name: 'Lily', age: 19}, {name: 'Sean', age: 18}];
     * const ret = getArrMapByKey(arr, 'age')
     * {19: [{name: 'Tom', age: 19}, {name: 'Lily', age: 19}], 18: [{name: 'Sean', age: 18}]}
     * 
     */
function getArrMapByKey(arr, key) {
    const ret = {}
    let i = arr.length;
    while (i--) {
        const item = arr[i];
        const k = item[key]
        !ret[k] && (ret[k] = [])
        ret[k].push(item)
    }
    return ret;
}

// 通过id从树形数组数据中获取子元素个数
function getChildrenLenById(treeArr, id) {
    for (const item of treeArr) {
        if (item.id === id) return item.children.length;
        if (item.children && item.children.length) {
            const m = getChildrenLenById(item.children, id)
            if (m) return m;
        }
    }
}
// 获取删除元素及父元素祖父元素的函数
function getDelMethod(obj, parentKey) {
    const del = function (id, level) {
        const list = obj[level];
        if (!list) return;
        let i = list.length
        while (i--) {
            const item = list[i];
            if (item.id === id) {
                del(item[parentKey], level - 1)
                list.splice(i, 1)

            }
        }
    }
    return del
}

Answer 2

遍历，比较，处理，参考：使用递归遍历并转换树形数据（以 TypeScript 为例）