本文介绍在JavaScript中如何将对象数组按照指定字段的值进行分组。通过遍历数组，利用中间对象记录已存在的分组键，将具有相同字段值的对象归入同一子数组，最终返回包含key和data的嵌套数组结构。文章提供了两种实现思路及ES6 Object.keys方法的相关说明。
前言
在实际业务开发中，经常遇到需要根据数组内对象的某个共同字段值，将具有该相同值的对象重新组合成一个新的嵌套数组结构的需求。为了代码复用，此类数组处理逻辑通常建议封装至项目的公共工具函数库中供全局调用。
原始对象数组示例
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
Object.keys()方法用于返回一个由指定对象自身可枚举属性组成的数组，且属性名的排列顺序与正常循环遍历该对象时返回的顺序保持一致。- 需要注意的是，传入不同类型的变量时，该方法返回的数组值会有所不同。
- 当传入普通对象时，该方法返回属性名组成的数组。
- 当传入字符串时，返回各字符索引组成的数组。
- 当传入数组时，同样返回索引组成的数组。
- 当传入构造函数时，返回空数组或属性名列表。
综上所述，本文介绍了JS对象数组按字段分组的具体实现方法。如需了解更多相关js对象数组根据字段分组的内容，可搜索本站历史文章或继续浏览后续相关文章，感谢大家的支持。