Выделение подмножества свойств объекта в JavaScript

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

Чтобы извлечь подмножество свойств объекта, используйте деструктурирующее присваивание в сочетании с оператором rest:

const { a, c, ...остальные } = { a: 1, b: 2, c: 3, d: 4 };
const подмножество = { a, c }; // теперь подмножество содержит { a: 1, c: 3 }

Если требуется более гибкое решение, воспользуйтесь функцией, основанной на методе reduce:

const выборка = (obj, keys) => keys.reduce((acc, key) => (key in obj && (acc[key] = obj[key]), acc), {});

Расширенные решения для routine задач

Деструктуризация и немедленное выполнение функции

Используйте немедленно исполняемые функциональные выражения для создания подмножества:

const подмножество = (({ a, c }) => ({ a, c }))({ a: 1, b: 2, c: 3, d: 4 });

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

Вспомогательные библиотеки — Lodash как всестороннее решение

Не нужно изобретать велосипед, Lodash уже предлагает необходимые средства:

const _ = require('lodash');
const подмножество = _.pick(obj, ['a', 'c']);

Оператор распространения и Object.entries для элегантного решения

Сочетайте оператор распространения и Object.entries для изящного выбора свойств:

const obj = { a: 1, b: 2, c: 3, d: 4 };
const ключи = new Set(['a', 'c']);

const подмножество = Object.fromEntries(
  Object.entries(obj).filter(([key]) => ключи.has(key))
);

Трансформируем, вперёд!

Если требуется трансформация свойств, воспользуйтесь следующими приёмами.

Маппинг пар ключ-значение для профессионалов

Используйте Object.entries и map для удобной трансформации:

const исходный = { a: 1, b: 2, c: 3 };
const трансформация = ([key, value]) => [key, value * 2];

const подмножество = Object.fromEntries(
  Object.entries(исходный).filter(([key]) => ['a', 'c'].includes(key)).map(трансформация)
);

Без зависимости от библиотек

Освободитесь от зависимости от библиотек, используйте чистый JavaScript для решения задач:

const подмножество = Object.keys(obj).reduce((acc, key) => {
  if (ключи.has(key)) acc[key] = obj[key];
  return acc;
}, {});

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

Представьте, что вам нужно выбрать пару предметов из множества представленной мебели:

function getSubset(object, keys) {
    return keys.reduce((obj, key) => {
        if (key in object) obj[key] = object[key];
        return obj;
    }, {});
}

Выделите желаемые элементы🔦: [📚 Большую книжную полку, 🖼️ Красивую картину]. Их выбрали!

Оригинально и хитро — сложные случаи

Столкнулись с необычными ключами или вложенными объектами? Мы знаем, как помочь.

Особое внимание к ключам нестандартного типа

Если ключи ваших свойств содержат символы или нестандартные объекты, приступайте с осторожностью:

const особенныйСимвол = Symbol('special');
const obj = { a: 1, [особенныйСимвол]: 2 };

const подмножество = выборка(obj, ['a', особенныйСимвол]);

Погружаемся в вложенные структуры

Для работы с вложенными объектами примените рекурсию:

function выборкаГлубоко(obj, keys) {
  return keys.reduce((acc, key) => {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      acc[key] = выборкаГлубоко(obj[key], Object.keys(obj[key]));
    } else if (key in obj) {
      acc[key] = obj[key];
    }
    return acc;
  }, {});
}

Дружественный TypeScript

При работе с TypeScript следите за тем, чтобы ваш код был типобезопасен и по-настоящему изящен:

function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
  return keys.reduce((accumulator, key) => {
    if (key in obj) {
      accumulator[key] = obj[key];
    }
    return accumulator;
  }, {} as Pick<T, K>);
}

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

1. Присваивание с деструктуризацией – JavaScript | MDN — подробное руководство по использованию деструктуризации.
2. Object.entries() – JavaScript | MDN — обзор применения итерации по записям объекта.
3. Object.keys() – JavaScript | MDN — как получить ключи объекта для создания подмножества.
4. Object.fromEntries() – JavaScript | MDN — создание объектов из пар ключ-значение соответствующим методом.
5. Использование деструктуризации в ES6 — статья о применении деструктуризации в ES6 с примерами.
6. Обзор возможностей синтаксиса деструктуризации в ES6 — обзор функционала деструктуризации в ES6.
7. Документация Lodash — метод _.pick() для извлечения свойств объектов.