복잡한 Javascript 배열을 필터링하는 방법

TL;DR I've revived an open-source npm package that I initially built a couple of years ago but have given some TLC in the last few days. You can find it here: https://github.com/allmanaj/or-where.



몇 년 전 동료와 저는 문제에 직면했습니다. 우리는 개체에서 문자열에 이르기까지 여러 유형의 데이터에 대한 동적 지능형 필터가 포함된 대시보드를 만들어야 했습니다. 일반적으로 이는 Javascriptfilter() 기능을 사용하여 수행하는 비교적 간단한 작업이었지만 이 경우 데이터가 매우 다양할 수 있기 때문에 사용자가 무엇을 시도하고 필터링할지 알 수 있는 실제 방법이 없었습니다. 이 문제를 해결하기 위해 Laravel의 Eloquent 쿼리와 같은 로직을 구성할 수 있는 작은 단일 JS 파일을 만들었습니다. 그것은 우리가 필터링 기능 내에서 길고 구불구불한 조건을 영어처럼 보이도록 바꿀 수 있다는 것을 의미했습니다. 궁극적으로 우리는 그것으로 작업하는 것을 좋아했고 작은 npm 패키지로 출시했습니다.

예제를 살펴보고 전체 데이터 로드를 가지고 있지만 데이터를 쉽게 필터링할 방법이 없는 개발자의 삶을 더 단순하게 만드는 방법을 살펴보겠습니다.

// without or-where
users.filter(user => {
    return (user.name == 'Angus' || user.name == 'Jess' || user.name == 'Aaron') && user.age >= 25;
});

//with or-where
filter = new Builder(users);
filter.whereIn('name', ['Angus', 'Jess', 'Aaron'])
      .where('age', '>=', 25)
      .get()


이 상대적으로 기본적인 예에서도 이점을 쉽게 확인할 수 있습니다. 논리 게이트를 읽고 괄호에 주의를 기울일 필요 없이 검색어를 영어처럼 읽을 수 있습니다.

내장된 메서드( where() , orWhere() ,... 등)를 사용하여 filter() 를 호출할 때 결국 Javascript의 get() 메서드로 전달되는 쿼리를 작성합니다. 그게 전부입니다! 코드를 읽기 쉽고 효율적으로 유지하면서 몇 가지 간단한 빌딩 블록으로 매우 유연한 쿼리를 만들 수 있습니다. 무엇을 사랑하지거야?

github: https://github.com/allmanaj/or-where에서 전체 문서를 찾을 수 있습니다. 패키지에 없는 기능이 있는 경우 자유롭게 기여하거나 이슈를 엽니다!

패키지가 유용하다고 생각하는 사람과 살펴보고 공유해 주시면 정말 감사하겠습니다 😉

좋은 웹페이지 즐겨찾기