JavaScript: 배열에서 중복 값을 제거하는 방법

원래 게시 날짜 Will's blog


previous post에서 JavaScript 배열에 중복 값이 ​​포함되어 있는지 확인하는 방법을 보았습니다. 오늘은 배열에서 중복 값을 제거하기 위해 찾은 몇 가지 다른 방법을 보여드리고자 합니다.

Array.prototype.filter() 및 Array.prototype.indexOf() 메서드 사용

let originalArray = [1, 2, 3, 4, 1, 2, 3, 4]

let uniqueArray = originalArray.filter((item, index, array) => {
  return array.indexOf(item) === index
})

// uniqueArray === [1, 2, 3, 4]

여기서 기본 전략은 originalArray 를 반복하고 현재 검사 중인 항목의 인덱스가 originalArray 의 항목 인덱스와 동일한지 확인하는 것입니다.
indexOf는 주어진 값에 대해 찾은 첫 번째 인덱스를 반환하기 때문에 중복 값이 ​​아닌 경우 해당 항목의 인덱스는 동일해야 합니다!

이 방법은 가장 효율적이지 않습니다. 2차 시간에 실행됩니다. 따라서 검사하는 배열의 크기가 매우 큰 경우 다른 방법을 사용할 수 있습니다.

가치가 없는 또 다른 점은 동일한 방법을 사용하여 비교를 반전하여 중복 값만 반환할 수 있다는 것입니다.

let duplicateArray = originalArray.filter((item, index, array) => {
  return array.indexOf(item) !== index
})

Array.prototype.reduce() 및 Array.prototype.includes() 사용

let originalArray = [1, 2, 3, 4, 1, 2, 3, 4]

let uniqueArray = originalArray.reduce((unique, item) => {
  unique.includes(item) ? unique : [...unique, item]
}, [])

// uniqueArray === [1, 2, 3, 4]

여기서 전략은 감속기 기능의 '누적기'( unique )에 고유 항목의 실행 목록을 유지하는 것입니다. originalArray의 각 항목에 대해 누산기에 고려 중인 항목이 포함되어 있는지 확인합니다.

항목이 포함되어 있으면 변경하지 않고 누적기를 반환하여 사실상 해당 항목을 '건너뛰기'합니다.

항목이 포함되어 있지 않으면 누산기의 값을 새 배열로 분산하고 고려 중인 항목을 추가하십시오.

Array.prototype.includes는 부울 값을 반환합니다. 배열에 값이 있으면 true, 없으면 false입니다. 이 부울 값은 각 값으로 수행할 작업을 결정하는 조건을 구동합니다.

나는 이 접근 방식이 덜 직관적이고 읽기 어렵다고 생각하지만 효과가 있습니다.

또한 reducer 함수 뒤에 전달되는 빈 배열은 누산기의 시작 값이므로 reduce , unique 를 통한 첫 번째 패스는 빈 배열입니다.

⚡ ES6 Set 개체 사용 ⚡

let originalArray = [1, 2, 3, 4, 1, 2, 3, 4]

let uniqueArray = array => [...new Set(array)]

// or

let uniqueArray = Array.from(new Set(originalArray))

// uniqueArray = [1, 2, 3, 4]

이 접근 방식은 ES6에 도입된 Set 객체의 힘을 활용합니다.

세트는 삽입된 항목의 순서를 유지하고 고유한 값만 포함하도록 보장됩니다. 따라서 집합이 중복을 포함하는 것은 정의상 불가능합니다!

여기에서 Set 객체의 생성자를 호출하여 Set를 구성하려는 배열을 전달합니다. 그런 다음 모든 중복 항목을 잘라내고 나머지 값을 Set 에 저장하면 배열로 다시 변환하고 결과를 반환합니다.

고려 중인 배열이 매우 크고 중복 값이 ​​많이 포함된 경우 이 접근 방식이 성능이 약간 떨어진다는 논의를 본 적이 있습니다. 그러나 동일한 논의에 따르면 이 접근 방식은 데이터에 중복이 거의 없는 시나리오에서 매우 효율적입니다.

개인적으로 이 마지막 접근 방식의 간결함은 Set 개체 접근 방식을 사용하지 않는 강력한 성능상의 이유가 없는 한 사용을 보증하기에 충분한 이점이 있다고 생각합니다.