js函数封装-数组与树状结构数组之间转换

1,308 阅读1分钟

1.数组转为树状结构

// 原始数组
const arr = [{
    name:'中国',
    id:1,
    parentId:0
},{
    name:'北京',
    id:2,
    parentId:1
},{
    name:'上海',
    id:3,
    parentId:1
},{
    name:'台湾',
    id:4,
    parentId:1
},{
    name:'钓鱼岛',
    id:5,
    parentId:4
}]
// 数组转为树状结构函数
// 入参data 为需要转换的原始数组
// 入参key 为转换父子数据的条件字段
//入参parentId 父级数据的id,根据不同情况,字段名不同
function toTree(data, key = 'id', parentId = 0) {
    let result = []
    if (!Array.isArray(data)) {
        return result
    }
    if (data.length == 1) {
        return (result = data)
    }
    data.forEach(item => {
        // console.log(item,item.parentId)
        if (item.parentId === parentId) {
            // 递归寻找
            item.children = toTree(data, key, item[key])
            result.push(item)
        }
    })

    return result
}

console.log(toTree(arr,'id',0)) // console.log(toTree(arr))

2.树状结构转为数组

// 原始树状结构数组
const arr = [{
    name:'中国',
    id:1,
    parentId:0,
    children:[{
        name:'北京',
        id:2,
        parentId:1
    },{
        name:'上海',
        id:3,
        parentId:1
    },{
        name:'台湾',
        id:4,
        parentId:1,
        children:[{
            name:'钓鱼岛',
            id:5,
            parentId:4
        }]
    }]
}]
//树状结构转为数组函数
//入参treeArr 树状结构数组
//入参children 父子集合名称字段
//入参deleteChildren 是否删除生成的一维里面children集合
function* treeToArr(treeArr, children = 'children', deleteChildren = true) {
    for (let item of treeArr) {
        let newItem = deepClone(item) // deepClone为深拷贝函数,此处不做说明。
        if(deleteChildren)
            delete newItem[children]
        yield newItem
        if (item[children] && item[children].length)
            yield* treeToArr(item[children])
    }
}
console.log([...treeToArr(arr,'children',true)]) // console.log([...treeToArr(arr)])
//注意: function* 为生成器函数,调用生成器函数方法与正常函数不同。生成器函数相关此处不做说明。