Abr@X@bra.ru
Курс по ES6 #4. Оператор распространения или разворота
Курс по ES6 #4. Оператор распространения или разворота

Курс по ES6 #4. Оператор распространения или разворота

24.04.2017
209
Оператор распространения или разворота, который выглядит как … (троеточие). Позволяет разворачивать элементы массива, для передачи в качестве аргумента функции или в элементы другого массива.

На самом деле звучит намного непонятно, чем это есть на самом деле. Я покажу наглядно на примере.

Пример

Допустим имеется два массива.


И мы хотим перенести элементы первого массива, во второй. Для этого мы можем использовать оператор разворота.




Который развернет первый массив. И вставит его значение во второй.



Еще один пример

Допустим имеется тот же массив.



Также имеется функция doSomething(). Которая, что-то делает.


Данная функция принимает три аргумента. И какое совпадение у массива имеется тоже три элемента.

Сам массив конечно же мы отправить в функцию не можем. Но мы можем развернуть массив в аргументы функции используя оператор разворота.


Надеюсь визуальные примеры были понятны.


Практика

Теперь давайте перейдем в редактор и попробуем применить оператор разворота на практике.

Первое, что нужно сделать - это запустить скрипт Babel.

Далее в папке src я создам файл spread.js. И сразу укажу его в файле index.html.



В файле я создам три массива. Первый будет называться - staticLanguages и будет содержать в себе название статических языков.


Второй массив будет называться - dynamicLanguges и будет содержать названия, динамических языков.


Также я создам третий массив который будет называться - languages, в котором пока будет два языка.


Теперь я хочу к элементу массива languages, добавить статические и динамические языки. Для этого я вставлю переменные в соответствующие места.


После чего, выведу значение languages, в консоли браузера.


Давайте посмотрим на результат в браузере.  


Заметьте, что появилось в консоли. Ни то, что мы хотели. Чтобы получить желаемый результат, давайте воспользуемся оператором разворота. И все, что нужно сделать, это поставить три точки перед переменными в массиве.


Теперь массив languages, содержит название всех восьми языков.


Передача аргументов в функцию

Теперь давайте попробуем использовать оператор разворота, для передачи разворота в функции.  

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


Далее создаем массив numbers, который состоит из трех элементов.


Функция add, принимает три аргумента. И явно будет работать неправильно, если мы отправим в качестве аргумента сам массив. Но всеже давайте попробуем.


Как и ожидалось функция работает неправильно.


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


Теперь мы получили правильный результат.


Конечно оператор разворота, это не то, без чего мы не могли жить. Но тем не менее при работе с массивами им удобно пользоваться.

В следующем посте на данную тему, познакомлю вас с шаблонами. Или шаблонными строками. Которые позволяют использовать выражения JavaScript, прямо в самой строке.  


Источник: codedojo

ES6
Читайте также:
Курс по ES6 #2. Использование let

Курс по ES6 #2. Использование let

Как вы знаете в JavaScript, а именно в ES5, есть две области видимости. Глобальная и в приделал функции. В ES6 теперь ес...
Читать
Курс по ES6 #1. Установка и настройка Babel

Курс по ES6 #1. Установка и настройка Babel

ES6 теперь является официальным стандартом. Но большинство современных браузеров на данный момент, не поддерживает все н...
Читать
Курс по ES6 #0. Пилотный выпуск. Вступление

Курс по ES6 #0. Пилотный выпуск. Вступление

ECMAScript 2015 или ES6 летом 2015 был принят как официальный стандарт, и является самым крупным обновлением языка за по...
Читать