Javascript становится все более и более классным языком. Почему? Из-за всех функций, представленных в ES6 (ECMAScript 6 aka ECMAScript 2015) и во всех других более продвинутых версиях. ECMAScript - это просто стандартизированная спецификация Javascript. Некоторые браузеры уже поддерживают это. Однако обычно полагаться на это небезопасно, поскольку нет гарантии, что какой-либо браузер будет поддерживать полную спецификацию. Лучше всего использовать транспилятор, который преобразует ваш код ES6 в ES5, который наверняка будет работать в любом браузере. Babel - хорошо известный транспилятор, который можно интегрировать в большинство используемых инструментов сборки, таких как webpack или gulp.

Я много работал с Javascript в проекте веб-разработки на одной из моих предыдущих работ. Я имею в виду… много! Попробуйте работать в интерфейсе без какого-либо фреймворка (без React, angular или чего-то еще!). Итак, как вы понимаете, я действительно познакомился с Javascript, но это был ES5.

Пару месяцев назад мне приходится иметь дело с ES6 на моей постоянной работе. В нем много интересных функций. Вот почему я решил начать новую серию публикаций о функциях, о которых я узнал (и все еще учусь)!

Этот пост посвящен назначению деструктуризации, которое, на мой взгляд, является чистым способом работы с объектами и массивами.

По сути, это просто отличный способ получить значения из массивов и объектов.

Посмотрим, как это работает!

Деструктуризация массива

Вы можете получить некоторые значения из заданного массива и дать им любое имя. Например, предположим, что у вас есть массив чисел [1, 2, 3, 5, 8, 13, 21], и вы хотите сохранить первые два индекса в отдельных переменных. В «обычном» Javascript вы бы сделали что-то вроде:

Переменная x и y содержат индексы 0 и 1 соответственно. Остальное содержит все остальные числа [3, 5, 8, 13, 21].

А теперь давайте сделаем это так же, как ES6!

Это делает то же самое, что и предыдущий код, но выглядит намного лучше. Вы получаете первые две позиции из массива в переменных x и y. Остальные значения сохраняются в константе rest. Если вы не знаете, что означает ключевое слово «const», не беспокойтесь, это что-то из ES6, оно используется для определения значения, которое нельзя переназначить.

Деструктуризация объекта

В ES5 для получения значений от объектов вам просто нужно знать, какие ключи имеют нужные вам значения, и ввести что-то вроде myObject.myKey. Допустим, у вас есть объект, который описывает человека с такими свойствами: имя, возраст, пол, адрес и номер телефона. Если вы хотите извлечь свойства name и age, вам просто нужно просто сделать:

Если вы используете ES6, вы можете сделать это так:

Вы только что извлекли из объекта несколько ключей, а также получили еще один объект с оставшимися ключами (пол, адрес и телефон). Помните странное «…» при деструктуризации массива? Этот «… отдых» делает то же самое, но в данном случае это объект.

Надеюсь, вы уловили идею, но позвольте мне привести пример, который поможет вам лучше понять, насколько это круто!

Пример

Допустим, вы реализуете 2D-игру на Javascript, например Bomberman. Кто не знает об этом, правда? Верно??? :)

У вас уже есть следующая функция:

  • getPosition: возвращает текущую позицию бомбардировщика в паре координат (x и y) в 2D-сетке, где происходит все действие.

Есть два способа определить позицию, используя массив или объект. В реализации массива нулевой и единичный индексы являются координатами x и y соответственно. При использовании объекта у него будут клавиши x и y со значениями координат. Чтобы использовать эту функцию getPosition, вы можете использовать назначение деструктурирования, чтобы сделать ваш код намного чище, чем без его использования.

Теперь вам нужно реализовать функцию:

  • getDistance: возвращает расстояние (по осям x и y) между двумя позициями.

Например, если у вас есть следующие должности:

  • position0 = {x: 2, y: 4}
  • position1 = {x: 5, y: 3}

Расстояние между ними должно быть {x: 3, y: -1}, потому что 5-2 = 3 и 3–4 = -1.

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

Выбирая реализацию массива, если вы вызываете функцию getPosition, вы получите массив, в котором нулевой индекс - это координата x, а индекс - y значение.

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

Что, если наша функция getPosition по какой-то причине возвращает координату undefined? Вы можете установить значения по умолчанию, поэтому ваш код не выйдет из строя!

Помните функцию getDistance, представленную в примере? Давайте определим его, предполагая, что наши позиции представлены в виде массива:

Это уже действительно хороший код, но вы можете удалить некоторые строки, если выполните деструктуризацию в списке аргументов функции!

Это слишком быстро? Давайте разберемся, потому что здесь много чего происходит :)

  • [x1 = 0, y1 = 0]: эта вещь в заголовке функции означает, что вы ожидаете массив с двумя позициями. Вы присваиваете его индексам ноль и единицу x1 и y1 соответственно. Если в массиве меньше двух позиций или он полностью пуст, эти значения x1 и y1 становятся нулевыми. Имейте в виду, что вы можете передать пустой массив, но не можете его пропустить, иначе вы получите сообщение об ошибке!
  • const [xDistance, yDistance] = getDistance (position1, position2): здесь вы просто вызываете функцию getDistance, которая возвращает массив. Вместо того, чтобы хранить этот массив в переменной (или константе, как я делаю в этом примере), вы назначаете нулевой и единичный индексы в двух константах с именами xDistance и yDistance, соответственно.

Использование объекта

То же упражнение getPosition можно реализовать с использованием объекта вместо массива. Напишем версию объекта!

И вы также можете установить значения по умолчанию, как мы это делали в версии с массивом!

Круто, правда? :)

Теперь давайте создадим функцию getDistance:

Здесь я использую назначение деструктуризации со значениями по умолчанию. Кроме того, я переименовал его ключи, чтобы различать x и y от position1 (x1 и y2) и x и y из position2 (x2 и y2 ).

Можно ли сделать лучше? Да! Давай сделаем это!

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

  • {x: x1 = 0, y: y2 = 0}: в основном это означает, что вы ожидаете объект в качестве первого аргумента функции с двумя клавишами x и y. Однако вы назначаете эти ключи x1 и y1 (это полезно, потому что функция ожидает два объекта с одинаковыми ключами). Имейте в виду, что вы ничего не меняете в объекте, переданном функции (переименование ключей, {x: x1, y: y2}, не меняет имена ключей в объекте). Кроме того, если этот объект не имеет определенного значения для ключа x, вместо него используется нулевое значение (x: x1 = 0). То же верно и для клавиши y.
  • const {x: xDistance, y: yDistance} = getDistance (position1, position2): вызывает функцию getDistance. Вы можете просто поместить результат в константу, но, как видите, вы можете деструктурировать этот объект, если вы уже знаете, какие ключи вы ожидаете. Часть «x: Distance» получает значение x из возвращенного объекта и переименовывает его в xDistance.

Заключение

Если вы уже работаете с Javascript ES6 (и более продвинутыми стандартами), вполне вероятно, что вы уже знаете это назначение деструктурирования и любите Javascript.

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

Надеюсь, вам понравилось, и вы чему-то научились. Поделитесь этим, особенно со своими друзьями-разработчиками, которые ненавидят Javascript :)

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