JavaScript로 대용량 데이터 다중 필터링

모든 코드는 ES2015 구문을 사용합니다. ES5 구문이 필요한 경우 Babel - 사용해 보기 또는 TypeScript Playground를 사용하여 번역할 수 있습니다.

질문 제기

오늘 친구가 저에게 질문을 했습니다. 프런트엔드는 Ajax를 통해 백엔드에서 많은 양의 데이터를 가져오는데, 어떤 조건에 따라 필터링이 필요합니다. . 필터링 방법은 다음과 같습니다.

class Filter { 
    filterA(s) { 
        let data = this.filterData || this.data; 
        this.filterData = data.filter(m => m.a === s); 
    } 
     
    filterB(s) { 
        let data = this.filterData || this.data; 
        this.filterData = data.filter(m => m.b === s); 
    } 
}

이제 이런 식으로 데이터를 처리하는 것이 잘못됐다고 생각하는데 어떻게 처리해야 할지 모르겠습니다.

문제 발견

문제는 필터링에 있습니다. (filterA()를 먼저 호출한 다음 filterB()를 호출하여) 이 필터링은 되돌릴 수 없습니다. 필터링 과정이 다음과 같다고 가정해 보겠습니다.

f.filterA("a1"); 
f.filterB("b1"); 
f.filterA("a2");

원래는 "a1"과 "b1"로 데이터를 필터링한 후 첫 번째 조건을 "a2"로 수정하려고 했으나 결과는 다음과 같습니다. 빈 집합이 됩니다.

문제 해결

문제를 발견하면 그에 따라 해결하세요. 이 문제는 되돌릴 수 없는 필터링 과정으로 인해 발생하므로 this.filterData에서 시작하는 대신 매번 this.data에서 직접 필터링을 시작하면 문제를 해결할 수 있습니다. 이렇게 하려면 먼저 선택한 필터 조건을 기록해야 합니다.

필터 조건 기록

필터 조건을 목록에 기록하는 것은 확실히 가능하지만 동일한 조건에 대한 두 개의 필터는 상호 배타적이며 마지막 필터만 유지할 수 있으므로 주의하세요. HashMap을 사용해야 합니다.

class Filter { 
    constructor() { 
        this.filters = {}; 
    } 
 
    set(key, filter) { 
        this.filters[key] = filter; 
    } 
 
    getFilters() { 
        return Object.keys(this.filters).map(key => this.filters[key]); 
    } 
}

이 경우 위의 과정은

f.set("A", m => m.a === "a1"); 
f.set("B", m => m.b === "b1"); 
f.set("A", m => m.a === "a1"); 
let filters = f.getFilters(); // length === 2;

위의 3번째 문장에서 설정한 필터가 1번째 문장에서 설정한 필터를 포함합니다. 이제 마지막으로 얻은 필터를 사용하여 원본 데이터인 this.data를 순서대로 필터링하면 올바른 결과를 얻을 수 있습니다.

어떤 사람들은 getFilters()가 반환한 목록이 집합의 순서가 아니라고 생각할 수도 있습니다. 실제로 이것이 순서가 없는 HashMap의 특징입니다. 그러나 단순한 조건의 판단에서는 누가 먼저 오더라도 결과는 같다. 그러나 일부 복합 조건 판단의 경우 영향을 미칠 수 있습니다.

필요한 경우 맵 대신 배열을 사용하여 순서 문제를 해결할 수 있지만 이는 검색 효율성(선형 검색)을 감소시킵니다. 그래도 검색 효율성 문제를 해결하고 싶다면 배열 + 맵을 사용할 수 있습니다. 여기서는 별로 할 말이 없습니다.

필터링

사실 사용할 때 getFilter()를 사용하고 매번 루프를 사용하여 처리하는 것은 정말 느립니다. 데이터는 Filter로 캡슐화되므로 필터링 인터페이스를 전달하기 위해 filter() 메서드를 직접 제공하는 것을 고려할 수 있습니다.

class Filter { 
    filter() { 
        let data = this.data; 
        for (let f of this.getFilters()) { 
            data = data.filter(f); 
        } 
        return data; 
    } 
}

그러나 이는 특히 대용량 데이터를 처리할 때 그다지 효율적이지 않다고 생각합니다. lodash의 지연된 처리를 활용할 수도 있습니다.

lodash의 지연 처리 사용

filter() { 
    let chain = _(this.data); 
    for (let f of this.getFilters()) { 
        chain = chain.filter(f); 
    } 
    return chain.value(); 
}

lodash는 데이터가 200보다 클 때 지연 처리를 활성화합니다. 즉, 이를 루프로 처리하고 각 필터를 차례로 호출합니다. . 각 필터를 반복하는 대신.

지연 처리와 비지연 처리의 차이는 아래 그림에서 확인할 수 있습니다. 지연되지 않은 처리는 총 n(여기서는 n = 3)개의 큰 루프를 수행하여 n - 1개의 중간 결과를 생성합니다. 지연된 처리는 큰 루프만 수행하며 중간 결과는 생성되지 않습니다.

그런데 솔직히 저는 사소한 일을 위해 추가로 라이브러리를 로딩하는 걸 안 좋아해서 그냥 직접 간단하게 구현해봅니다

지연 처리 구현 나 자신

filter() { 
    const filters = this.getFilters(); 
    return data.filter(m => { 
        for (let f of filters) { 
            // 如果某个 filter 已经把它过滤掉了，也不用再用后面的 filter 来判断了 
            if (!f(m)) { 
                return false; 
            } 
        } 
        return true; 
    }); 
}

Array.prototype.every를 사용하여 내부의 for 루프도 단순화할 수 있습니다.

filter() { 
    const filters = this.getFilters(); 
    return data.filter(m => { 
        return filters.every(f => f(m)); 
    }); 
}

데이터 필터링은 실제로는 복잡한 문제가 아닙니다. 어떤 데이터를 보관해야 하는지, 어떤 데이터가 일시적(중간 과정)인지, 어떤 데이터가 최종 결과인지 이해하고... Array.prototype의 해당 메소드나 lodash 등의 도구를 이용하면 쉽게 처리할 수 있습니다. .