여러 속성별로 개체를 그룹화하고 JavaScript에서 해당 값을 집계하는 방법은 무엇입니까?

여러 속성으로 개체를 그룹화하고 해당 값을 집계

배열의 요소를 여러 속성으로 그룹화하는 것은 데이터 구성 및 요약에 필수적입니다. 모양과 색상별로 개체를 그룹화하고 해당 값을 집계해야 하는 특정 요구 사항을 해결하기 위해 JavaScript에 내장된 메서드의 기능을 활용할 수 있습니다.

1단계: Array#reduce

Array#reduce 메서드는 배열을 반복하여 개별 요소의 단일 출력을 누적하는 간결하고 효율적인 방법을 제공합니다. 이 경우 결합된 모양과 색상 속성을 기반으로 개체를 축적하는 데 사용할 수 있습니다.

2단계: 도우미 개체

추적하기 위해 도우미 개체를 사용합니다. 모양과 색상의 독특한 조합. 배열의 각 객체에 대해 모양과 색상 속성을 연결하여 도우미에 조합이 존재하는지 확인합니다. 존재하지 않는 경우 도우미 개체에 새 항목을 생성하는 동시에 현재 개체의 복사본을 결과 배열에 푸시합니다.

3단계: 값 집계

도우미 개체에 유사한 조합이 이미 존재하는 경우 해당 항목의 사용 및 인스턴스 값을 증가시켜 현재 개체의 값을 효과적으로 집계합니다.

4단계: 개체 복사

배열의 원본 개체를 수정하지 않으려면 Object.sign을 사용하여 복사본을 만듭니다. 이렇게 하면 도우미 개체에 개체의 독립적인 복사본이 포함되어 값을 별도로 집계할 수 있습니다.

구현:

const arr = [
  { shape: 'square', color: 'red', used: 1, instances: 1 },
  { shape: 'square', color: 'red', used: 2, instances: 1 },
  { shape: 'circle', color: 'blue', used: 0, instances: 0 },
  { shape: 'square', color: 'blue', used: 4, instances: 4 },
  { shape: 'circle', color: 'red', used: 1, instances: 1 },
  { shape: 'circle', color: 'red', used: 1, instances: 0 },
  { shape: 'square', color: 'blue', used: 4, instances: 5 },
  { shape: 'square', color: 'red', used: 2, instances: 1 },
];

const helper = {};
const result = arr.reduce((r, o) => {
  const key = o.shape + '-' + o.color;
  if (!helper[key]) {
    helper[key] = Object.assign({}, o); // create a copy of o
    r.push(helper[key]);
  } else {
    helper[key].used += o.used;
    helper[key].instances += o.instances;
  }
  return r;
}, []);

console.log(result);

출력:

[
  { shape: 'square', color: 'red', used: 5, instances: 3 },
  { shape: 'circle', color: 'red', used: 2, instances: 1 },
  { shape: 'square', color: 'blue', used: 11, instances: 9 },
  { shape: 'circle', color: 'blue', used: 0, instances: 0 }
]

이 솔루션은 모양과 색상별로 객체를 효과적으로 집계하여 데이터에 대한 응집력 있는 요약을 제공합니다.

위 내용은 여러 속성별로 개체를 그룹화하고 JavaScript에서 해당 값을 집계하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!