> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 공통 속성으로 배열 항목을 그룹화하는 방법은 무엇입니까?

JavaScript에서 공통 속성으로 배열 항목을 그룹화하는 방법은 무엇입니까?

Susan Sarandon
풀어 주다: 2024-12-18 19:50:11
원래의
980명이 탐색했습니다.

How to Group Array Items by a Common Property in JavaScript?

객체를 사용하여 배열 항목 그룹화

객체가 포함된 배열을 처리할 때 공통 속성을 기반으로 항목을 그룹화하는 것이 유용할 수 있습니다. 이는 그룹 이름과 관련 값의 매핑을 생성하여 달성할 수 있습니다.

다음과 같은 배열이 있다고 가정합니다.

myArray = [
  {group: "one", color: "red"},
  {group: "two", color: "blue"},
  {group: "one", color: "green"},
  {group: "one", color: "black"}
]
로그인 후 복사

이를 항목이 있는 새 배열로 변환하려고 합니다. "그룹" 속성으로 그룹화됩니다.

myArray = [
  {group: "one", color: ["red", "green", "black"]},
  {group: "two", color: ["blue"]}
]
로그인 후 복사

이를 달성하려면 다음을 사용할 수 있습니다. 단계:

  1. 각 "그룹" 속성 값을 빈 배열에 매핑하는 매핑 개체를 만듭니다.
  2. 원래 배열의 각 항목을 반복하고 다음을 수행합니다.
    a. "group" 속성 값을 검색합니다.
    b. 매핑 개체에 해당 "그룹" 속성 값에 대한 키가 포함되어 있는 경우 "색상" 속성 값을 연결된 배열에 푸시합니다. 그렇지 않으면 빈 배열 값을 사용하여 매핑 개체에 새 키를 추가하고 "color" 속성 값을 해당 배열에 푸시합니다.
  3. 마지막으로 매핑 개체를 원하는 형식으로 변환합니다. 여기서 키는 "그룹" 속성 값과 값은 "그룹" 및 "색상" 속성을 가진 개체입니다.

다음은 JavaScript 예입니다. 구현:

var myArray = [
    {group: "one", color: "red"},
    {group: "two", color: "blue"},
    {group: "one", color: "green"},
    {group: "one", color: "black"}
];

var group_to_values = myArray.reduce(function (obj, item) {
    obj[item.group] = obj[item.group] || [];
    obj[item.group].push(item.color);
    return obj;
}, {});

var groups = Object.keys(group_to_values).map(function (key) {
    return {group: key, color: group_to_values[key]};
});
로그인 후 복사

실행 시 이 코드는 원하는 그룹화된 배열을 생성합니다.

groups:

{
  "one": [
    "red",
    "green",
    "black"
  ],
  "two": [
    "blue"
  ]
}
로그인 후 복사

위 내용은 JavaScript에서 공통 속성으로 배열 항목을 그룹화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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