> 웹 프론트엔드 > JS 튜토리얼 > 여러 속성별로 JavaScript 개체를 그룹화하고 해당 값을 합산하는 방법은 무엇입니까?

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

Mary-Kate Olsen
풀어 주다: 2024-11-11 03:30:03
원래의
209명이 탐색했습니다.

How do you group JavaScript objects by multiple properties and sum their values?

객체를 여러 속성별로 그룹화하고 값을 합산

JavaScript에서는 객체 배열을 사용하는 것이 일반적입니다. 특정 속성을 합산하는 등 해당 값에 대한 계산을 수행하는 동안 이러한 객체를 여러 속성별로 그룹화해야 하는 경우가 있습니다.

문제 개요

객체 배열이 제공되는 경우 , 우리는 두 가지 속성(모양과 색상)을 기준으로 그룹화하는 것을 목표로 합니다. 그러나 우리는 모양과 색상이 일치하는 경우에만 개체를 ​​복제본으로 처리하려고 합니다. 목표는 각 그룹 내 개체의 사용 및 인스턴스 속성을 합산하고 중복 항목을 모두 제거하는 것입니다.

예상 결과

다음 샘플 배열 사용:

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}
];
로그인 후 복사

4개의 배열을 얻을 것으로 예상됩니다. 그룹:

[{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}]
로그인 후 복사

Array#reduce 및 Object#할당을 사용한 솔루션

이를 달성하기 위해 JavaScript의 Array#reduce 메서드를 활용하여 배열을 반복할 수 있습니다. 사물. 각 객체에 대해 모양과 색상 속성을 연결하여 고유한 키를 구성합니다. 그런 다음 보조 개체인 도우미를 사용하여 그룹화된 개체를 추적합니다.

var helper = {};
var result = arr.reduce(function(r, o) {
  var 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;
}, []);
로그인 후 복사

도우미 개체에 키가 없으면 Object.sign()을 사용하여 새 항목을 추가하여 생성합니다. 현재 객체의 새로운 복사본. 그런 다음 이 새 개체를 결과 배열에 푸시합니다.

도우미에 키가 이미 존재하는 경우 중복된 개체를 발견했다는 의미입니다. 이 경우 도우미에서 해당 개체의 사용 및 인스턴스 속성을 증가시키기만 하면 됩니다.

마지막으로 개체의 값을 합산하면서 모양과 색상별로 개체를 효과적으로 그룹화하는 결과 배열을 반환합니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