[JavaScript] 배열(arr) 중복 제거하기

[JavaScript] 배열(arr) 중복 제거하기

script에서 사용하는 배열의 중복을 제거하는 방법에 대해 알아보자.

구글에 검색해봐도 대부분 비슷한 방법만이 존재해서 나 역시 그냥 기록해두고자 한다.

▷ 예제1) 배열 함수인 forEach() 와 includes() 활용 (ft. indexOf() 사용)

var arr = [1, 2, 3, 4, 2, 4, 5, 1]; //중복 제거 [1, 2, 3, 4, 5] - includes() var removeOverLapArr1 = []; arr.forEach(function(item, index){ if(!removeOverLapArr1.includes(item)){ removeOverLapArr1.push(item); } }); //중복 제거 [1, 2, 3, 4, 5] - indexOf() var removeOverLapArr2 = []; arr.forEach(function(item, index){ if(!(removeOverLapArr2.indexOf(item) >= 0)){ removeOverLapArr2.push(item); } });

사실 두번째 예제는 쉽게 사용할 수 있는 공통적인거라 생각하면 된다.

단순하게 반복문을 돌리고 포함여부만 체크해주면 되니 includes()를 사용하거나 indexOf()를 사용하거나 별 의미없고,

그냥 체크만 해줄수 있다면 뭐든 사용해도 상관없다.

▷ 예제2) 배열 함수인 filter() 와 indexOf() 활용

var arr = [1, 2, 3, 4, 2, 4, 5, 1]; //중복 제거 [1, 2, 3, 4, 5] var removeOverLapArr = arr.filter(function(item, index){ return arr.indexOf(item) === index; }); //중복된 값만 불러오기 [2, 4, 1] var overlapArr = arr.filter(function(item, index){ return arr.indexOf(item) !== index; });

배열 함수인 filter() 와 indexOf()를 활용한 것인데, indexOf() 함수 특징이 일치하는 데이터의 첫번째 index를 반환하는것이기때문에 이 특징을 이용하여 필터링 해주어 중복을 제거 해 준것이다.

이를 반대로 활용하면 중복된 값만 불러올 수 있다.

▷ 예제3) Set 객체를 사용한 중복제거

var arr = [1, 2, 3, 4, 2, 4, 5, 1]; //중복 제거 [1, 2, 3, 4, 5] var removeOverLapArr = Array.from(new Set(arr));

Set 객체는 ES6에서 등장한 새로운 data object 이며 중복 없는 데이터의 표현이 가능 하다.

이러한 특징을 이용하여 배열의 중복을 제거한 것이다.

예제를 1번부터 3번까지 봤는데 사실 1번과 2번에는 별 차이가없다.

그리고 성능상으로 볼때 3번예제가 가장 좋다고 하기에 저 방법을 추천한다.

참고 : https://redcow77.tistory.com/556

반응형

from http://mine-it-record.tistory.com/453 by ccl(A) rewrite - 2021-10-23 11:28:06