Мы все были там. Мы не можем понять, почему наш код не работает, и пришло время погуглить его. Но примеры, которые мы находим, часто на один шаг меньше нужного нам ответа.

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

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

Обзор того, что мы знаем

Итак, мы знаем, как находить объекты в массиве объектов с определенной парой ключ-значение, но на всякий случай повторим.

Допустим, мы работаем с базой отдыха на их сайте бронирования. Клиент хочет заказать детскую вечеринку и знает, что на ней будет 15 детей.

const recActivities = [
    { name:’Swimming’, ages: [6, 7, 8], maxCap: 10 },
    { name:’Skating’, ages: [8, 9, 10], maxCap: 20 },
    { name:’Open Gym’, ages: [10, 11, 12], maxCap: 30 }
];
const largeGroup = recActivities.filter(activity => (activity.maxCap > 15));

Мы хотим найти все мероприятия, которые могут вместить 15 или более детей.

Используя базовый метод filter(), мы просматриваем каждый объект в массиве и оцениваем, может ли максимальная вместимость каждого действия (пара ключ-значение maxCap) обрабатывать 15 детей. Если значение превышает 15 детей, мы сохраняем активность как результат в нашем новом массиве largeGroup.

Легко, верно? Прохладный. Идем дальше…

Более глубокая проблема

Хорошо, теперь давайте предположим, что нам нужно filter() занятия в центре отдыха, чтобы вместо этого найти что-то подходящее для возраста. Мы хотим фильтровать() объекты в массиве recActivities, чтобы найти только те, которые относятся к определенному возрасту. Но мы не можем искать пары ключ-значение, содержащие массивы, так же, как мы это делали выше.

Итак, как мы это делаем?

Решение

В дело вступает метод includes(). Он узнает, существует ли определенное значение в массиве, и вернет true или false. Таким образом, в сочетании с filter() мы можем использовать магию поиска:

const recActivities = [
    { name:’Swimming’, ages: [6, 7, 8], maxCap: 10 },
    { name:’Skating’, ages: [8, 9, 10], maxCap: 20 },
    { name:’Open Gym’, ages: [10, 11, 12], maxCap: 30 }
];
const ageAppropriate = recActivities.filter(activity => (activity.ages.includes(8)));

Давайте разберем это.

const ageAppropriate =: здесь мы создаем переменную с именем ageAppropriate, где будет жить наш новый массив объектов активности, соответствующих возрасту.

recActivities.filter: таким образом мы filter() существующий массив действий и создаем новый массив только из тех объектов, которые прошли тест (следующее!).

(activity =› (activity.ages.includes(8))); : это функция/тест, который мы запускаем для каждого действия (каждого объекта в массиве recActivities). Для каждого «стареющего» ключа объекта мы запускаем метод includes() для массива значений. Если он содержит искомое значение, в данном случае целое число 8 (для 8 лет), то он сохранит этот объект для нового массива, поскольку он вернул true (это означает, что он передал контрольная работа).

Если мы console.log(ageAppropriate), массив будет содержать только действия, подходящие для детей в возрасте 8 лет.

Вот и все!

Чтобы увидеть полный пример кода, перейдите здесь.

Чтобы узнать больше о методе filter(), ознакомьтесь с документацией MDN здесь.

Чтобы узнать больше о методе includes(), ознакомьтесь с документацией MDN здесь.

Удачи!