es6의 배열에서 동일한 요소를 삭제하는 방법

青灯夜游
풀어 주다: 2023-01-04 09:13:23
원래의
2017명이 탐색했습니다.

삭제 방법: 1. Map 객체 및 배열의 ​​필터 방법을 사용합니다. 구문은 "function Unique(arr) {const res = new Map();return arr.filter((a) => !res.has입니다. (a) && res.set(a, 1))}"; 2. Set 객체와 배열의 Array.from 메서드를 사용합니다. 3. Set 객체와 확장 연산자 "..."를 사용합니다. 4. 축소()를 사용하세요.

es6의 배열에서 동일한 요소를 삭제하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

ES6 배열에서 중복 항목을 제거하는 네 가지 간단한 방법

첫 번째: Map 개체 및 배열의 ​​필터 메서드를 사용합니다.

해당 코드 붙여넣기

es6의 배열에서 동일한 요소를 삭제하는 방법
인쇄된 결과
es6의 배열에서 동일한 요소를 삭제하는 방법
인쇄를 통해 우리가 원하는 효과가 실제로 달성되었음을 발견했습니다. 그럼 아래에서 간단히 설명드리겠습니다.
1. Map 객체는 ES6에서 제공하는 새로운 데이터 구조입니다. has 메소드는 현재 MP 객체에 특정 값이 존재하는지 나타내는 부울 값을 반환하는 것입니다. set 메소드는 MP 객체에 대한 키/값을 설정하는 것입니다. 지도 객체.
2. filter() 메서드는 새 배열을 생성합니다. 지정된 배열에서 조건을 충족하는 모든 요소를 ​​확인하여 새 배열의 요소를 확인합니다.
그래서 필터 메소드와 결합된 Map 객체는 배열 중복 제거 효과를 얻을 수 있습니다~

두 번째: Set 객체와 배열의 Array.from 메소드를 사용

또한 해당 코드 조각을 붙여넣습니다.

es6의 배열에서 동일한 요소를 삭제하는 방법

실행 후 결과 인쇄

es6의 배열에서 동일한 요소를 삭제하는 방법
간단히 말해서 두 번째 방법은 첫 번째 방법보다 간단합니다. 그것도 간략하게 설명해보자.

1. Set은 ES6에서 제공하는 새로운 데이터 구조입니다. 배열과 유사하지만 중복된 값이 없습니다.
2. Array.from 메소드는 두 가지 유형의 객체를 실제 배열, 즉 배열 유사 객체와 반복 가능한 객체(ES6의 새로운 데이터 구조 Set 및 Map 포함)로 변환하는 데 사용됩니다.

그래서 세트를 Array.from과 결합하면 배열 중복 제거 효과도 얻을 수 있습니다. 다만, 마이크로소프트 엣지를 포함해 크롬, 퍼폭스, 오페라, 사파리 등 주류 브라우저는 모두 지원하지만 IE 시리즈만 지원하지 않는다는 점에 유의해야 한다.

세 번째 방법: Set + Spread 연산자 사용...

세 번째 방법은 더 간단하다고 할 수 있습니다.

해당 코드를 붙여넣으세요

es6의 배열에서 동일한 요소를 삭제하는 방법

실행 결과를 인쇄하세요

es6의 배열에서 동일한 요소를 삭제하는 방법

넷째: 축소 사용

축소 메소드는 전달한 축소 처리 함수에 따라 배열 요소를 줄이고 이를 최종 배열로 결합하는 데 사용됩니다.

이 예에서 리듀서는 최종 배열에 요소가 포함되어 있는지 확인합니다. 포함되지 않은 경우 요소가 이 배열에 푸시됩니다. 그렇지 않으면 이 요소는 무시됩니다. 함수는 최종적으로 최종 배열을 반환합니다.

축소 프로세스는 이해하기 쉽지 않습니다. 분해하여 출력을 살펴보겠습니다.

es6의 배열에서 동일한 요소를 삭제하는 방법

다음은 console.log의 출력입니다.

es6의 배열에서 동일한 요소를 삭제하는 방법

위 내용은 es6의 배열에서 동일한 요소를 삭제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!