지도 데이터 구조와 its related keyed collections siblings는 자바스크립트 개발의 편리한 도구이다.지도는 키 값 저장으로 유일한 키로 데이터에 접근할 수 있으며, 모든 요소를 교체할 필요가 없다. (이것은 키 차이,hah) 일부 장면에서 수조보다 더 빨리 검색하고 검색할 수 있다.
색인 집합 (예를 들어 그룹이나 목록) 만 사용한 사람들에게는 왜 자바스크립트 대상에서 사용하는지 알고 싶을 수도 있습니다.
MDN documentation 실제적으로 상세한 비교도가 있는데 지도와 대상을 비교하기 때문에 그곳을 방문하여 더욱 깊은 정보를 얻으십시오.
한 마디로 하면maps는 문자열과 기호 이외의 형식을 키로 사용할 수 있고 빈번한 추가와 삭제를 최적화할 수 있기 때문에 더욱 큰 유연성과 성능을 제공할 수 있다.
지도가 도움이 될 수 있는 진실한 장면을 봅시다.

API를 사용하는 실제 장면

그래서 나는 내가 단지 원생 대상을 비난했을 뿐이라는 것을 알지만, 사실은 많은 API가 JSON에서 결과를 생성하고 그것을 대상으로 전환한다는 것이다.
현재, 우리가 방금 한 API 노드에서 여러 개의 대상 그룹을 검색했다면, 아마도 어떤 블로그 글에 대해 논평을 한 사용자 목록일 것이다.

const userResults = [
    {
        "id": 1,
        "slug": "how-to-cook-chicken",
        "comments": [
            {
                "userid": 1,
                "name": "sally",
                // other fields
            },
            // other users
        ],
        // other fields
    },
    // other articles
];

우리는 현재 필요한 데이터가 있지만 중복된 데이터가 존재할 수 있다.일부 사용자들은 여러 편의 문장에 대해 논평을 발표했을지도 모르지만, 우리는 정말 보장할 수 없다.
다음에 우리는 방금 검색한 모든 사용자에 대한 정보를 얻기를 원할 수도 있습니다. 사용자 id를 사용하여 다른 API 단점을 호출할 것입니다.
이 문제를 해결할 수 있는 몇 가지 방법이 있다. 가장 간단한 방법은 그것을 무시하고 반복적인 요청으로 API를 폭격하고 단점이나 서버의 어떤 형식의 캐시에 의존하여 불러오는 시간을 최소화하는 것이다.그러지 마세요
진정한 해결 방안을 보여 드리겠습니다.원래대로, 우리는 결과를 통합한 후에 대상 그룹을 정렬할 수 있다.여러 가지 좋은 해결 방안은 진열의 중복 대상을 삭제할 수 있으며, 각각의 장단점이 있다.(각 객체가 기술적으로 다르기 때문에 컬렉션에서 중복 항목을 필터링하지 않습니다.)
인스턴스

어떻게 대상 그룹에서 모든 중복 항목을 삭제합니까?

2010년 2월 8일
참고: 4
정답:69

606

나는 하나의 대상 수조를 포함하는 대상이 있다.

things = new Object();

things.thing = new Array();

things.thing.push({place:"here",name:"stuff"});
things.thing.push({place:"there",name:"morestuff"});
things.thing.push({place:"there",name:"morestuff"});

나는 그룹에서 중복 대상을 삭제하는 가장 좋은 방법이 무엇인지 알고 싶다.예를 들면, 일.일이 바뀔 거야...

{place:"here",name:"stuff"},
{place:"there",name:"morestuff"}

Open Full Question
그러나 나는 이곳에서 지도를 사용하는 대체 방법을 제공했다.
대부분의 데이터는 특정한 방식으로 구성되어 있으며, 특히 API에서 나온 데이터는 그렇다.만약 유일한 식별자나 복합 키가 없다면, 결과를 얻는 것은 매우 드물다.이런 상황에서 우리는 사용자의 id 필드가 있습니다.이것이 바로 우리가 어떻게 이런 구조를 이용하여 우리에게 우위를 가져다 줄 것인가이다.

지도 사용 솔루션

내가 본문에서 처음에 언급한 바와 같이 지도는 유일한 키만 포함할 수 있다.
우리의 결과는 독특한 관건이 있다.
위에서 말한 바와 같이 우리는 결과를 지도에 삽입하고 id(또는 유일한 키)를 키 필드로 사용하여 전체 대상을 값으로 하여 중복된 결과를 필터할 수 있다.
이 값은 버려지지 않고 실제로 덮어쓰기 때문에 이 값이 완전히 중복된다고 가정합니다.

