js数组通过某个字段进行分组

数据结构

var list = [
            {
                id:0,
                name:"剑圣-刺客",
                type:"刺客"
            },
            {
                id:1,
                name:"安妮-法师",
                type:"法师"
            },
            {
                id:3,
                name:"赵信-战士",
                type:"战士"
            },
            {
                id:4,
                name:"寒冰-射手",
                type:"射手"
            },
            {
                id:4,
                name:"维恩-射手",
                type:"射手"
            },
            {
                id:2,
                name:"蕾欧娜-坦克",
                type:"坦克"
            },
            {
                id:1,
                name:"拉克丝-法师",
                type:"法师"
            },
            {
                id:0,
                name:"劫-刺客",
                type:"刺客"
            },
            {
                id:1,
                name:"凤凰-法师",
                type:"法师"
            },
            {
                id:3,
                name:"皇子-战士",
                type:"战士"
            },
            {
                id:2,
                name:"龙龟-坦克",
                type:"坦克"
            }
        ]

处理之后的数据结构

image.png

方法一，思路，先把要分组的字段提取出来存放在一个数组然后去重，然后在循环分组

function groupArr(list,field){
            var fieldList = [],att=[];
            list.map((e)=>{
                fieldList.push(e[field])
            })
            //数组去重
            fieldList = fieldList.filter((e,i,self)=>{
                return self.indexOf(e)==i
            })
            for(var j=0;j<fieldList.length;j++){
                //过滤出匹配到的数据
                var arr = list.filter((e)=>{
                    return e.id==fieldList[j];
                })
                att.push({
                    type:arr[0].type,
                    list:arr
                })
            }
            return att;
        }

方法2，利用for in 把过滤字段当做属性 ,通过属性去添加到对象里面，最后把对象通过for in 处理为自己需要的结构

function groupArr(list,field){
            var obj = {};
            for(var i=0;i<list.length;i++){
                for(item in list[i]){
                    if(item==field){
                        obj[list[i][item]] = {
                            list:obj[list[i][field]]?obj[list[i][field]].list:[],
                            type:list[i].type
                        };
                    }
                }
                obj[list[i][field]].list.push(list[i])
            }
            var att = [];
            for(item in obj){
                att.push({
                    list:obj[item].list,
                    type:obj[item].type,
                })
            }
            return att;
        }