Маппинг объектов в ES6: из 'id' и 'name' в 'value' и 'text'

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

Если вам необходимо переименовать ключи в объектах массива, воспользуйтесь функцией map из спецификации ES6:

const transformedArray = originalArray.map(({ oldKey1: newKey1, oldKey2: newKey2 }) => ({ newKey1, newKey2 }));

Здесь посредством деструктуризации мы извлекаем свойства (oldKey1, oldKey2) из исходного объекта и присваиваем им новые имена newKey1 и newKey2. Этот подход особенно удобен при работе с компонентами пользовательского интерфейса, в том числе в React.

Осуществление переименования ключей

Если перед вами стоит задача изменить имена ключей объектов в массиве, вы уже находитесь на правильном пути. Давайте подробнее рассмотрим этот процесс.

Используйте возможности ES6

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

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

Пример применения в React

Благодаря подобным преобразованиям работа в React значительно упрощается. Хотите заполнить выпадающий список данными? С переименованными ключами это сделать легко и просто:

<select>
  {transformedArray.map(option => (
    <option value={option.newKey1}>{option.newKey2}</option> 
  ))}
</select>

Примечание: Элемент select сам по себе не выполняет функцию выбора.

Ясность важнее лаконичности

Конечно, краткость – это хорошо, но основным при работе с кодом остаётся его понятность. С течением времени вы обязательно научитесь писать код компактно и ясно, при этом не жертвуя понятностью кода ради его лаконичности.

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

Так выглядит ваш массив после преобразования.

Прощай, неинформативные ключи:

До: [{a, b, c}, {a, b, c}, {a, b, c}]

Благодаря map в ES6 ключи становятся информативными:

array.map(obj => ({ newKey1: obj.a, newKey2: obj.b }));

Вас приветствует успешно преобразованный массив:

После: [{newKey1, newKey2}, {newKey1, newKey2}, {newKey1, newKey2}]

Браво, ES6! 👏

Как справиться с неожиданностями

Подумаем о возможных проблемах и посоветуемся о приемах работы с переименованием ключей.

Будьте готовы к неожиданностям

• Проверка на null: Удостоверьтесь в отсутствии значения undefined или null перед применением деструктурирования.
• Динамические ключи: Если есть необходимость создавать ключи динамически, используйте синтаксис [computedPropertyName].
• Производительность: Использование map отлично подходит для обработки больших объемов данных, однако для tasks, связанных с производительностью, рассмотрите использование дополнительных методов.

Путь к совершенству

• Глубокое клонирование: Используйте map и spread оператор ... для создания полного клонирования объектов.
• Условное маппинг: Вы можете внедрять условия в функцию map, что позволит существенно улучшить качество трансформации данных.
• Цепочка методов: Применяя map совместно с другими методами массива (например, filter), вы получите мощный инструмент для обработки данных.

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

1. Array.prototype.map() – JavaScript | MDN — подробное описание, как использовать функцию map.
2. Когда не стоит использовать стрелочные функции в JavaScript — полезная статья перед использованием стрелочных функций.
3. 19. Карты и множества — даёт практическое умение работы с Map и Set.
4. Остаточные параметры и оператор распространения — дополнительные материалы по остаточным параметрам и оператору распространения.
5. Простое введение в деструктуризацию объектов на JavaScript – Wes Bos — ясное и доступное руководство по деструктуризации объектов.
6. Map, Filter и Reduce – Учебник по JavaScript – YouTube — видеоуроки, которые помогут вам освоить такие методы как Map, Filter и Reduce.
7. JavaScript ES6+: var, let или const? | by Eric Elliott | JavaScript Scene | Medium — статья о выборе между var, let и const. Рекомендуется к прочтению перед началом работы над трансформацией данных.