Giả sử, chúng ta có một mảng hai chiều chứa dữ liệu về một số màu sắc và hoa quả như thế này
const data = [ ['orange', 'fruit'], ['red', 'color'], ['green', 'color'], ['orange', 'color'], ['banana', 'fruit'], ['blue', 'color'], ['lemon', 'fruit'], ['mango', 'fruit'], ['lemon', 'color'], ];
Chúng ta phải viết một hàm nhận trong mảng này và trả về một mảng trong đó các loại trái cây và màu sắc khác nhau được nhóm theo danh mục của chúng.
Giống như trong ví dụ này, chúng ta chỉ có hai danh mục là "fruit" và "color", vì vậy chúng ta nên mong đợi một mảng gồm hai đối tượng trong đầu ra như thế này -
[
{
group: 'fruit',
value: [ 'orange', 'banana', 'lemon', 'mango' ]
},
{
group: 'color',
value: [ 'red', 'green', 'orange', 'blue', 'lemon' ]
}
] Lưu ý - Trong ví dụ này, chúng tôi chỉ có hai danh mục nhưng chúng tôi bắt buộc phải viết một giải pháp hoạt động cho một số danh mục động chứ không chỉ hai.
Vì vậy, hãy đưa ra giải pháp cho vấn đề này. Chúng tôi sẽ sử dụng phương thức Array.prototype.reduce () và đối với mỗi mảng con, chúng tôi sẽ kiểm tra xem chúng tôi có một nhóm hiện có hay không. Nếu nhóm tồn tại, chúng tôi đẩy giá trị mới vào thuộc tính giá trị của nó, nếu không, chúng tôi tạo một đối tượng mới cho nhóm đó và đẩy nó vào mảng.
Ví dụ
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)); Đầu ra
Đầu ra trong bảng điều khiển sẽ là -
[
{
group: 'fruit',
value: [ 'orange', 'banana', 'lemon', 'mango' ]
},
{
group: 'color',
value: [ 'red', 'green', 'orange', 'blue', 'lemon' ]
}
]