JavaScript 배열에서 중복 객체를 제거하는 방법

JavaScript에는 거의 모든 것에 대한 쉬운 방법이 있는 것 같습니다(댓글 🤷‍♂️에서 나와 동의하지 않음). 쉽지 않은 일 중 하나는 JavaScript 객체 배열에서 중복 객체를 제거하는 것입니다. 이 빠른 팁에서는 중복이 제거된 JavaScript 개체 배열을 반환하는 간단한 함수를 제공합니다.

자바스크립트 기능

먼저 두 개의 인수를 허용하는 함수를 살펴보겠습니다.

arr - JavaScript 객체의 원래 배열(중복을 포함할 수 있음)

keyProps - 중복을 허용하지 않도록 조합하여 확인해야 하는 개체 속성 이름의 배열입니다.

/**
 * Returns an array of objects with no duplicates
 * @param {Array} arr Array of Objects
 * @param {Array} keyProps Array of keys to determine uniqueness
 */
function getUniqueArray(arr, keyProps) {
    return Object.values(arr.reduce((uniqueMap, entry) => {
        const key = keyProps.map(k => entry[k]).join('|')
        if (!(key in uniqueMap)) uniqueMap[key] = entry
        return uniqueMap
    }, {}))
}

사용 예

아래 예제에는 "프로젝트 A"에서 웹 페이지에 대한 메타 태그를 만드는 데 사용할 JavaScript 개체 배열이 있습니다. 페이지에 메타 태그가 중복되는 것을 원하지 않으므로 중복을 제거하기 위해 함수를 통해 원래 배열을 실행합니다.

객체 내에서 모든 속성이 동일한 경우에만 객체를 제거하기를 원하므로 사용 가능한 모든 객체 속성을 함수에 배열로 전달합니다.

const startingArray = [
    { property: 'name', content: 'adam' }, // duplicate
    { itemprop: 'name', content: 'adam' },
    { property: 'twitter', content: '@adamdehaven' },
    { property: 'name', content: 'adam' }, // duplicate
    { property: 'tag', content: 'person' },
    { property: 'tag', content: 'developer' },
    { property: 'name', content: 'adam' }, // duplicate
]

const newArray = getUniqueArray(startingArray, ['property', 'content', 'itemprop'])

산출

함수의 출력을 기록하면 정확히 동일한 속성과 값을 가진 객체가 배열에서 제거되었음을 알 수 있습니다.

console.log(newArray)

// (5) [{…}, {…}, {…}, {…}, {…}]
// 0: {property: "name", content: "adam"}
// 1: {itemprop: "name", content: "adam"}
// 2: {property: "twitter", content: "@adamdehaven"}
// 3: {property: "tag", content: "person"}
// 4: {property: "tag", content: "developer"}
// length: 5
// __proto__: Array(0)