[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

[Javascript] 자바스크립트(JS)의 배열 중복제거하기