JS 实现通过某个属性值对【对象数组】进行分组

<template>
<div>
    通过数组的某一个字段对数组进行分类,分类之后返回一个新的数组、
    <button @click="saveSort">数组分类 </button>
</div>
</template>

<script>
export default {
	data() {
		return{
		arrlist :[{
            id: 1,
            name: "张三",
            seniority: "3年"
        },
        {
            id: 2,
            name: "李四",
            seniority: "四年"
        },
        {
            id: 3,
            name: "王5",
            seniority: "三年"
        },
        {
            id: 4,
            name: "小六",
            seniority: "两年"
        },
        {
            id: 5,
            name: "张海海",
            seniority: "两年"
        }, {
            id: 6,
            name: "李波",
            seniority: "一年"
        }]

		}},
		mounted(){
			
		},
		methods: {

    /**
     * 数组分组
     * @example arrGroup(array, function)
     * @param {Array} arr
     * @param {Function} fn
     * @returns {Array} [[],[]]
     */

    saveSort(){
        //通过工龄seniority去分类
      const newArr = this.arrGroup(this.arrlist, (item) => item.seniority)
      console.log("分类后的数组",newArr)
    },
   arrGroup(arr, fn) {
        const obj = {};
        arr.forEach(item => {
            //接受一个javascript 对象  并将其转为json字符串
            const key = JSON.stringify(fn(item));
            obj[key] = obj[key] || [];
            obj[key].push(item)
        });
        console.log(obj,"分类后的对象 ==========")
        return Object.keys(obj).map(k => {
            return obj[k];
        })
    }

			
		}
	}
  
</script>


运行结果

第2中效果

<template>
  <div>
    通过数组的某一个字段对数组进行分类,分类之后返回一个新的数组、
    <button @click="saveSort">数组分类</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      agendaInfos: [
        {
          agendaDate: "04-22",
          name: "张三",
          something: "休息",
        },
        {
          agendaDate: "04-21",
          name: "李四",
          something: "上班",
        },
        {
          agendaDate: "04-21",
          name: "王5",
          something: "请假",
        },
        {
          agendaDate: "04-22",
          name: "小六",
          something: "加班",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    saveSort() {
      //根据日期 对数组进行分
      let nList = [];
      for (let i = 0; i < this.agendaInfos.length; i++) {
        if (nList.length > 0) {
          let index = nList.findIndex(
            (item) => item.agendaDate === this.agendaInfos[i].agendaDate
          );
          if (index >= 0) {
            nList[index].data.push(this.agendaInfos[i]);
          } else {
            nList.push({
              agendaDate: this.agendaInfos[i].agendaDate,
              data: [this.agendaInfos[i]],
            });
          }
        } else {
          nList.push({
            agendaDate: this.agendaInfos[i].agendaDate,
            data: [this.agendaInfos[i]],
          });
        }
      }
      console.log(nList, "=========nList");
    },
  },
};
</script>

效果图

 

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值