Programing/JavaScript

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

리커니 2016. 6. 3.
반응형

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] */

 

 

 

반응형

댓글

💲 추천 글