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

編寫函數的思路

1. 首先肯定是一個迴圈，因為需要迴圈來比對數組中每個對象相同的欄位的值
2. 其次，根據比對的欄位值判斷是否存在重覆，如果重覆存在新的數組中，不重覆則添加到之前定義過的數組中，完成分組
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

1. Object.keys()方法用於返回一個由一個給定對象的自身可枚舉屬性組成的數組，數組中屬性名的排列順序和正常迴圈遍歷該對象時返回的順序一致
2. 需要註意的傳不同類型的變數，返回的數組值也不同
   • 如果傳入對象，則返回屬性名數組
   • 如果傳入字元串，則返回索引
   • 如果數組，則返回索引
   • 如果構造函數，則返回空數組或者屬性名

我是 fx67ll.com，如果您發現本文有什麼錯誤，歡迎在評論區討論指正，感謝您的閱讀！
如果您喜歡這篇文章，歡迎訪問我的 本文github倉庫地址，為我點一顆Star，Thanks~