41 подписчик

Превращаем массив в объект. Фронтенд задачи.

12 апреля 201912 апр 2019

1 мин

Конвертация массива с объектами в простой объект достаточно тривиальная задача. Она довольно часто встречается как в работе, так и на собеседованиях. Если вы готовитесь к собеседованию, настоятельно рекомендую: прочитайте статью, откройте JS Fiddle, затем по памяти повторите все варианты решения. Это поможет вам усвоить материал на 20% лучше.

Итак, давайте разберем основные способы решения этой задачи, от простого к чуть менее сложному: Spread (EcmaScript 6) Что происходит: берем массив с объектами «arr», извлекаем содержимое массива через spread «...» в пустой объект «{}», результат возвращаем в переменную. Object.Assign (EcmaScript 6) Что происходит: с помощью Object Assign берем пустой объект из первого аргумента «{}» и копируем в него содержимое второго аргумента «arr». Важно: копирование происходит через внутренний Get/Set, в дальнейшем это может сделать непригодным установку новых свойств в прототип. Reduce (EcmaScript 6) Что происходит: Через Reduce перебираем содержимое масси

Оглавление

Spread (EcmaScript 6)
Object.Assign (EcmaScript 6)
Reduce (EcmaScript 6)

Конвертация массива с объектами в простой объект достаточно тривиальная задача. Она довольно часто встречается как в работе, так и на собеседованиях.

Если вы готовитесь к собеседованию, настоятельно рекомендую: прочитайте статью, откройте JS Fiddle, затем по памяти повторите все варианты решения. Это поможет вам усвоить материал на 20% лучше.

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

Spread (EcmaScript 6)

Что происходит: берем массив с объектами «arr», извлекаем содержимое массива через spread «...» в пустой объект «{}», результат возвращаем в переменную.

Object.Assign (EcmaScript 6)

Что происходит: с помощью Object Assign берем пустой объект из первого аргумента «{}» и копируем в него содержимое второго аргумента «arr». Важно: копирование происходит через внутренний Get/Set, в дальнейшем это может сделать непригодным установку новых свойств в прототип.

Reduce (EcmaScript 6)

Пример кода: https://jsfiddle.net/DevExp/xvztandj/

Что происходит: Через Reduce перебираем содержимое массива, в «acc» аккумулируем результат действия предыдущей итерации, в «cur» и «i» значение и номер текущей итерации.

На каждом круге в пустой массив («{}», расположенный в конце Reduce) по индексу «i» добавляется элемента массива «cur», затем получившейся объект возвращаем в переменную «obj».

forEach

Пример кода: https://jsfiddle.net/DevExp/aswyc082/

Что происходит: Создаем пустой объект «result», за тем через «forEach» перебираем содержимое «arr», после чего каждый элемент массива «element», добавляем по индексу «index» в массив «result». Пожалуй, это самый железобетонный способ.

Итог

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

Для кого это?

Данный материал предназначен для новичков и разработчиков, которые решили обновить свои знания о возможностях языка.

Ошибки?

Если вы обнаружили ошибку в тексте статьи или вам есть что добавить, пожалуйста напишите об этом в комментариях. Спасибо!