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