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

先说点废话

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

目标对象数组

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

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

准换后的对象数组

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

[{     "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 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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

方法二

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

// 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()方法用于返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致
• 需要注意的传不同类型的变量，返回的数组值也不同
  • 如果传入对象，则返回属性名数组
  • 如果传入字符串，则返回索引
  • 如果数组，则返回索引
  • 如果构造函数，则返回空数组或者属性名