Programing/JavaScript

javascript 자바스크립트 배열의 중복값 제거하는 여러가지 방법

리커니 2016. 6. 3. 15:50
반응형

javascript 자바스크립트 배열의 중복값을 제거하는 여러가지 방법

 

Javascript 에서 배열의 중복값을 제거하는 방법들에 대해서 알아보겠습니다.

중복값을 제거하는 함수인 removeDup를 만들어

가장 단순한 방법부터 구현하고 이를 개선해 보겠습니다.

 

const removeDup = function(arr){
	const newArray = [];
	for(let i=0, n=arr.length; i<n; i++){
		if(newArray.indexOf(arr.at(i)) === -1){
			newArray.push(arr.at(i));
		}
	}
	return newArray;
}
const array = [1,2,3,4,5,2,2,3,2,3,2,3];
const removeDupArray = removeDup(array);
console.log(removeDupArray); /* [1,2,3,4,5] */

 

새로운 배열 newArray에 같은 값이 없을 경우에만 push를 하고 newArray를 리턴합니다.

값이 배열에 존재하는지 체크를 할때는 indexOf 메소드 대신 includes 메소드를 활용할 수도 있습니다.

 

const removeDup = function(arr){
    const newArray = [];
	for(let i=0, n=arr.length; i<n; i++){
        if(!newArray.includes(arr.at(i))){
            newArray.push(arr.at(i));
        }
    }
    return newArray;
}

 

배열의 반복은 for...of 문을 사용하여 코드를 보다 간결하게 작성할 수 있습니다.

 

const removeDup = function(arr){
    const newArray = [];
	for(let val of arr){
        if(!newArray.includes(val)){
            newArray.push(val);
        }
    }
    return newArray;
}

 

배열의 고차함수인 reduce를 활용할 수도 있습니다. removeDup라는 함수를 만들지 않고 바로 중복이 제거된 배열을 생성할 수 있죠. 배열의 중복제거 함수가 자주 사용되지 않는다면 아래의 방법이 효율적입니다.

 

const removeDupArray = array.reduce(function(a, b){
    if (!a.includes(b)) a.push(b);
    return a;
}, []);

 

reduce 고차함수에 대한 설명은 아래의 Link를 참고하세요.

 

Link : javascript reduce 함수에 대해 알아보자 자바스크립트 reduce 함수, reduceRight 함수

 

javascript reduce 함수에 대해 알아보자 자바스크립트 reduce 함수, reduceRight 함수

javascript reduce 함수에 대해 알아보자 자바스크립트 reduce 함수 자바스크립트에는 고차함수(High-Order-Function : 다른 함수를 소비 또는 생성하는 함수)가 존재 합니다. 여기에는 filter, reduce, map 등이..

aljjabaegi.tistory.com

 

filter 고차함수를 활용할 수도 있습니다.

 

const removeDupArray = array.filter(function(val, idx){
    return array.indexOf(val) === idx;
});

 

indexOf는 첫번째 값의 index를 리턴하기 때문에 indexOf한 값과 idx값이 같은 경우에만 리턴해주면 중복을 제거할 수 있습니다.

filter 고차함수에 대한 설명은 아래의 Link를 참고하세요.

 

Link : https://aljjabaegi.tistory.com/312

 

javascript filter 함수에 대해 알아보자 자바스크립트 filter 함수

javascript filter 함수에 대해 알아보자 자바스크립트 filter 함수 지난 포스팅에서 자바스크립트 고차함수(High-Order_Function) 중 reduce에 대해 알아보았습니다. Link : javascript reduce 함수에 대해 알..

aljjabaegi.tistory.com

 

가장 간편한 방법은 자료구조의 특성을 활용한 방법입니다.

Array의 경우 중복을 허용하는 자료구조이지만 Set은 중복값을 허용하지 않습니다. 

이 특성을 이용하여 간단하게 중복을 제거할 수 있습니다.

(Array.from 메소드는 타 자료구조를 배열로 만들어주는 기능을 합니다.)

 

const array = [1,2,3,4,5,2,2,3,2,3,2,3];
const removeDupArray = new Set(array);
console.log(Array.from(removeDupArray); /* [1,2,3,4,5] */

 

 

 

반응형