js处理数组扁平化、数组层级化

在项目中经常遇到需要处理后台给的数据情况,有的数据需要处理成树形结构进行展示,有的数据需要一维数组进行过滤

应用场景:

  1. 层级数据常用于层级节点的展示,例如Element的tree组件
  2. 扁平数据常用于权限过滤,例如: v-if=‘haha.incluedes(''heiehi")’

数据demo:

  1. 层级数据是有父子关系的数组,且子节点都会放到该节点的chilren下
  2. 扁平化数据是一个一维数组,里面可能有parentId标明该节点的父节点id
// 层级数据:
tree = [
    {
        id:1, name: 'hahha', chilren:[
            {id: 2, name: 'heiehi', chilren: []},
            {id: 3, name: 'heiehi2', chilren: []},
        ]
    },
    {
        id:4, name: 'hahha2', chilren:[
            {id: 5, name: 'heiehi3', chilren: []},
            {id: 6, name: 'heiehi4', chilren: []},
        ]
    }
]
// 扁平数据:
list = [
    { id:1, name: 'hahha' },
    { id:2, name: 'heiehi' },
    { id:3, name: 'heiehi2' },
    { id:4, name: 'hahha2' },
    { id:5, name: 'heiehi3' },
    { id:6, name: 'heiehi4' },
]

1、数组扁平化

数组扁平化是指把一个有层级结构的数据,处理成无层级的数据,简单来说就是把数据的children放到一维数据当中

处理方法:循环堆置为一个一维数组

树形结构数据扁平化处理方法比较简单,就是循环数据就可以了
下面用一个新思路迭代解决,原先利用递归处理方法比较简单:

  1. 循环tree,循环条件时tree的长度大于0(利用queen代表将要循环的数据)
  2. 当节点存在chilren(children的长度大于0)时,把chilren数据push到queen最后,这样queen的长度就更新了
  3. 循环时每次删除第一个数据进行处理,推送到out中(注意有children要删掉children)
  4. 这样处理就不需要用递归去处理了
// 方法1:递归
function treeToList(tree) {
    let arr = []
    for(item of tree) {
        if(item.children && item.children.length > 0){
            let sitem = { ...item }
            delete sitem.children
            arr = arr.concat(sitem, treeToList(item.children))
        } else {
            delete item.children
            arr.push(item)
        }
    }
    return arr
}
// 方法2:迭代
export function treeToList(tree) {
    var queen = []
    var out = []
    queen = queen.concat(tree)
    while(queen.length) {
        var first = queen.shift()
        if (first.children) {
            queen = queen.concat(first.children)
            delete first.children
        }
        out.push(first)
    }
    return out
}

js处理数组扁平化、数组层级化_第1张图片

可以看到递归消耗的时间几乎是迭代的两倍

2、数组层级化

// 方法1:
export function translateDataToTree(arr) {
    return arr.filter((father) => {
        let branchArr = arr.filter((child) => father.id == child.parentId)
        branchArr.length > 0 ? father.children = branchArr : ''
        return father.parentId == ''
    })
}
// 方法2:
export function translateDataToTree(arr) {
    let temp = {}
    let tree = {}
    arr = deepClone(arr)
    arr.forEach((item) => {
        temp[item.id] = item
    })
    let tempKeys = Object.keys(temp)
    tempKeys.forEach((key) => {
        let item = temp[key]
        let itemPId = item.parentId
        let parentItemByPid = temp[itemPId]
        if (parentItemByPid) {
            if (!parentItemByPid.children) {
                parentItemByPid.children = []
            }
            parentItemByPid.children.push(item)
        } else {
            tree[item.id] = item
        }
    })
    return Object.keys(tree).map((key) => tree[key])
}
// 方法3:
export function translateDataToTree(data, parentId = '') {
    let tree = []
    let temp
    data.forEach((item, index) => {
        if (data[index].parentId === parentId) {
            let obj = data[index]
            temp = translateDataToTree(data, data[index].id)
            if (temp.length > 0) {
                obj.children = temp
            }
            tree.push(obj)
        }
    })
    return tree
}

以下是时间对比,方法1和2差不多,方法3的时间明显较长,相比方法1慢了6.6倍多!!

 

js处理数组扁平化、数组层级化_第2张图片

方法1,2用于不同场景,可以看到方法1是按照接口给的顺序排序,而方法2则是根据id排序

js处理数组扁平化、数组层级化_第3张图片

你可能感兴趣的:(数组层级数据扁平化,数组扁平数据层级化,层级,扁平,js)