我有一個物件陣列，這些物件有一個我想要分組的屬性。所以我的目標是生成一個新的物件陣列，其中它們具有所有相同的屬性以及一個將所有“值”屬性合并到一個陣列中的附加屬性。
以下是我的輸入和所需的輸出。我怎么能做到這一點？
輸入
[ {
group_by_this_property: 1,
value: 100,
class: 'A',
},
{
group_by_this_property: 1,
value: 101,
class: 'A',
},
{
group_by_this_property: 1,
value: 102,
class: 'A',
},
{
group_by_this_property: 2,
value: 200,
class: 'B',
},
{
group_by_this_property: 2,
value: 201,
class: 'B',
}
]
輸出
[
{
group_by_this_property: 1,
values: [100, 101, 102],
class: 'A',
},
{
group_by_this_property: 2,
values: [200, 201],
class: 'B',
},
]
uj5u.com熱心網友回復：
您可以使用 Map 對專案進行分組，并在最后回傳值，如下所示：
const data = [ { group_by_this_property: 1, value: 100, class: 'A' }, { group_by_this_property: 1, value: 101, class: 'A' }, { group_by_this_property: 1, value: 102, class: 'A' }, { group_by_this_property: 2, value: 200, class: 'B' }, { group_by_this_property: 2, value: 201, class: 'B' } ];
const res = [...
data.reduce((map, { group_by_this_property, value, ...props }) => {
const { values = [] } = map.get(group_by_this_property) ?? {};
values.push(value);
map.set(group_by_this_property, { ...props, group_by_this_property, values});
return map;
}, new Map)
.values()
];
console.log(res);uj5u.com熱心網友回復：
我可以在這里給你舉幾個例子。一個使用reduce
inputArr.reduce((acc, curr) => {
const existingGroup = acc.find(item => item.group_by_this_property === curr.group_by_this_property);
if (!existingGroup) {
acc.push({
...curr,
values: [curr.value]
});
delete curr.value;
return acc;
}
existingGroup.values.push(curr.value);
return acc;
}, [])
還有一個很老的for loop
const hashMap = {};
const res = [];
for (let index = 0; index < foo.length; index ) {
const element = inputArr[index];
if(element.group_by_this_property in hashMap) {
hashMap[element.group_by_this_property].values.push(element.value);
} else {
hashMap[element.group_by_this_property] = {
...element,
values: [element.value]
};
delete hashMap[element.group_by_this_property].value;
res.push(hashMap[element.group_by_this_property]);
}
}
為什么是兩個？好吧，就可讀性而言，您可以爭辯說第一個更易于閱讀和使用。inputArr但是如果你足夠大，它會變得有點復雜，你最終O(n^2)會影響到這個演算法的性能。
第二個將及時完成相同的作業O(n)。如果性能對您來說不是問題，或者資料輸入足夠小，我會使用第一個示例。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/506393.html
標籤：javascript 数组 json 目的
上一篇：單擊另一個選項卡時關閉的手風琴