Стрелочные функции и деструктуризация - две мощные особенности JavaScript. Когда они используются в комбинации, они представляют собой классный паттерн, который я люблю называть преобразованием объекта. Дело в том, чтобы написать простую функцию для изменения структуры данного объекта с сохранением (некоторых) значений атрибутов.
Простые трансформаторы
Во-первых, давайте напишем тривиальную функцию-преобразователь, которая выглядит очень симметрично, например:
На первый взгляд может показаться, что эта функция ничего не делает. Давайте запустим его на объект:
Он возвращает тот же объект, что и получил. Давайте теперь добавим в него более сложный объект:
Теперь мы видим, что эта функция-преобразователь возвращает новый объект только с атрибутом fruit.
Итак, как это работает? Эта extract - лямбда-функция, которая принимает объект со свойством fruit (левая часть выражения). Он возвращает объект с тем же свойством fruit (правая часть выражения) и тем же значением, игнорируя все другие свойства. Символ => отделяет аргументы от тела лямбда-функции.
Объект справа от стрелки следует поместить в круглые скобки, потому что в противном случае интерпретатор JavaScript анализирует фигурные скобки как тело функции, а не как объект:
Тело функции wrongExtract содержит только одно выражение - переменную fruit. Это допустимое выражение JavaScript, но оно не возвращает никакого значения из функции, поэтому функция возвращает undefined.
Теперь давайте воспользуемся деструктуризацией, чтобы извлечь некоторые глубоко вложенные данные. Мы хотим получить фрукт из коробки, которая находится внутри контейнера:
Мы только что написали функцию для извлечения глубоко вложенной структуры из объекта с помощью деструктуризации.
Сложные случаи
Но деструктуризация полезна не только для извлечения данных. Давайте воспользуемся им для обмена значениями двух глубоко вложенных атрибутов объекта. Здесь объект немного сложнее, поэтому мы не будем пытаться писать функцию как однострочную - форматирование ее на несколько строк должно улучшить читаемость:
Тем не менее, здесь есть что переварить. У нас есть сложный объект с двумя (логическими) атрибутами на разных уровнях вложенности. Мы хотим обменять значения этих атрибутов, поэтому мы деструктурируем их до переменных hanShotFirst и greedoShotFirst.
Используя эти переменные, мы возвращаем новый объект с той же структурой, но с обменом значениями этих атрибутов.
Наконец, давайте воспользуемся деструктуризацией массива, чтобы произвести (самоуверенное) извлечение элемента из массива:
Я думаю, что способ использования стрелочных функций и деструктурирующего назначения для преобразования объекта - это довольно круто. Конечно, для деструктуризации может быть гораздо больше вариантов использования, но пока это мой любимый вариант использования.
