vue js数组对象转树形结构

1.数组数据

const list=[
	{id: 1,pid: 0,name: 'body' },
	 {id: 2,pid: 1,name: 'title'}, 
 	{id: 3,pid: 2,name: 'div'}
 ];

2.转成树结构这种

const list = [{
        id: 1,
        pid: 0,
        name: 'body',
        children: [{
            id: 2,
            pid: 1,
            name: 'title',
            children: [{
                id: 3,
                pid: 1,
                name: 'div'
            }]
        }]
    }]

第一种

function toTree(data) {
    // 空数组
    let result = [];
    // 判断不是数组  直接返回
    if (!Array.isArray(data)) {
        return result
    }
    // 遍历  删除  children 属性  做初始化操作
    data.forEach(item => {
        delete item.children;
    });
    //  空对象
    let map = {};
    data.forEach(item => {
        map[item.id] = item;
    });

    /**
     * map对象的 键: 是每个id  值：对应的item
     * 1: {id: 1, pid: 0, name: "body"}
     * 2: {id: 2, pid: 1, name: "title"}
     * 3: {id: 3, pid: 2, name: "div"}
     */
    data.forEach(item => {
        // item.pid 为0时 返回underfined
        let parent = map[item.pid];
        if (parent) {
            (parent.children || (parent.children = [])).push(item);
        } else {
            // 这里push的item是pid为0的数据
            result.push(item);
        }
    });
    return result;
}

console.log(toTree(data))

第二种转为都在一个节点下的树

for(let index = 0; index