Создание метода filter() для объектов в JavaScript: решение

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

const filteredObj = Object.fromEntries(
  Object.entries(yourObject).filter(([key, value]) => value.condition)
);

Этот пример иллюстрирует, как с применением методов Object.fromEntries() и Object.entries() объект yourObject можно отфильтровать по условию value.condition, в итоге получив filteredObj — объект, включающий только те пары ключ-значение, которые удовлетворяют критерию фильтрации.

Техники: современный JavaScript для обработки данных объектов

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

Преобразование объектов с помощью ES6

Метод Object.entries() конвертирует объект в массив пар ключ-значение, предоставляя возможность использовать различные методы массивов. Object.fromEntries(), по сути, выполняет обратное преобразование — формирует объект из массива. Эти методы идеально подходят для манипуляций с объектами, в особенности когда нужно производить фильтрацию по значениям.

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

Сила независимости

Создавайте отдельные функции для фильтрации объектов, чтобы ваш код был устойчив к изменениям. Изменение Object.prototype может спровоцировать неожиданные баги, особенно при использовании сторонних библиотек, например jQuery.

filterObject — это пример функции, которая успешно избегает изменений прототипа и работает исключительно эффективно:

function filterObject(obj, predicate) {
  return Object.fromEntries(Object.entries(obj).filter(([key, value]) => predicate(value, key)));
}

Элегантное решение в одну строку

Современный синтаксис ES6 позволяет применять распространение для создания нового объекта с отфильтрованными данными с помощью метода Array.map(). При написании кода главное не добиваться абсолютной минималистичности – важнее, чтобы код был лаконичным и понятным:

const filterObject = (obj, predicate) =>
  Object.assign(
    {},
    ...Object.keys(obj)
      .filter(key => predicate(obj[key], key))
      .map(key => ({ [key]: obj[key] }))
  );

Время воспользоваться утилитами!

Когда код на JavaScript начинает казаться излишне громоздким, на помощь приходят библиотеки lodash или underscore с их методами _.pickBy и _.omit, облегчающими процесс фильтрации:

const _ = require('lodash');
const numbersOnly = _.pickBy(yourObject, _.isNumber);

Lodash всегда радует своим удобством и вдумчивыми абстракциями.

ES5 для обеспечения ретро-совместимости

Если вам необходимо выполнять поддержку старых версий JavaScript, используйте для фильтрации объектов Object.keys() и методы массивов в ES5:

function filterObjectES5(obj, predicate) {
  var filteredKeys = Object.keys(obj).filter(function(key) {
    return predicate(obj[key], key);
  });
  
  return filteredKeys.reduce(function(acc, key) {
    acc[key] = obj[key];
    return acc;
  }, {});
}

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

Для прояснения принципа работы механизма фильтрации объекта попробуйте представить его как поиск ценностей в сундуке:

Сундук с сокровищами (🧳): [💎, 📜, 🗡, 💰, 🧪]

Пусть в сундуке останутся только ценные предметы, например, золотые монеты 💰 и алмазы 💎:

const valuableFilter = item => [💎, 💰].includes(item);

Фильтруем содержимое сундука:

Отфильтрованный сундук (🧳✨): [💎, 💰]

В другой раз уже другие предметы могут показаться ценными.

Надёжная фильтрация для максимальной эффективности

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

Гибкость в выборе инструментария разработчика

Интеграция логики фильтрации в вашу рабочую среду требует принятия во внимание особенностей рабочей среды, будь это Node.js, браузер, или какой-либо другой инструмент. Следите за тем, чтобы подходы, которые вы используете, были адаптивными.

Отказ от модификации прототипов

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

Обработка больших объёмов данных с высокой производительностью

Обработка больших данных требует особых подходов. Упрощайте итерации и обработку данных для увеличения скорости выполнения и повышения производительности.

Полезные материалы

1. Array.prototype.filter() – JavaScript | MDN — Подробный обзор метода filter() для массивов в документации MDN Web Docs.
2. Методы массивов — Обстоятельное руководство по методам массивов, включая метод filter().
3. JavaScript: метод filter() для объектов – Stack Overflow — Обсуждение практических решений и советов на Stack Overflow.
4. Функции высшего порядка (Composition of the Software) | автор Eric Elliott | JavaScript Scene | Medium — Статья о функциях высшего порядка и их важности в JavaScript.
5. Итерируемые объекты и итераторы в ECMAScript 6 — Изучение протоколов итераций для эффективного использования метода filter() в современном JavaScript.
6. Освоение и понимание функции filter() в JavaScript | автор Brandon Morelli | codeburst — Подробный разбор работы функции filter() и её использования в JavaScript.