<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>
效果图