扁平数据转tree；处理一维树级结构 处理树状图一维数组

功能介绍

1. 两级循环（数组 filter 方法），四行代码实现
2. 支持乱序；
3. 支持自定义子级、父级名字、初始首级 id 值、自命名 产生子集合名字

直接看代码：注释啥都有

const list = [
    { "id": "4", "pid": "1", "name": "大型家电" },
    { "id": "5", "pid": "1", "name": "生活电器" },
    { "id": "1", "pid": "0", "name": "家用电器" },
    { "id": "2", "pid": "0", "name": "服装" },
    { "id": "3", "pid": "0", "name": "化妆品" },
    { "id": "7", "pid": "4", "name": "空调" },
    { "id": "10", "pid": "4", "name": "热水器" },
    { "id": "11", "pid": "3", "name": "面部护理" },
    { "id": "12", "pid": "3", "name": "口腔护理" },
    { "id": "13", "pid": "2", "name": "男装" },
], treeData = treeDataList(list, '0', 'id', 'pid', 'children'),
{ log } = console
/**
 * @param list{ Array } 传递进一个一维树状数组
 * @param firstId{ String } 第一级的 id 的参数值
 * @param id{ String } 子级 id 叫啥字段名字
 * @param parentId{ String } 父级 id 叫啥字段名字
 * @param children{ String } 最终数组产生后子集合的参数名叫啥名字
 * 
 * */
function treeDataList(list, firstId = '0', id, parentId, children) {
    return list.filter(father => {
        // 处理出所有跟当前 循环 父级id相等的子集系列 为 branchArr
        const branchArr = list.filter(child => father[id] === child[parentId])
        // 把处理好的 涵盖当前父级id 的数据扔给父级的 children 属性里面。 最后这里会通过堆栈地址引用使数据连好（js的）
        branchArr.length > 0 ? father[children] = branchArr : null
        // 如果当前父级是咱们规定的第一级 id 则返回，没有规定的则不返回。（剔除与第一级不一致的数据）
        return father[parentId] === firstId
    })
}
log(treeData, '---')

效果图

如何简洁看效果呢？

1. 打开浏览器空白界面的控制面板（控制台 f12）
2. 复制粘贴