자바스크립트 문자열과 배열에서 중복값 제거 Set, filter, indexOf, reduce, includes, forEach, for of

[내용 출처]

https://blacklobster.tistory.com/14

간단간단! 자바스크립트(JS) 문자열, 배열 중복값 제거하기

 

1. Set

Set 객체는 중복값을 허용하지 않는 특징을 가지고 있다.

그래서 배열을 Set 객체로 변환한 후 다시 배열로 변환하면 중복값이 제거된 배열을 얻을 수 있다.

 

문자열 또한 마찬가지로 Set을 통해 배열 형태로 만든 다음 join() 메소드를 이용하여

다시 문자열로 변환하면 중복값이 제거된다.

// 배열의 중복값 제거
let arr = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5];
let uniqueArr = [...new Set(arr)];

console.log(uniqueArr); // [ 1, 2, 3, 4, 5 ]

// 문자열의 중복값 제거
let str = "hello World! ";
let uniqueStr = [...new Set(str)].join("");

console.log(uniqueStr); // helo Wrd!

 

아니면 아래와 같이 적을 수도 있다.

// 배열의 중복값 제거
let arr = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5];
let uniqueArr = [...arr];

console.log(Array.from(new Set(uniqueArr))); // [ 1, 2, 3, 4, 5 ]

// 문자열의 중복값 제거
let str = "hello World! ";
let uniqueStr = str.split("");

console.log(Array.from(new Set(uniqueStr)).join("")); // helo Wrd!

 

 

2. .filter() 메소드와 .indexOf() 메소드 활용하기

.filter() 메소드는 콜백 함수를 이용하여 조건에 맞는 요소만 추출한 배열을 반환하고,

.indexOf() 메소드는 특정 요소가 배열 내에서 처음으로 등장하는 인덱스를 반환한다.

// 배열의 중복값 제거
let arr = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5];
let uniqueArr = arr.filter((v, i) => {
  return arr.indexOf(v) === i;
});

console.log(uniqueArr); // [ 1, 2, 3, 4, 5 ]

// 문자열의 중복값 제거
let str = "hello World! ";
let uniqueStr = str
  .split("")
  .filter((v, i, arr) => {
    return arr.indexOf(v) === i;
  })
  .join("");

console.log(uniqueStr); // helo Wrd!

 

 

3. .reduce() 메소드와 .includes() 활용하기

.reduce() 메소드는 배열의 각 요소를 순회하면서 이전 값과 현재 값을 연산하여 하나의 결과값을 반환한다.

초기값은 빈 배열 []을 선언한다.

// 배열의 중복값 제거
let arr = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5];
let uniqueArr = arr.reduce((acc, cur) => {
  // acc는 배열 []이고 내부에 cur이 있는지 찾는다.
  if (acc.includes(cur)) {
    return acc; // 만약 있다면 acc를 그대로 반환한다.
  } else {
    return [...acc, cur]; // 없다면 cur을 포함하여 배열을 리턴한다.
  }
}, []);

// 삼항연산자로 줄이면 아래와 같다.
// let uniqueArr = arr.reduce(
//   (acc, cur) => (acc.includes(cur) ? acc : [...acc, cur]),
//   []
// );
console.log(uniqueArr); // [ 1, 2, 3, 4, 5 ]

// 문자열의 중복값 제거
let str = "hello World! ";
let uniqueStr = str
  .split("")
  .reduce((acc, cur) => (acc.includes(cur) ? acc : acc + cur), "");

console.log(uniqueStr); // helo Wrd!

 

 

4. 반복문 (forEach, for ... of) 활용하기

// 배열의 중복값 제거
let arr = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5];
let uniqueArr = [];

arr.forEach((element) => {
  if (!uniqueArr.includes(element)) {
    uniqueArr.push(element);
  }
});

console.log(uniqueArr); // [ 1, 2, 3, 4, 5 ]

// 문자열의 중복값 제거
let str = "hello World! ";
let uniqueStr = "";

for (const char of str) {
  if (!uniqueStr.includes(char)) {
    uniqueStr += char;
  }
}

console.log(uniqueStr); // helo Wrd!

 

 

[관련 문제]

https://ctrs.tistory.com/339