js树形转换、扁平化、去重

1、树形转换

const list = [{
                "id": 19,
                "parentId": 0,
            },
            {
                "id": 18,
                "parentId": 16,
            },
            {
                "id": 17,
                "parentId": 16,
            },
            {
                "id": 16,
                "parentId": 0,
            }
        ];

转换成树形结构

方法1、

在进行遍历的时候通过对象的key属性进行判断

const listTree = (tree,parentid,children,startid)=>{
    const treeObj = {}
    tree.map((item)=>{
        treeObj[item.id] = item;
    })
    //对象的key是tree的id，下面遍历使用这个属性进行判断
    
    const result = []
    tree.map((item)=>{
        const pid = tree[item.parentid]
        //这里就是根据上面进行判断，判断对象中这个key是否存在，是否有对应的parentid
        if(pid){
            pid.children = pid.children || []
            pid.children.push(item)
        }else{
             result.push(item)
        }
    })
    return result
}

方法2、

通过filter方法实现

const convert=(tree,parentid,current,startid)=>{

    //找出不符合的数组
    const newList = tree.filter((item)=>item.parent != startid)

    //拷贝一下、尽量不在源数组操作
    const deeplist = JSON.parse(JSON.stringify(tree))
    
    deeplist.filter((item)=>{
        if(item.parentid == startid){
            item.children = conver(newList,parentid,current,item.id)
            return true
        }     
        return false
    })

}

const result = convert(list, 'parentId', 'current', 0);

console.log('result', result);

2、扁平化

数组的扁平化其实就是将一个嵌套多层的数组转换为只有一层的数组

例子：

var arrList = [1, 2, [3, 4]]
var arrList2 = [1, 2, [3, 4, 5, 6, [7, [8]]]]
// flat方法参数默认为1，展开一层数组，如果是多层数组，参数传Infinity即可
const flatArr = (arr) => {
        return arr.flat(Infinity)
}

console.log(flatArr(arrList));
console.log(flatArr(arrList2));

3、reduce去重

主要场景是数组中有对象中某一项重复需去重的情况

let parents = [{
        id: 0,
        parent: 'tom'
    },
    {
        id: 1,
        parent: "xiaoming"
    },
    {
        id: 2,
        parent: "xiaohuang"
    },
    {
        id: 3,
        parent: "xiaohua"
    },
    {
        id: 1,
        parent: "xiaolan"
    },
    {
        id: 2,
        parent: "kenan"
    }    
    ]    

let Obj = {}
parents = parents.reduce((cur, next) => {
    Obj[next.id] ? "" : Obj[next.id] = true && cur.push(next)
    //这里进行数据判断并处理数据
    return cur
    }, []) //设置cur默认类型为数组，并且初始值为空

console.log(parents);