数组对象取出某一属性相同的元素，返回对应数组的方法_树形数组获取所有属性值一样的数据,返回树形结构

相信大家都遇到过需要将对象数组中某一属性值相同的值取出来的需求：

//原始数据
const  list = [
        {
            type:"a",
            id:1,
            name:"echo"
        },
        {
            type:"b",
            id:1,
            name:"geor"
        },
        {
            type:"c",
            id:1,
            name:"dsew"
        },
        {
            type:"a",
            id:2,
            name:"qwe"
        },
        {
            type:"a",
            id:1,
            name:"qwe"
        },
        {
            type:"b",
            id:1,
            name:"aaa"
        },
        {
            type:"b",
            id:2,
            name:"xxx"
        },
        {
            type:"c",
            id:2,
            name:"fff"
        },
        {
            type:"c",
            id:2,
            name:"ttt"
        },
    ];
    
    // 期望数据解构
	const dataList = [
        {
            type: "a",
            list: [
                {
                    type: "a",
                    id: 1,
                    name: "echo"
                },
            ]
        },
        {
            type: "b",
            list: [
                {
                    type: "b",
                    id: 1,
                    name: "aaa"
                },
            ]
        },
        {
            type: "c",
            list: [
                {
                    type: "c",
                    id: 2,
                    name: "fff"
                },
            ]
        }
    ];
// 处理方式
function fnfn(list) {  // 声明一个处理函数
        let obj = {};  // 声明一个对象，这一步是利用对象属性值是否存在的功能来判断是否已存在相同的属性
        const newList = [] // 用来存储拿到的对象
        list.map(item => {
            const { type } = item;  // 解构数组的每一项
            if (!obj[type]) {  // 判断该属性是否已存在
                obj[type] = {  // 如果不存在，就进行赋值，赋值的解构可以写成你想要的形式
                    type,
                    list: []
                }
            }
            obj[type].list.push(item); // 赋值完成后将该项加入到对应的数组中，直至循环完成
        })
        newList.push(...Object.values(obj)) // 利用object.values的方法将对象的可迭代属性的值加入到数组中,使用解构语法，不熟悉这个方法的话可以mdn查询
        return newList
    }
    console.log(fnfn(list));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

最后得到的结果如下，这个是没有将数组解构前的,此处是根据网上的方法创作而来，其实有很多去重的方法，这个算是代码比较少的。

// 这是第二种方法，原理是一样的，代码量会多一点，得到的也是二维数组
const obj = {}
    const newList = []
    list.forEach(item => {
        if (!obj[item.type]) {  // 这里判断是否已存在重复的属性
            obj[item.type] = item;
            const arr = [];
            arr.push(item);
            newList.push(arr);
        } else {  // 如果已存在，则开始遍历newList数组
            newList.forEach(checkItem => {
                if (checkItem[0].type === item.type) {   // 这里判断拿到的该项是否已存在，只需要拿checkItem的第一项进行判断即可
                    checkItem.push(item)
                }
            })
        }
    })
    console.log(newList);  //可以对该数组进行处理成自己想要的结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18