先說點廢話
最近在實際業務中，需要撰寫一個方法根據陣列中每一個物件的一個相同欄位，來將該欄位值相等的物件重新編入一個陣列，回傳一個嵌套的陣列物件，特地來做個總結，
當然需要注意的是，在開發程序這種陣列的處理函式，應當被撰寫到專案的公共工具函式庫中全域呼叫
目標物件陣列
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()方法用于回傳一個由一個給定物件的自身可列舉屬性組成的陣列，陣列中屬性名的排列順序和正常回圈遍歷該物件時回傳的順序一致- 需要注意的傳不同型別的變數，回傳的陣列值也不同
- 如果傳入物件，則回傳屬性名陣列
- 如果傳入字串，則回傳索引
- 如果陣列，則回傳索引
- 如果建構式，則回傳空陣列或者屬性名
我是 fx67ll.com，如果您發現本文有什么錯誤，歡迎在評論區討論指正，感謝您的閱讀！
如果您喜歡這篇文章，歡迎訪問我的 本文github倉庫地址，為我點一顆Star，Thanks~ ??
轉發請注明參考文章地址，非常感謝！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/526909.html
標籤：其他
上一篇：JS防抖與節流