資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究將陣列的陣列轉換為JavaScript分組的陣列物件
假設我們有一個二維陣列，其中包含有關某種顏色和水果的資料，如下所示
const data = [ ['orange', 'fruit'], ['red', 'color'], ['green', 'color'], ['orange', 'color'], ['banana', 'fruit'], ['blue', 'color'], ['lemon', 'fruit'], ['mango', 'fruit'], ['lemon', 'color'], ];
我們必須編寫一個函式，該函式採用此陣列並返回一個數組，其中不同的水果和顏色按其類別分組。
例如，在這個示例中，我們只有兩個類別，即“水果”和“顏色”，因此我們應該希望在輸出中獲得一個包含兩個物件的陣列，如下所示 -
[
{
group: 'fruit',
value: [ 'orange', 'banana', 'lemon', 'mango' ]
},
{
group: 'color',
value: [ 'red', 'green', 'orange', 'blue', 'lemon' ]
}
]請注意 - 在此示例中，我們只有兩個類別，但我們需要編寫一個解決方案，適用於動態數量的類別，而不僅僅是兩個。
因此，讓我們為這個問題構思一個解決方案。我們將使用 Array.prototype.reduce() 方法，對於每個子陣列，我們將檢查我們是否有現有的組。如果該組存在，我們會將其新值推入其值屬性，否則我們會為該組建立一個新物件並將其推入陣列。
示例
const data = [
['orange', 'fruit'],
['red', 'color'],
['green', 'color'],
['orange', 'color'],
['banana', 'fruit'],
['blue', 'color'],
['lemon', 'fruit'],
['mango', 'fruit'],
['lemon', 'color'],
];
const groupData = arr => {
return arr.reduce((acc, val) => {
const [value, groupName] = val;
const groupIndex = acc.findIndex(el => el?.group === groupName);
if(groupIndex !== -1){
acc[groupIndex].value.push(value);
}else{
acc.push({
group: groupName,
value: [value]
});
}
return acc;
}, []);
};
console.log(groupData(data));輸出
控制檯中的輸出將為 -
[
{ group: 'fruit', value: [ 'orange', 'banana', 'lemon', 'mango' ] },
{
group: 'color',
value: [ 'red', 'green', 'orange', 'blue', 'lemon' ]
}
]
更新於：25-8-2020
898次瀏覽
廣告