13.03.2024 в 19:31

Фильтрация массивов со сложным поиском стала проще

TLDR: с помощью @mcabreradev/filter вы будете фильтровать массивы со сверхспособностями 😎.

Давайте для начала построим проект фильтра. Этот проект предоставляет комплексную реализацию функциви filter TypeScript. Функция filter — это универсальный инструмент, который можно использовать для выбора подмножества элементов из массива на основе предоставленной функции или выражения предиката.

Функция filter в этом проекте предназначена для обработки самых разных случаев использования. Он может фильтровать массивы примитивных значений, объектов и даже вложенных объектов. Функция также поддерживает сложные выражения filtering, включая подстановочные знаки и регулярные выражения.

Если вам нужно отфильтровать массив сложным способом или вы просто хотите понять, как можно реализовать надежную функцию filter, этот проект станет ценным ресурсом.

Установка

Вы можете установить этот пакет, используя различные менеджеры пакетов. Вот команды для каждого из них:

npm

npm install @mcabreradev/filter

Применение

После установки вы можете импортировать функцию фильтра из пакета следующим образом:

import filter from '@mcabreradev/filter';

Если вы работаете в среде Node.js, процесс установки такой же, как упоминалось ранее. Однако вы можете использовать синтаксис CommonJS для импорта функции фильтра:

const filter = require('@mcabreradev/filter');

Функции

Функция filter в предоставленном коде TypeScript — это универсальная функция, позволяющая выбирать подмножество элементов из массива на основе множества условий. Вот некоторые из его ключевых особенностей:

Фильтрация массива:

Основная цель функции filter — фильтрация массива. Он принимает массив и функцию-предикат в качестве аргументов и возвращает новый массив, включающий только те элементы, для которых функция-предикат возвращает true.

import filter from '@mcabreradev/filter';

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = filter(numbers, (n) => n % 2 === 0);

console.log(evenNumbers); // Output: [2, 4]

Поиск без учета регистра:

Функция filter поддерживает поиск без учета регистра. Когда вы указываете строку в качестве предиката, она будет соответствовать любому свойству объектов в массиве, содержащем эту строку, независимо от регистра.

import filter from '@mcabreradev/filter';

const words = ['Apple', 'Banana', 'Cherry'];
const result = filter(words, 'a');

console.log(result); // Output: ['Apple', 'Banana']

Соответствие подстановочным знакам:

Функция filter поддерживает сопоставление подстановочных знаков с символами % и _. Символ % соответствует любой последовательности символов, а символ _ соответствует любому отдельному символу. Эти подстановочные знаки также работают без учета регистра.

import filter from '@mcabreradev/filter';

const words = ['Apple', 'Banana', 'Cherry'];
const result = filter(words, 'A%e');

console.log(result); // Output: ['Apple']

Несколько условий:

Функция filter позволяет фильтровать массив на основе нескольких условий. Вы можете указать эти условия в виде объекта, где каждая пара ключ-значение представляет собой условие, которому должны соответствовать элементы массива, чтобы быть включенными в результат.

import filter from '@mcabreradev/filter';

const users = [
  { name: 'Alice', age: 20 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 30 },
];
const result = filter(users, { name: 'A%', age: 20 });

console.log(result); // Output: [{ name: 'Alice', age: 20 }]

Пользовательские функции предиката:

Функция filter позволяет вам предоставить пользовательскую функцию предиката, чтобы определить, какие элементы должны быть включены в результат. Это дает вам максимальную гибкость при определении собственных условий фильтрации массива.

import filter from '@mcabreradev/filter';

const numbers = [1, 2, 3, 4, 5];
const result = filter(numbers, (n) => n > 3);

console.log(result); // Output: [4, 5]

Глубокое сравнение:

Функция filter поддерживает глубокое сравнение объектов. Это означает, что он может сравнивать свойства вложенных объектов, а не только свойства верхнего уровня.

import filter from '@mcabreradev/filter';

const users = [
  { name: 'Alice', age: 20, address: { city: 'New York' } },
  { name: 'Bob', age: 25, address: { city: 'Los Angeles' } },
  { name: 'Charlie', age: 30, address: { city: 'Chicago' } },
];
const result = filter(users, { address: { city: 'New York' } });

console.log(result); // Output: [{ name: 'Alice', age: 20, address: { city: 'New York' } }]

Отрицание:

Функция filter поддерживает отрицание. Если предикат представляет собой строку, начинающуюся с !, функция включит элемент в результат только в том случае, если он не соответствует остальной части строки.

import filter from '@mcabreradev/filter';

