배열 중복값 제거하기

#배열의 중복값 제거하기

1. set()을 사용하여 배열에서 중복 제거하기

set()

• ES6부터 새롭게 도입된 자바스크립트 객체
• 순서를 가지는 값들의 집합들
• 중복된 값을 허용하지 않음

예제)

1. 중복된 배열을 set으로 변환 (set은 중복요소를 제거)
2. set을 다시 배열로 변환

const chars = ["A", "B", "A", "C", "B"];
const uniqueChars = [...new Set(chars)];

console.log(uniqueChars); // [ 'A', 'B', 'C' ]

2. indexOf()와 filter()을 사용해서 중복 제거하기

- indexOf()

• 입력 값이 배열에서 가장 처음 나타나는 index 값을 반환

- filter()

• callback 함수에 정의한 부분에 대해 true로 반환되는 요소만을 배열로 반환

예제)

1. 값이 가장 처음 나타나는 index와 해당 요소의 배열의 index값이 일치하는 경우만 반환하도록 설정

const chars = ["A", "B", "A", "C", "B"];
const uniqueChars = chars.filter((c, i) => chars.indexOf(c) === i);

console.log(uniqueChars); // [ 'A', 'B', 'C' ]

3. forEach()와 include()을 사용해서 중복 제거하기

include()

• 배열에 해당 값이 있다면 true를 반환, 아니라면 false를 반환

예제)

1. 중복제거한 배열을 담을 변수 선언
2. 배열을 반복해서 돌며, 해당 값이 중복 제거한 배열에 담겨있지 않다면 push()로 추가하기

const chars = ["A", "B", "A", "C", "B"];

const uniqueChars = [];
chars.forEach((c) => {
  if (!uniqueChars.includes(c)) {
    uniqueChars.push(c);
  }
});

console.log(uniqueChars); // [ 'A', 'B', 'C' ]

4. reduce()와 includes() 사용해서 배열에서 중복 제거하기

reduce()

• 배열의 각 요소에 대해 주어진 reducer함수를 실행하고, 하나의 결과값을 반환
• reduce((누산기, 현재값) => callback , initialValue)

예제)

1. callback 함수의 결과값을 담을 빈 배열을 초기값으로 설정
2. 누산값에 현재값이 담겨 있으면, 누산값을,
3. 누산값에 현재값이 담겨 있지 않다면 누산값에 현재값을 더함

const chars = ["A", "B", "A", "C", "B"];

const uniqueChars = chars.reduce(
  (acc, cur) => (acc.includes(cur) ? acc : [...acc, cur]),
  []
);

console.log(uniqueChars); // [ 'A', 'B', 'C' ]

5. 객체의 특성 속성만 비교해서 중복 제거하기

new Map()

Map이란?

• 다양한 자료형의 key를 허용하고, key-value 형태의 자료형으로 이루어진 콜렉션
• Object와 비교해 다양한 key 사용이 가능함
• 다양한 메서드를 통해 값을 추가/삭제할 수 있음

예제)

모든 코드

const members = [
  { id: 1, name: "John" },
  { id: 2, name: "Jane" },
  { id: 1, name: "Johnny" },
  { id: 4, name: "Alice" }
];

const unique = [...new Map(members.map((m) => [m.id, m])).values()];
console.log(unique);
// [
//   { id: 1, name: 'Johnny' },
//   { id: 2, name: 'Jane' },
//   { id: 4, name: 'Alice' }
// ]

1. map()을 사용해 새 배열을 만듬

[member.id , member]

members.map((m) => [m.id, m]);

// 결과
// [
//   [ 1, { id: 1, name: 'John' } ],
//   [ 2, { id: 2, name: 'Jane' } ],
//   [ 1, { id: 1, name: 'Johnny' } ],
//   [ 4, { id: 4, name: 'Alice' } ]
// ]

2. new Map()을 사용해 중복값 제거 ()

Map 객체의 키는 고유해야 하기 때문에 배열의 배열에서 Map을 생성하면 중복된 객체가 제거됨 (id가 중복된 객체)

const newMap = new Map(newArray);
console.log(newMap);

// 결과
// Map(3) {
//   1 => { id: 1, name: 'Johnny' },
//   2 => { id: 2, name: 'Jane' },
//   4 => { id: 4, name: 'Alice' }
// }

3. 중복제거된 객체의 value 값만 가져와 배열로 변환하기

const iterator = newMap.values();
const uniqueMembers = [...iterator];

console.log(uniqueMembers);
// 결과
// [
//   { id: 1, name: 'Johnny' },
//   { id: 2, name: 'Jane' },
//   { id: 4, name: 'Alice' }
// ]

※ 코드 축약

// 단계별
const newArray = members.map((m) => [m.id, m]);
const newMap = new Map(newArray);
const iterator = newMap.values();
const unique = [...iterator];

// 축약
const unique = [...new Map(members.map((m) => [m.id, m])).values()];

★중복제거하는 함수 uniqueBy()

const uniqueBy = (arr, prop) => {
  return [...new Map(arr.map((m) => [m[prop], m])).values()];
};

참고사이트

• https://www.javascripttutorial.net/array/javascript-remove-duplicates-from-array/
• 자바스크립트 - Array VS Set
• JavaScript 배열 중복 제거하는 방법 5가지
• [JavaScript] new Map() 이란?