> 웹 프론트엔드 > JS 튜토리얼 > JavaScript의 개체 배열에서 고유한 값을 효율적으로 검색하는 방법은 무엇입니까?

JavaScript의 개체 배열에서 고유한 값을 효율적으로 검색하는 방법은 무엇입니까?

Patricia Arquette
풀어 주다: 2024-12-05 05:17:09
원래의
666명이 탐색했습니다.

How to Efficiently Retrieve Unique Values from an Array of Objects in JavaScript?

JavaScript의 객체 배열에서 고유한 값 검색

최적 접근 방식

효율적인 검색 객체 배열의 고유한 값, 스프레드 연산자와 Set 데이터 구조의 조합을 통해 취업하다. ES6 및 이후 버전의 JavaScript에서는 다음 접근 방식을 적극 권장합니다.

const data = [
  { name: "Joe", age: 17 },
  { name: "Bob", age: 17 },
  { name: "Carl", age: 35 }
];

const distinctAges = [...new Set(data.map(item => item.age))];

console.log(distinctAges); // [17, 35]
로그인 후 복사

이 접근 방식은 Set의 기능을 활용하여 중복 값을 제거하고 스프레드 연산자를 사용하여 고유한 값에서 새 배열을 생성합니다. map 함수는 배열을 반복하여 추가 처리를 위해 age 속성 값만 추출합니다.

대체 데이터 구조

데이터를 고유한 개체 배열로 구조화하는 경우 키가 선호되는 경우 Map 데이터 구조를 활용할 수 있습니다.

const data = new Map([
  ["1", { name: "Joe", age: 17 }],
  ["2", { name: "Bob", age: 17 }],
  ["3", { name: "Carl", age: 35 }]
]);

const distinctAges = [...data.values()].map(item => item.age);

console.log(distinctAges); // [17, 35]
로그인 후 복사

이 시나리오에서 데이터 변수는 다음을 포함하는 Map입니다. 고유 키(예: "1", "2", "3") 및 해당 개체 값. 고유한 연령을 검색하기 위해 값 속성을 사용하여 값 배열을 만든 다음 매핑하여 연령 속성 값만 추출합니다.

비효율적인 반복 방지

위에서 설명한 대로 Set 데이터 구조 또는 Map 데이터 구조를 활용하면 각 배열 요소를 반복하고 기존 값을 확인할 필요가 없게 됩니다. 이러한 데이터 구조는 기본적으로 고유성을 처리하므로 번거로운 반복 작업 없이 보다 효율적인 솔루션을 제공합니다.

위 내용은 JavaScript의 개체 배열에서 고유한 값을 효율적으로 검색하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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