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

want be

已于 2023-05-07 15:27:29 修改

阅读量302

点赞数

分类专栏： JS 文章标签：前端

于 2023-05-07 11:52:57 首次发布

本文链接：https://blog.csdn.net/qq_42446479/article/details/130540653

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章介绍了如何使用JavaScript处理数组数据，包括将具有parentId的对象数组转换为树形结构的两种方法，数组的扁平化操作，以及利用reduce方法去除对象数组中的重复项。这些技巧在数据处理和前端开发中非常常见。

摘要由CSDN通过智能技术生成

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);