제목을 다음과 같이 다시 작성합니다. 기본 배열을 그룹화하고 각 그룹에 필드와 하위 배열을 추가합니다.

Question

다음과 같은 무거운 배열이 있습니다.

[
  {Id: 1, 이름: '빨간색', 옵션 이름: '색상'},
  {Id: 2, 이름: '노란색', 옵션 이름: '색상'},
  {Id: 3, 이름: '파란색', optionName: '색상'},
  {Id: 4, 이름: '녹색', optionName: '색상'},
  {Id: 7, 이름: '검정색', optionName: '색상'},
  {Id: 8, 이름: 'S', optionName: '크기'},
  {Id: 11, 이름: 'M', optionName: '크기'},
  {Id: 12, 이름: 'L', optionName: '크기'},
  {Id: 13, 이름: 'XL', 옵션 이름: '크기'},
  {Id: 14, 이름: 'XXL', 옵션 이름: '크기'}
]

optionName별로 그룹화해야 하며 기본 배열에 다음과 같이 두 개의 행이 있어야 합니다.

[
  {
    이름: '색상',
    데이터:[{Id: 1, 이름: '빨간색'},
          {ID: 2, 이름: '노란색'},
          {ID: 3, 이름: '파란색'},
          {ID: 4, 이름: '녹색'},
          {ID: 7, 이름: '검은색'}]
  }, {
    이름: '크기',
    데이터:[{Id: 8, 이름: 'S'},
          {ID: 11, 이름: 'M'},
          {ID: 12, 이름: 'L'},
          {ID: 13, 이름: 'XL'},
          {ID: 14, 이름: 'XXL'}]
  }
]

자바스크립트로 어떻게 구현하나요?

Answer 1

Map 객체를 사용하는 ES6 솔루션:

으아악 으아악

Answer 2

다음은 이 상황에 대해 제가 작성한 코드 조각입니다. 이 함수를 모든 배열에 추가할 수 있습니다:

으아아아

이렇게 사용하시면 됩니다. 데이터를 그룹화하는 방법을 정의하는 함수를 전달하기만 하면 됩니다.

으아아아

작업 바이올린

필요하다면 {key: k, data: map[k]}替换为{Name: k, Data: map[k]}할 수 있습니다.

---

이것은 위 코드의 더 간결한 ES6 버전이기도 합니다:

으아아아

다음과 같이 사용하세요:

으아아아