어제 오늘 내일

[Javascript] 배열 중복 제거하는 3가지 방법 본문

IT/Javascript

[Javascript] 배열 중복 제거하는 3가지 방법

hi.anna 2020. 10. 21. 00:39

 

Javascript의 배열에서 중복 되는 값을 제거하는 3가지 방법을 알아보도록 하겠습니다.

 

1. Set
2. indexOf(), filter()
3. forEach(), includes()

 

1. Set

Javascript에서 Set 객체를 이용하면 중복없는 데이터를 표현할 수 있습니다.

Set 객체의 이런 특징을 이용해서, 배열의 중복을 제거할 수 있습니다.

const dupArr = [1, 2, 3, 1, 2];

const set = new Set(dupArr);

const uniqueArr = [...set];

document.writeln(Array.isArray(uniqueArr));
document.writeln(uniqueArr);

 

위의 예제에서는

 

const set = new Set(dupArr);

중복값이 있는 배열을 Set 객체로 만들어서 중복을 제거한 후,

 

const uniqueArr = [...set];

Spread Operator(전개연산자)를 사용하여 Set 객체를 다시 배열로 변환하였습니다.

Set 객체를 배열로 변환할 때, Spread Operator 대신

Array.from() 또는 forEach() 문을 사용할 수도 있습니다.

 

[Javascript] Set 객체를 배열(Array)로 변환하는 3가지 방법

 

[Javascript] Set 객체를 배열(Array)로 변환하는 3가지 방법

Javascript에서 Set 객체는 중복 없는 데이터를 표현합니다. 이번에는 Set 객체를 배열(Array)로 변환하는 3가지 방법을 알아보도록 하겠습니다. 1. Array.from() 2. Spread Operator (전개 연산자) 3. forEach 1...

hianna.tistory.com

 

 

 

2. indexOf(), filter()

indexOf() 함수는, 배열에서 특정값이 처음으로 나타나는 index를 리턴합니다.

filter() 함수는 특정 조건에 부합하는 배열의 모든 값을 배열 형태로 리턴합니다.

이 두 함수를 사용하여 배열에 중복된 값을 제거 할 수 있습니다.

const dupArr = [1, 2, 3, 1, 2];

const uniqueArr = dupArr.filter(
  (element, index) => {
      return dupArr.indexOf(element) === index;
  }
);

document.writeln(Array.isArray(uniqueArr));
document.writeln(uniqueArr);

 

위 예제에서

 

dupArr.filter(callback);

filter() 함수는

dupArr의 원소들을 callback 함수로 전달하여 

각 원소들이 callback 함수에 정의된 기준에 부합하는지 검사하고,

검사 결과가 true를 리턴하는 원소을 모아서 배열 형태로 리턴(uniqueArr) 합니다.

 

dupArr.indexOf(element) === index;

filter() 함수로 전달 된 callback 함수는

검사하고 있는 값(element)이 배열(dupArr)에서 가장 처음으로 나타는 index와

검사하고 있는 원소의 index와 비교하여

같을 경우에만 true를 리턴합니다.

위의 예제에서 dupArr의 값이 순서대로 전달되면

'dupArr.indexOf(element) === index' 구문은

true, true, true, false, false 를 순서대로 리턴하여

중복되는 값이 첫번째로 나타나는 경우에만 filter 함수에서 걸러지도록 하였습니다.

 

이 구문이 잘 이해가 가지 않는다면,

다음의 filter(), indexOf() 함수 설명을 좀 더 참조하세요.

 

[Javascript] 배열의 특정 값 찾기 - find(), filter()

 

[Javascript] 배열의 특정 값 찾기 - find(), filter()

배열에서 특정 값을 찾는 방법을 알아보고 있습니다. 앞에서는 특정 값이 배열에 존재하는지, 존재한다면 어느 위치에 있는지 찾는 방법을 알아보았습니다. [Javascript] 배열 특정 값 위치(index) 찾

hianna.tistory.com

[Javascript] 배열 특정 값 위치(index) 찾기 - indexOf(), lastIndexOf()

 

[Javascript] 배열 특정 값 위치(index) 찾기 - indexOf(), lastIndexOf()

배열에서 특정 값의 위치 index를 찾는 방법을 소개합니다. Javascript에서 배열에서 특정 값의 위치를 찾는 방법은 다양합니다. 이번에는 먼저, indexOf() 함수와 lastIndexOf() 함수를 사용하여 배열에서

hianna.tistory.com

 

 

 

3. forEach(), includes()

forEach() 함수는 주어진 배열을 순회하면서, 배열의 원소들로 주어진 callback함수를 실행합니다.

include() 함수는 주어진 배열에 특정 값이 포함되는지 여부를 검사합니다.

 

const dupArr = [1, 2, 3, 1, 2];

let uniqueArr = [];
dupArr.forEach((element) => {
    if (!uniqueArr.includes(element)) {
        uniqueArr.push(element);
    }
});

document.writeln(Array.isArray(uniqueArr));
document.writeln(uniqueArr);

 

위 예제는

 

dupArr.forEach(callback);

dupArr(중복이 있는 배열)을 순회하면서

 

if (!uniqueArr.includes(element))

uniqueArr(중복이 없는 배열)이 배열의 원소를 가지고 있지 않다면,

 

uniqueArr.push(element)

uniqueArr에 배열의 원소를 집어 넣어줍니다.

 

[Javascript] 배열에 특정 값이 포함되어 있는지 여부 체크하기

 

[Javascript] 배열에 특정 값이 포함되어 있는지 여부 체크하기

Javascript의 배열 안에 특정 값이 포함되어 있는지 여부를 체크하는 방법을 소개합니다. 배열에 특정 값이 포함되어 있는지 여부 체크하기 배열 안에 특정 값이 포함되어 있는지 여부를 체크�

hianna.tistory.com

[Javascript] 배열 앞, 뒤에 값 추가, 삭제하기 (1)

 

[Javascript] 배열 앞, 뒤에 값 추가, 삭제하기 (1)

지난번에는 배열을 선언하는 방법을 알아보았습니다. [Javascript] 배열 선언하는 2가지 방법 이번에는 배열의 앞과 뒤에 값을 추가하는 방법을 알아보도록 하겠습니다. 배열 값 추가, 삭제하기 (앞

hianna.tistory.com

 

 

 


 

Set 객체, indexOf(), filter(), forEach(), includes()를 사용하여

배열의 중복된 값을 제거하는 방법을 알아보았습니다.

 

 

 

반응형
Comments