Фильтрация свойств объекта по ключам в ES6: примеры использования

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

Для создания нового объекта, содержащего только определённые свойства, можно использовать методы Object.fromEntries() и Object.entries(), применяя их совместно с filter():

const obj = { a: 1, b: 2, c: 3 };
const keysToKeep = ['a', 'c'];

const filteredObj = Object.fromEntries(
  Object.entries(obj).filter(([key]) => keysToKeep.includes(key))
);

console.log(filteredObj); // { a: 1, c: 3 } — свойство 'b' исключено

В данном коде результирующий объект не содержит свойства 'b', а ключи a и c остались.

Совершенствуйте свой код современным JavaScript

Для более профессионального кода используйте метод reduce(), сочетая его со стрелочными функциями и синтаксисом расширения. Вот усовершенствованная реализация:

const filterObjectKeys = (obj, keys) =>
  keys.reduce((acc, key) => (key in obj ? { ...acc, [key]: obj[key] } : acc), {});

// Мы избегаем добавления в acc несуществующего ключа

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

Избегайте мутаций: более безопасный подход

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

const filteredCopy = { ...filteredObj }; // Исходный объект остаётся неизменным

Этот метод гарантирует отсутствие ссылок на свойства оригинального объекта, повышая безопасность вашего кода.

Погружение в динамичную фильтрацию

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

const dynamicFilter = (obj, predicate) =>
  Object.fromEntries(
    Object.entries(obj).filter(([key, value]) => predicate(key, value))
  );

const criteria = (key, value) => key.startsWith('a') && value > 0;
const allowed = dynamicFilter(obj, criteria); // Так начинается эффективная фильтрация!

В этом примере фильтрация происходит на основании как ключей, так и значений свойств.

Избегание потенциальных ловушек и освоение сложных сценариев

Не забывайте, что Object.fromEntries() может быть не поддержан в некоторых средах. Если в вашем случае не поддерживается ES6, полезными станут полифилы или альтернативные подходы. Также для сложных объектов поверхностное копирование может быть недостаточно.

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

Можно представить объект как дом с комнатами, где каждая комната — это уникальный ключ:

🏠: { Кухня: 🍳, Гостиная: 🛋, Ванная: 🛁, Чердак: 📦 }

Вы хотите отфильтровать некоторые комнаты и оставить только нужные:

const cleanRooms = ['Кухня', 'Ванная']; // Уборка будет проведена только в этих комнатах

С применением ES6 вы легко выделиме интересующие вас комнаты:

const tidyHouse = Object.keys(house)
                        .filter(key => cleanRooms.includes(key))
                        .reduce((obj, key) => {
                            obj[key] = house[key];
                            return obj;
                         }, {});

// Уборщикам можно показывать результат работы!

И, вуаля, перед вами только чистые комнаты:

🏠 После: { Кухня: 🍳, Ванная: 🛁 } // Всё отчищено!

Упрощаем задачу с помощью вспомогательных библиотек

Для упрощения и повышения читаемости кода можно воспользоваться такой библиотекой, как Lodash. Это поможет сократить объём вашего кода:

const _ = require('lodash');
const picked = _.pick(obj, keysToKeep); // Lodash возьмёт на себя всю трудоёмкую часть работы

Удовлетворение разнообразных требований с помощью специализированных решений

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

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

1. Object.entries() – JavaScript | MDN — подробная информация о методе Object.entries().
2. Array.prototype.reduce() – JavaScript | MDN — всё, что вам нужно знать о методе Array.reduce().
3. Array.prototype.filter() – JavaScript | MDN — мастер-класс по использованию Array.filter().
4. Spread syntax (...) – JavaScript | MDN — возможности операторов расширения в JavaScript.
5. Destructuring assignment – JavaScript | MDN — доступное объяснение деструктуризации.
6. ECMAScript 2015 Language Specification – ECMA-262 6th Edition — все ключевые особенности ES6.
7. Array.prototype.map() – JavaScript | MDN — всё об использовании метода Array.map().