javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js对象数组根据字段分组

JS数组操作大全对象数组根据某个相同的字段分组

作者:fx67ll

这篇文章主要介绍了JS数组操作大全对象数组根据某个相同的字段分组,需要注意的是,在开发过程这种数组的处理函数,应当被编写到项目的公共工具函数库中全局调用,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下

先说点废话

最近在实际业务中,需要编写一个方法根据数组中每一个对象的一个相同字段,来将该字段值相等的对象重新编入一个数组,返回一个嵌套的数组对象,特地来做个总结。
当然需要注意的是,在开发过程这种数组的处理函数,应当被编写到项目的公共工具函数库中全局调用

目标对象数组

let dataArr = [{
		id: 1,
		anyId: 1023,
		anyVal: 'fx67ll',
		value: 'value-1'
	},
	{
		id: 2,
		anyId: 1024,
		anyVal: 'fx67ll',
		value: 'value-2'
	},
	{
		id: 3,
		anyId: 10086,
		anyVal: 'll',
		value: 'value-3'
	},
	{
		id: 1,
		anyId: 10086,
		anyVal: 'fx67',
		value: 'value-4'
	},
	{
		id: 2,
		anyId: 1024,
		anyVal: 'll',
		value: 'value-5'
	},
];

准换后的对象数组

[{
	"key": 1,
	"data": [{
		"id": 1,
		"anyId": 1023,
		"anyVal": "fx67ll",
		"value": "value-1"
	}, {
		"id": 1,
		"anyId": 10086,
		"anyVal": "fx67",
		"value": "value-4"
	}]
}, {
	"key": 2,
	"data": [{
		"id": 2,
		"anyId": 1024,
		"anyVal": "fx67ll",
		"value": "value-2"
	}, {
		"id": 2,
		"anyId": 1024,
		"anyVal": "ll",
		"value": "value-5"
	}]
}, {
	"key": 3,
	"data": [{
		"id": 3,
		"anyId": 10086,
		"anyVal": "ll",
		"value": "value-3"
	}]
}]

编写函数的思路

方法一

// arr 目标对象数组
// filed 分组字段
function classifyArrayGroupBySameFieldAlpha(arr, filed) {
	let temObj = {}
	for (let i = 0; i < arr.length; i++) {
		let item = arr[i]
		if (!temObj[item[filed]]) {
			temObj[item[filed]] = [item]
		} else {
			temObj[item[filed]].push(item)
		}
	}
	let resArr = []
	Object.keys(temObj).forEach(key => {
		resArr.push({
			key: key,
			data: temObj[key],
		})
	})
	return resArr
}

方法二

// arr 目标对象数组
// filed 分组字段
function classifyArrayGroupBySameFieldVBeta(arr, filed) {
	let temObj = {};
	let resArr = [];
	for (let i = 0; i < arr.length; i++) {
		if (!temObj[arr[i][filed]]) {
			resArr.push({
				key: arr[i][filed],
				data: [arr[i]]
			});
			temObj[arr[i][filed]] = arr[i]
		} else {
			for (let j = 0; j < resArr.length; j++) {
				if (arr[i][filed] === resArr[j].key) {
					resArr[j].data.push(arr[i]);
					break
				}
			}
		}
	}
	return resArr
}

拓展————ES6的新方法Object.keys

到此这篇关于JS数组操作大全对象数组根据某个相同的字段分组的文章就介绍到这了,更多相关js对象数组根据字段分组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文