Фильтрация массива объектов в JavaScript: цена, кв. м, комнаты

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Для фильтрации массива объектов по определенным атрибутам можно использовать метод Array.prototype.filter. Допустим, у нас есть массив объектов, каждый из которых обладает атрибутом isActive: true. Задача – выбрать только активные элементы:

Скопировать код

const users = [
    { name: 'Алиса', isActive: true },
    { name: 'Боб', isActive: false }
];

const activeUsers = users.filter(user => user.isActive);
// Результат: [{ name: 'Алиса', isActive: true }]

С помощью метода .filter() выполняется проверка атрибута isActive на соответствие логическому значению true.

Кинга Идем в IT: пошаговый план для смены профессии

Фильтрация по нескольким атрибутам

Комбинация нескольких условий для более точного результата

Для фильтрации по нескольким критериям можно использовать логические операторы:

Скопировать код

const products = [
    { name: 'Ноутбук', category: 'Электроника', quantity: 4 },
    { name: 'Сыр', category: 'Продукты', quantity: 0 }
    // можно добавить другие продукты
];

const availableElectronics = products.filter(product =>
    product.category === 'Электроника' && product.quantity > 0);
// Будут возвращены товары из категории "Электроника" с количеством больше нуля

Подробнее об этом расскажет наш спикер на видео

Учет типов данных

При сравнении строк и чисел, важно учитывать их типы:

Скопировать код

const items = [
    { name: 'Стол', price: '150' },
    { name: 'Стул', price: '100' }
    // Стулья имеют значение только для буржуев!
];

const expensiveItems = items.filter(item => Number(item.price) >= 120);
// Найдены товары с ценой выше 120

Поддержка устаревших браузеров

Для обеспечения работы кода в браузере Internet Explorer, напишите полифилл для Array.prototype.filter:

Скопировать код

if (!Array.prototype.filter) {
  Array.prototype.filter = function(func, thisArg) {
    // здесь будет код полифилла для метода filter
  };
}

Фильтрация объектов с помощью jLinq

Для сложных запросов можно комбинировать фильтры при помощи библиотеки jLinq. Пример:

Скопировать код

const users = [
    // здесь может быть массив объектов пользователей
];

// Находим пользователей с именем на 'А' и возрастом меньше 30.
const result = jlinq.from(users)
                     .startsWith('name', 'А')
                     .less('age', 30)
                     .select();
// Идеально подходит для поиска людей молодого возраста с именами на 'А'

Визуализация

Представьте, что перед вами река, в которой плавает множество различных рыб (🐟🐠🐡), вам же нужны только золотые (🐠).

Река с рыбами: [🐟, 🐠, 🐡, 🐟, 🐠, 🐟, 🐡]

Мы используем сеть с фильтром, который пропускает только золотых рыбок (🐠):

Скопировать код

const allFish = [{type: '🐟'}, {type: '🐠'}, {type: '🐡'}, ...];
const goldenFish = allFish.filter(fish => fish.type === '🐠');

Таким образом, наш улов состоит только из золотых рыбок (🐠):

Улов: [🐠, 🐠]

Важная мысль: Метод .filter() работает так же, как и сеть, отсеивая объекты по заданным атрибутам.

Дополнительные возможности использования фильтра

Неизменяемость для надежности

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

Скопировать код

const filteredArray = Object.freeze(sourceArray.filter(...));
// Массив остается неизменным как гранит

Читаемость – превыше всего

Правильное форматирование кода улучшает восприятие сложных условий:

Скопировать код

const filteredUsers = users.filter(user => 
    (user.age >= 20 && user.age <= 30) &&
    user.hobbies.includes('Чтение')
);
// Идеальным выбором окажутся любители чтения в вековом промежутке от 20 до 30 лет

Возвращение к проверенным временем методам

Функция .map() из jQuery может служить хорошей альтернативой:

Скопировать код

const selectedItems = $.map(items, function(item) {
    if (item.isActive && item.quantity > 0) {
        return item;
    }
});
// Аналог выбора пиццы с наиболее вкусными топпингами

Использование JSFiddle для наглядности

Пример работы кода в реальных условиях доступен по ссылке jsFiddle.

Markdown

Скопировать код

Живой пример: [Демонстрация фильтрации объектов](https://jsfiddle.net/)

Проверь как ты усвоил материалы статьи

Пройди тест и узнай насколько ты лучше других читателей

Какой метод используется для фильтрации массива объектов в JavaScript?

1 / 5

Свежие материалы

Каналы на русском языке

6 сентября 2024

Видео уроки по мобильной разработке

6 сентября 2024

Видео уроки по JavaScript

6 сентября 2024