Удаление undefined полей из объекта в Javascript: подробное руководство

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

Чтобы удалить неподдерживаемые значения из объекта JavaScript, необходимо использовать сочетание Object.fromEntries(), Object.entries() и метод Array.prototype.filter():

const omitUndefined = obj => Object.fromEntries(Object.entries(obj).filter(([, value]) => value !== undefined));

Пример применения:

let obj1 = { x: 1, y: undefined, z: 2 };
obj1 = omitUndefined(obj1);
console.log(obj1); // Результат: { x: 1, z: 2 }

Таким образом, мы исключаем из объекта все значения undefined.

Внедрение процесса очистки объекта

Для обработки вложенных объектов можно применить рекурсивную функцию, repeщающую неподдерживаемые значения, проводя тем самым глубокую очистку.

const omitDeep = (obj) => {
  Object.keys(obj).forEach(key => {
    if (obj[key] && typeof obj[key] === 'object') {
      omitDeep(obj[key]); // Рекурсивная очистка для вложенных объектов.
    } else if (obj[key] === undefined) {
      delete obj[key]; // Удаляем ключ, если его значение неподдерживаемо.
    }
  });
  return obj; // Возвращаем очищенный объект.
};

Функция тщательно пробегает объект на всех уровнях, удаляя undefined.

Трюк с JSON: Просто скажите "Нет"

Если вам пришло в голову использовать JSON.parse(JSON.stringify(obj)) для очистки, отбросьте эту мысль. Это не лучшее решение: такой подход преобразует объекты Date в строки и вызывает ошибки при наличии циклических ссылок.

Обработка других "ложных" значений

В вашем объекте могут быть другие "ложные" значения, вроде null или '' (пустая строка). Если ваша цель — удалить только undefined, убедитесь, что фильтрация точно на это и настроена.

Ложные и не ложные: Дилемма неподдерживаемости

Использование внешних библиотек, таких как Lodash, может показаться заманчивым, но рекомендуется опираться на родные функции JavaScript, применимые в широком спектре ситуаций. _.pickBy() из Lodash отсеивает все "ложные" значения, в то время как v => v !== undefined поможет отфильтровать исключительно undefined.

Проверка "под капотом": Производительность

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

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

Удаление неподдерживаемых полей из объекта можно представить как приведение в порядок рюкзака:

Содержимое рюкзака: [🍎, 🗺️, undefined, 🧭, undefined]

Процесс избавления от undefined схож с удалением лишних предметов:

Опрятный рюкзак: [🍎, 🗺️, 🧭]

Пошаговое преобразование:

- 🍎, 🗺️, undefined, 🧭, undefined
+ 🍎, 🗺️, 🧭

Теперь рюкзак готов к путешествию, объект — очищен от "неподдерживаемостей".

Альтернативные способы очистки объекта

Использование reduce

Чтобы получить новый объект без полей имеющих значение undefined, используйте reduce() в сочетании с Object.keys():

const excludeUndefined = obj => Object.keys(obj).reduce((acc, key) => {
  if (obj[key] !== undefined) {
    acc[key] = obj[key]; // Добавляем только ключи со значением, отличным от undefined.
  }
  return acc; // Возвращаем результат.
}, {});

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

Изменяемость против неизменяемости

Изменение исходного объекта может вызвать нежелательные побочные эффекты. Зачастую выгоднее создавать новый объект.

Использование современного JavaScript

Стрелочные функции, деструктуризация и другие возможности ES6 способны упростить и улучшить читаемость и концентрацию кода, как в приведённом примере быстрого ответа. Нет необходимости звать Гэндальфа для победы над орками (то есть неподдерживаемыми значениями)!

Роль внешних библиотек

Включение в проект внешних библиотек повышает зависимость. Этого можно избежать, если решение лежит в рамках чистого JavaScript. Делайте осознанный выбор — использование Lodash против простого JavaScript образует дилемму десятилетия!

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

1. delete – JavaScript | MDN — Документация MDN по оператору delete.
2. ECMA-262 – Ecma International — Стандарт JavaScript, незаменимый для изучения языка.
3. JSBEN.CH Performance Benchmarking Playground for JavaScript — Инструмент для сравнения производительности различных фрагментов кода.
4. Методы объекта, "this" — Подробное руководство по методам объектов и использованию this.
5. GitHub – lodash/lodash: Прогрессивная библиотека JavaScript, обеспечивающая модульность, производительность и дополнительные удобства — Библиотека lodash, универсальный инструмент для JavaScript.
6. GitHub – you-dont-need/You-Dont-Need-Lodash-Underscore: Список методов JavaScript, которые можно использовать вместо методов lodash/underscore — Демонстрирует нативные альтернативы методам lodash, повышая оптимизацию вашего кода.