JS數組操作大全對象數組根據某個相同的字段分組

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

這篇文章主要介紹了JS數組操作大全對象數組根據某個相同的字段分組,需要注意的是，在開發(fā)過程這種數組的處理函數，應當被編寫到項目的公共工具函數庫中全局調用，本文結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下

先說點廢話

最近在實際業(yè)務中，需要編寫一個方法根據數組中每一個對象的一個相同字段，來將該字段值相等的對象重新編入一個數組，返回一個嵌套的數組對象，特地來做個總結。
當然需要注意的是，在開發(fā)過程這種數組的處理函數，應當被編寫到項目的公共工具函數庫中全局調用

目標對象數組

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

編寫函數的思路

首先肯定是一個循環(huán)，因為需要循環(huán)來比對數組中每個對象相同的字段的值
其次，根據比對的字段值判斷是否存在重復，如果重復存在新的數組中，不重復則添加到之前定義過的數組中，完成分組
最后，返回處理完成的對象數組

方法一

// 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`

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

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

您可能感興趣的文章: