数组对象取出某一属性相同的元素,返回对应数组的方法

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

//原始数据
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));

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

// 这是第二种方法,原理是一样的,代码量会多一点,得到的也是二维数组
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);  //可以对该数组进行处理成自己想要的结构

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值