const words = ['Apple', 'Banana', 'Cherry'];
const result = filter(words, '!Apple');

console.log(result); // Output: ['Banana', 'Cherry']

Вложенные объекты:

Функция filter может фильтровать массивы с вложенным объектом, имеющим 2 уровня узлов:

import filter from '@mcabreradev/filter';

const users = [
  { name: 'Alice', age: 20, address: { city: 'New York', country: 'USA' } },
  { name: 'Bob', age: 25, address: { city: 'Los Angeles', country: 'USA' } },
  { name: 'Charlie', age: 30, address: { city: 'London', country: 'UK' } },
];
const result = filter(users, { address: { country: 'USA' } });

console.log(result);

// Output:
//[
// { name: 'Alice', age: 20, address: { city: 'New York', country: 'USA' } },
// { name: 'Bob', age: 25, address: { city: 'Los Angeles', country: 'USA' } }
//]

А вот пример функции filter с вложенным объектом, имеющим 3 уровня узлов:

import filter from '@mcabreradev/filter';

const users = [
  {
    name: 'Alice',
    age: 20,
    address: {
      city: 'New York',
      country: 'USA',
      coordinates: { lat: 40.7128, long: 74.006 },
    },
  },
  {
    name: 'Bob',
    age: 25,
    address: {
      city: 'Los Angeles',
      country: 'USA',
      coordinates: { lat: 34.0522, long: 118.2437 },
    },
  },
  {
    name: 'Charlie',
    age: 30,
    address: {
      city: 'London',
      country: 'UK',
      coordinates: { lat: 51.5074, long: 0.1278 },
    },
  },
];

const result = filter(users, { address: { coordinates: { lat: 40.7128 } } });

console.log(result);

// Output:
// [{
//   name: 'Alice',
//   age: 20,
//   address: {
//       city: 'New York',
//       country: 'USA',
//       coordinates: {
//           lat: 40.7128,
//           long: 74.0060
//       }
//   }
// }]

Расширенные примеры использования

Функцию filter можно использовать в самых разных сценариях. Вот несколько примеров того, как его можно использовать:

Фильтрует клиентов по определенному городу

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, 'Berlin');

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

Фильтрует клиентов по определенному городу с помощью подстановочного знака %

Подстановочный знак % представляет любое количество символов, даже ноль.

Вернуть всех клиентов, содержащих шаблон "еrlin":

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, '%erlin');

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

Вернуть всех клиентов, содержащих шаблон "Ber":

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, 'Ber%');

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

Вернуть всех клиентов, содержащих шаблон "erli":

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, '%erli%');

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

Фильтрует клиентов по определенному городу с помощью подстановочного знака _

Подстановочный знак _ представляет один символ. Это может быть любой символ или число, но каждый _ представляет один и только один символ.

Вернуть всех клиентов, у которых город начинается с любого символа, за которым следует "erli":

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, '_erlin');

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

Вернуть всех клиентов с городом, который содержит "erli":

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, '_erli_');

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

Вернуть всех клиентов, у которых город начинается с "L", за которым следуют любые 2 символа и заканчиваются на "lin":

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, 'B__lin');

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

Фильтрует клиентов по объектам

Вернуть всех клиентов с городом под названием "Berlin":

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, { city: 'Berlin' });

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

Фильтрует клиентов на основе значения ключа объекта с подстановочными знаками %

Вернуть всех клиентов с городом, который содержит "erlin" в конце строки:

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, { city: '%erlin' });

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

Вернуть всех клиентов с городом, в котором в начале строки содержится "erli":

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, { city: 'Berl%' });

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

Вернуть всех клиентов с городом, который содержит "erlin" в конце строки:

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, { city: '_erlin' });

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

Вернуть всех клиентов с городом, в строке которого содержится "erl":

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, { city: '_erl__' });

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

Вернуть всех клиентов с городом, который содержит символы "e,li" в строке:

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, { city: '_e_li_' });

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

Фильтрует клиентов на основе функции предиката

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, ({ city }) => city === 'Berlin');

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

Фильтрует клиентов по двум городам

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, ({ city }) => city === 'Berlin' || city === 'London');

// Output:
// [
//  { name: 'Alfreds Futterkiste', city: 'Berlin' },
//  { name: 'Around the Horn', city: 'London' },
//  { name: 'Bs Beverages', city: 'London' }
// ]

Фильтрует клиентов по двум городам, если они существуют

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, ({ city }) => city === 'Berlin' && city === 'Caracas');

// Output:
// []

Ищете больше?

Вы можете посмотреть мой репозиторий на GitHub.

Спасибо!

Источник:

#NPM #TypeScript

Войти на сайт