快捷導(dǎo)航

JS數(shù)組操作大全對(duì)象數(shù)組根據(jù)某個(gè)相同的字段分組

更新時(shí)間：2022年11月04日 09:52:41 作者：fx67ll

這篇文章主要介紹了JS數(shù)組操作大全對(duì)象數(shù)組根據(jù)某個(gè)相同的字段分組,需要注意的是，在開發(fā)過(guò)程這種數(shù)組的處理函數(shù)，應(yīng)當(dāng)被編寫到項(xiàng)目的公共工具函數(shù)庫(kù)中全局調(diào)用，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

先說(shuō)點(diǎn)廢話

最近在實(shí)際業(yè)務(wù)中，需要編寫一個(gè)方法根據(jù)數(shù)組中每一個(gè)對(duì)象的一個(gè)相同字段，來(lái)將該字段值相等的對(duì)象重新編入一個(gè)數(shù)組，返回一個(gè)嵌套的數(shù)組對(duì)象，特地來(lái)做個(gè)總結(jié)。
當(dāng)然需要注意的是，在開發(fā)過(guò)程這種數(shù)組的處理函數(shù)，應(yīng)當(dāng)被編寫到項(xiàng)目的公共工具函數(shù)庫(kù)中全局調(diào)用

目標(biāo)對(duì)象數(shù)組

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'
	},
];

準(zhǔn)換后的對(duì)象數(shù)組

[{
	"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"
	}]
}]

編寫函數(shù)的思路

首先肯定是一個(gè)循環(huán)，因?yàn)樾枰h(huán)來(lái)比對(duì)數(shù)組中每個(gè)對(duì)象相同的字段的值
其次，根據(jù)比對(duì)的字段值判斷是否存在重復(fù)，如果重復(fù)存在新的數(shù)組中，不重復(fù)則添加到之前定義過(guò)的數(shù)組中，完成分組
最后，返回處理完成的對(duì)象數(shù)組

方法一

// arr 目標(biāo)對(duì)象數(shù)組
// 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 目標(biāo)對(duì)象數(shù)組
// 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`

Object.keys()方法用于返回一個(gè)由一個(gè)給定對(duì)象的自身可枚舉屬性組成的數(shù)組，數(shù)組中屬性名的排列順序和正常循環(huán)遍歷該對(duì)象時(shí)返回的順序一致
需要注意的傳不同類型的變量，返回的數(shù)組值也不同
- 如果傳入對(duì)象，則返回屬性名數(shù)組
- 如果傳入字符串，則返回索引
- 如果數(shù)組，則返回索引
- 如果構(gòu)造函數(shù)，則返回空數(shù)組或者屬性名

到此這篇關(guān)于JS數(shù)組操作大全對(duì)象數(shù)組根據(jù)某個(gè)相同的字段分組的文章就介紹到這了,更多相關(guān)js對(duì)象數(shù)組根據(jù)字段分組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: