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

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!