/* Map<id, user> */
const uniqueUsers = new Map();
/**
 * Store users into a map object filtered by user's id.
 *
 * @param {Map} map - map to store in
 * @param {Array} users - user objects
 */
const filterUsersWithMap = (map, users) => users.forEach(user => map.set(user.id, user));
userResults.forEach(results => filterUsersWithMap(uniqueUsers, results["comments"]));

Please note that while we have a guaranteed time complexity of O(n) (with regards to the users) for filtering our duplicates, our space complexity has now increased to O(n^2), so watch out if you have memory constraints.

맵 사용의 이점

여기서 매핑을 사용하면 몇 가지 이점이 있습니다. 첫 번째 이점은 매핑이 하나라는 것입니다iterable. 이것은 우리가 그것을 통해 순환을 하고 다른 API 단점에서 데이터를 얻을 수 있다는 것을 의미합니다. 아래와 같습니다.

// values is the object we stored earlier
// ***the results are retrieved in the order they are inserted
[...uniqueUsers].values().forEach(user => fetch(`/api/users/${user.id}`));

그 다음에 우리는 기본적으로 메모리 캐시를 만들어서 사용자의 id를 통해 사용자에게 신속하게 접근할 수 있습니다!만약 우리가 데이터베이스를 필요로 하지 않는다면, 우리는 추가 사용자 데이터를 대상 값에 추가하고, API가 호출되기 전에 항상 그것을 검사할 수 있다.

/**
 * Retrieve user data from API or cache.
 *
 * @param {number} userId - user to query for
 * @param {string} detail - object field in user data
 * @param {Map} allUsers - in-memory store of users
 * @returns user object with details
 */
const getUserDetailById = (userId, detail, allUsers = undefined) => {
    const cachedUser = allUsers.get(userId);
    if (cachedUser !== undefined && cachedUser.hasOwnProperty(detail)) {
        return cachedUser.detail;
    }
    // =================================
    // send API request for user details...
    // add data to a new user object...
    // =================================
    allUsers.set(userId, user); // the value will be overriden at that key
    return user.detail;
};

후기

나는 내가 다른 사람이 정렬 알고리즘의 문제를 해결하는 것을 도울 수 있기를 바란다. 왜냐하면 나는 개인적으로 해시 맵(밑바닥 맵 데이터 구조의 기술 용어)에 대한 요구가 너무 높다는 것을 알고 있기 때문이다space-time tradeoff.
나는 산열도의 실제 응용 프로그램에 관한 글을 쓰고 싶다. 왜냐하면 산열도가 어떻게 백그라운드에서 작동하는지 설명하는 글이 많기 때문이다.
마지막으로 너는 트위터에 나의 인코딩 에피소드를 따라갈 수 있다!

보너스

배율 조정

메모리의 데이터 저장소를 외부 서버로 이동함으로써 이 기술도 확장할 수 있다.이것은 전용 메모리 데이터 저장의 예입니다. 만약 우리가 여러 노드 서버가 동시에 사용자를 검색하기를 원한다면, 이것은 우리의 기술을 대체할 수 있습니다. (더 정확히 말하면 확장입니다. 왜냐하면 Redis가 더 많은 기능을 제공하기 때문입니다.)

최적화

비동기적으로 여러 개의 API 노드를 호출할 때 가능한 최적화는 약속으로 실행filterUsersWithMap하고 모든 약속이 먼저 해석되기를 기다리는 것이 아니라 모든 API 호출이 끝날 때 사용자 데이터를 삽입하는 것이다.(Javascript 맵이 비동기적으로 접근하거나 쓸 수 없다면, 지식이 더 많은 사람들이 나를 바로잡을 수 있습니다. 나는 이 주제에서 어떤 결과도 찾을 수 없습니다. 만약 우리가 할 수 없다면, Redis와 다른 해결 방안은 확실히 잠금 메커니즘을 제공합니다.)

실시

백그라운드에서 자바스크립트 맵은 추상적인 데이터 형식 hash map 의 예시로, 키에 산열 함수를 사용하여 우리의 값 대상을 어디에 저장하는지 확인합니다.이 해시 함수가 있으면 O(1) 시간의 복잡도를 평균적으로 검색, 삽입, 삭제할 수 있습니다. 이것은 인코딩 도전에서 저를 도와주었습니다.

신용

표지 사진은 Марьян Блан | @marjanblan 에서 Unsplash