다음과 같은 일부 색상과 과일에 대한 데이터가 포함된 2차원 배열이 있다고 가정해 보겠습니다.
상수 데이터 =[ ['오렌지', '과일'], ['빨강', '색상'], ['그린', '색상'], ['오렌지', '색상'], ['바나나 ', '과일'], ['파란색', '색상'], ['레몬', '과일'], ['망고', '과일'], ['레몬', '색상'],];우리는 이 배열을 받아 다른 과일과 색상이 범주별로 그룹화된 배열을 반환하는 함수를 작성해야 합니다.
이 예에서와 같이 '과일'과 '색상'이라는 두 가지 범주만 있으므로 출력에서 다음과 같은 두 객체의 배열을 예상해야 합니다. -
[ { group:'fruit', value:[ 'orange', 'banana', 'lemon', 'mango' ] }, { group:'color', value:[ 'red', 'green', '오렌지', '파란색', '레몬' ] }]참고 − 바로 이 예에서 우리는 두 개의 범주만 가지고 있지만 두 개뿐만 아니라 동적 수의 범주에 대해 작동하는 솔루션을 작성해야 합니다.
따라서 이 문제에 대한 솔루션을 고안해 보겠습니다. Array.prototype.reduce() 메서드를 사용하고 각 하위 배열에 대해 기존 그룹이 있는지 여부를 확인합니다. 그룹이 존재하는 경우 새 값을 value 속성에 푸시합니다. 그렇지 않으면 해당 그룹에 대한 새 개체를 생성하여 배열에 푸시합니다.
예시
상수 데이터 =[ ['오렌지', '과일'], ['빨강', '색상'], ['그린', '색상'], ['오렌지', '색상'], ['바나나 ', '과일'], ['파란색', '색상'], ['레몬', '과일'], ['망고', '과일'], ['레몬', '색상'],];const groupData =arr => { return arr.reduce((acc, val) => { const [값, groupName] =val; const groupIndex =acc.findIndex(el => el?.group ===groupName); if( groupIndex !==-1){ acc[groupIndex].value.push(값); }else{ acc.push({ 그룹:그룹 이름, 값:[값] }); } 반환 acc; }, []); };console.log(그룹데이터(데이터));출력
콘솔의 출력은 다음과 같습니다. -
[ { group:'fruit', value:[ 'orange', 'banana', 'lemon', 'mango' ] }, { group:'color', value:[ 'red', 'green', '오렌지', '파란색', '레몬' ] }]