欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js 数组,根据数组内部的对象中的某个属性值进行分组

程序员文章站 2024-03-04 10:46:47
...

工作期间,遇到了一个问题,将

let data = [
			{
				value: 'A组小明',
				group: 'A'
			},
			{
				value: 'A组小红',
				group: 'A'
			},
			{
				value: 'A组小刚',
				group: 'A'
			},
			{
				value: 'B组小蓝',
				group: 'B'
			},
			{
				value: 'B组小天',
				group: 'B'
			},
			{
				value: 'B组小军',
				group: 'B'
			}
		];

转化为

let data = [
			{
				group: 'A',
				value0: 'A组小明',
				value1: 'A组小红',
				value2: 'A组小刚'
			},
			{
				group: 'B',
				value0: 'B组小蓝',
				value1: 'B组小天',
				value2: 'B组小军'
			}
		];

这里我们是通过group 字段来进行分组,下面是我写的方法,供大家参考一下 data为所传数组,key为分组的字段

unique(data, key) {
			let lastData = [];
			data.forEach(item => {
				let status = lastData.some(value => value[key] == item[key]);
				if (!status) {
					item.number = 0;
					item.value0 = item.value;
					lastData.push(item);
				} else {
					lastData.forEach((value, index) => {
						if (value[key] === item[key]) {
							value.number += 1;
							value['value' + value.number] = item.value;
						}
					});
				}
			});
			return lastData;
		}

然后调用此方法

//这里因为我使用的是vue框架,所以调用的时候,用的this.unique调用方法,各位注意甄别
let result = this.unique(data, 'group');
		console.log(result);

最后得到的结果如下,这就是我想要的数据结构,大家如有类似的需求,可作为参考看一看

js 数组,根据数组内部的对象中的某个属性值进行分组

 

相关标签: web前端