대용량 데이터의 다중 필터링을 위한 JS 방식

머리말

프런트엔드가 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;

위의 세 번째 문장에 설정된 필터가 첫 번째 문장에 설정된 필터보다 우선 적용됩니다. 이제 마지막으로 얻은 필터를 사용하여 원본 데이터인 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;
 });
}

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

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

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