객체를 여러 속성별로 그룹화하고 값을 합산
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!