Урок 7. ES6 (EcmaScript 6). Rest и Spread операторы


Содержание материала:

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

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/destructuring-assignment.

Деструктуризация (destructuring assignment) – это особый синтаксис присваивания, при котором можно присвоить массив или объект сразу нескольким переменным, разбив его на части.

Массив

Пример деструктуризации массива:

При таком присвоении первое значение массива пойдёт в переменную firstName , второе – в lastName , а последующие (если есть) – будут отброшены.

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

В коде выше первый и второй элементы массива никуда не записались, они были отброшены. Как, впрочем, и все элементы после третьего.

Оператор «spread»

Если мы хотим получить и последующие значения массива, но не уверены в их числе – можно добавить ещё один параметр, который получит «всё остальное», при помощи оператора «. » («spread», троеточие):

Значением rest будет массив из оставшихся элементов массива. Вместо rest можно использовать и другое имя переменной, оператор здесь – троеточие. Оно должно стоять только последним элементом в списке слева.

Значения по умолчанию

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

Впрочем, как правило, в таких случаях задают значение по умолчанию. Для этого нужно после переменной использовать символ = со значением, например:

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

Заметим, что вызов функции defaultLastName() для генерации значения по умолчанию будет осуществлён только при необходимости, то есть если значения нет в массиве.

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

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

Объект справа – уже существующий, который мы хотим разбить на переменные. А слева – список переменных, в которые нужно соответствующие свойства записать.

Как видно, свойства options.title , options.width и options.height автоматически присвоились соответствующим переменным.

Если хочется присвоить свойство объекта в переменную с другим именем, например, чтобы свойство options.width пошло в переменную w , то можно указать соответствие через двоеточие, вот так:

В примере выше свойство width отправилось в переменную w , свойство height – в переменную h , а title – в переменную с тем же названием.

Если каких-то свойств в объекте нет, можно указать значение по умолчанию через знак равенства = , вот так;

Можно и сочетать одновременно двоеточие и равенство:

А что, если в объекте больше значений, чем переменных? Можно ли куда-то присвоить «остаток», аналогично массивам?

Такой возможности в текущем стандарте нет. Она планируется в будущем стандарте, и выглядеть она будет примерно так:

Этот код будет работать, например, при использовании Babel со включёнными экспериментальными возможностями, но ещё раз заметим, что в текущий стандарт такая возможность не вошла.

В примерах выше переменные объявлялись прямо перед присваиванием: let <…>= <…>. Конечно, можно и без let , использовать уже существующие переменные.

Однако, здесь есть небольшой «подвох». В JavaScript, если в основном потоке кода (не внутри другого выражения) встречается <. >, то это воспринимается как блок.

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

Конечно, это бывает удобно, но в данном случае это создаст проблему при деструктуризации:

Чтобы избежать интерпретации как блока, нужно обернуть всё присваивание в скобки:

Вложенные деструктуризации

Если объект или массив содержат другие объекты или массивы, и их тоже хочется разбить на переменные – не проблема.

Деструктуризации можно как угодно сочетать и вкладывать друг в друга.

В коде ниже options содержит подобъект и подмассив. В деструктуризации ниже сохраняется та же структура:

Как видно, весь объект options корректно разбит на переменные.

Итого

Деструктуризация позволяет разбивать объект или массив на переменные при присвоении.

Здесь двоеточие : задаёт отображение свойства prop в переменную varName , а равенство =default задаёт выражение, которое будет использовано, если значение отсутствует (не указано или undefined ).

Для массивов имеет значение порядок, поэтому нельзя использовать : , но значение по умолчанию – можно:

Объявление переменной в начале конструкции не обязательно. Можно использовать и существующие переменные. Однако при деструктуризации объекта может потребоваться обернуть выражение в скобки.

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

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

ES6, ES8, ES2020: что такое ECMAScript и чем это отличается от JavaScript

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

Что такое ECMAScript?

Сначала немного истории. JavaScript создавался как скриптовый язык для Netscape. После чего он был отправлен в ECMA International для стандартизации (ECMA — это ассоциация, деятельность которой посвящена стандартизации информационных и коммуникационных технологий). Это привело к появлению нового языкового стандарта, известного как ECMAScript.

Последующие версии JavaScript уже были основаны на стандарте ECMAScript. Проще говоря, ECMAScript — стандарт, а JavaScript — самая популярная реализация этого стандарта.

Что такое ES? История версий

ES — это просто сокращение для ECMAScript. Каждое издание ECMAScript получает аббревиатуру ES с последующим его номером. Всего существует 8 версий ECMAScript. ES1 была выпущена в июне 1997 года, ES2 — в июне 1998 года, ES3 — в декабре 1999 года, а версия ES4 — так и не была принята. Не будем углубляться в эти версии, так как они морально устарели, а рассмотрим только последние четыре.

ES5 был выпущен в декабре 2009 года, спустя 10 лет после выхода третьего издания. Среди изменений можно отметить:

  • поддержку строгого режима (strict mode);
  • аксессоры getters и setters ;
  • возможность использовать зарезервированные слова в качестве ключей свойств и ставить запятые в конце массива;
  • многострочные строковые литералы;
  • новую функциональность в стандартной библиотеке;
  • поддержку JSON.

Версия ES6/ES2015 вышла в июне 2015 года. Это также принесло некую путаницу в связи с названием пакета, ведь ES6 и ES2015 — это одно и то же. С выходом этого пакета обновлений комитет принял решение перейти к ежегодным обновлениям. Поэтому издание было переименовано в ES2015, чтобы отражать год релиза. Последующие версии также называются в соответствии с годом их выпуска. В этом обновлении были сделаны следующие изменения:

  • добавлено деструктурирующее присваивание;
  • добавлены стрелочные функции;
  • в шаблонных строках можно объявлять строки с помощью ` (обратных кавычек). Шаблонные строки могут быть многострочными, также могут интерполироваться;
  • let и const — альтернативы var для объявления переменных. Добавлена «временная мертвая зона»;
  • итератор и протокол итерации теперь определяют способ перебора любого объекта, а не только массивов. Symbol используется для присвоения итератора к любому объекту;
  • добавлены функции-генераторы. Они используют yield для создания последовательности элементов. Функции-генераторы могут использовать yield* для делегирования в другую функцию генератора, кроме этого они могут возвращать объект генератора, который реализует оба протокола;
  • добавлены промисы.

Урок 7. ES6 (EcmaScript 6). Rest и Spread операторы

Категория имеет мидийных объектов числом 17

ECMAScript 6. Урок 2. Особенности объявления переменных в ES 6. Let, const, деструктуризация.

В этом уроке мы познакомимся с новыми операторами spread и rest. Рассмотрим новый цикл for of, а так же познакомимся с новым примитивным типом Symbol.
Полный видео курс- https://itvdn.com/ru/video/es6

Чтобы ознакомится с полным курсом используй промо-код (см. выше) и получи скидку.

Топ-пост этого месяца:  Что такое показатель отказов Как его определить и снизить

Курс Modern Javascript

Курс программирования Modern Javascript

Этот курс обучает современному Javascript в версиях ES6, ES7, ES8. Без знаний из этого курса, вы не сможете полноценно освоить современные javascript фреймворки и библиотеки, такие как ReactJS, VueJS, а также серверные технологии, такие как NodeJS.

Курс Modern Javascript в активной стадии разработки и новые задания скоро будут доступны по мере их выхода, но уже сейчас вы можете начать обучение!

Ориентировочная дата выхода нового урока — 23.11.2020

О курсе

Начиная с версии ES6 Javascript заметно преобразился, в нем появились новые ключевые слова, такие как let, cons, class и другие. Синтаксис стал более красивым и в этом курсе вы испытаете в интерактивных упражнениях новые возможности Modern Javascript.

Основы javascript

Сейчас изучаю js. До этого работала 2 года java разработчиком. Это не все ресурсы, по которым я занималась, но мне просто нравится отмечать выполненные пункты на этом сервисе:)

P.S. Ресурсы будут поплняться. В идеале, еще будет про React

Критерій завершення

Все видеоуроки, книги и т.д. просмотрены/прочитаны и проработаны

ES6. Современный JavaScript

Урок 1. Современный JavaScript (ES6) — let, const

Урок 2. Современный JavaScript (ES6) — Деструктуризация

Урок 3. Современный JavaScript (ES6) — rest и spread операторы

Урок 4. Современный JavaScript (ES6) — String Template и интерполяция строк

Урок 5. Современный JavaScript (ES6) — Параметры по умолчанию

Урок 6. Современный JavaScript (ES6) — Стрелочные функции

Урок 7. Современный JavaScript (ES6) — Деструктуризация параметров

Gulp для самых маленьких — подробное руководство

Просмотрю вводные видео, потом

Sass для самых маленьких — подробное руководство https://www.youtube.com/watch?v=H4cG4tbc-xQ

Уроки CSS: препроцессор SASS больше не нужен https://www.youtube.com/watch?v=j3SrO9wrnlk

Уроки CSS: SASS не будет нужен.Наследование, вложенности. https://www.youtube.com/watch?v=jVtBiD0BsJ4


Learn js

Статьи на обучающем сайте learn.javascript.ru. Часть 2.

Документ, события, интерфейсы

Документ и объекты страницы. 16. Размеры и прокрутка страницы

Документ и объекты страницы. 17. Координаты в окне

Документ и объекты страницы. 18. Координаты в документе

Документ и объекты страницы. 19. Итого

Основы работы с событиями. 1. Введение в браузерные события

Основы работы с событиями. 2. Порядок обработки событий

Основы работы с событиями. 3. Объект события

Основы работы с событиями. 4. Всплытие и перехват

Основы работы с событиями. 5. Делегирование событий

Основы работы с событиями. 6. Приём проектирования «поведение»

Основы работы с событиями. 7. Действия браузера по умолчанию

Основы работы с событиями. 8. Генерация событий на элементах

События в деталях. 1. Мышь: клики, кнопка, координаты

События в деталях. 2. Мышь: отмена выделения, невыделяемые элементы

События в деталях. 3. Мышь: движение mouseover/out, mouseenter/leave

События в деталях. 4. Мышь: Drag’n’Drop

События в деталях. 5. Мышь: Drag’n’Drop более глубоко

События в деталях. 6. Мышь: колёсико, событие wheel

События в деталях. 7. Мышь: IE8-, исправление события

События в деталях. 8. Прокрутка: событие scroll

События в деталях. 9. Клавиатура: keyup, keydown, keypress

События в деталях. 10. Загрузка документа: DOMContentLoaded, load, beforeunload, unload

События в деталях. 11. Загрузка скриптов, картинок, фреймов: onload и onerror

Формы, элементы управления. 1. Навигация и свойства элементов формы

Формы, элементы управления. 2. Фокусировка: focus/blur

Формы, элементы управления. 3. Изменение: change, input, cut, copy, paste

Формы, элементы управления. 4. Формы: отправка, событие и метод submit

Создание графических компонентов. 1. Введение

Создание графических компонентов. 2. Графические компоненты

Создание графических компонентов. 3. Вёрстка графических компонентов

Создание графических компонентов. 4. Шаблонизатор LoDash

Создание графических компонентов. 5. Коллбэки и события на компонентах

Создание графических компонентов. 6. Что изучать дальше

Eloquent JS

Главы, которые мне осталось пройти в книге Eloquent JS

Операторы массивов в ES6: spread, rest, destructuring

В ES6 появились операторы Spread (расширение) и Rest (остаток), которые позволяют простым образом объединять несколько массивов в один или передавать значения отдельных элементов массива в качестве аргументов функций. Интересно, что оба эти оператора внешне выглядят абсолютно одинаково — это троеточие ( . ), но используются в разных случаях, причем не только для массивов, но и для объектов.

Рассмотрим их применение на нескольких типичных задачах.

Оператор spread

Оператор разворота spread используется для:

Оператор spread . в переводе с английского — это распространение, расширение или разворот позволит нам склеить 2 массива в один . Например, нам зачем-то захотелось объединить зиму с летом. Попробуем сделать это методами массива push() , concat() и оператором spread :

Примечание: строчки с winter.push(summer) и console.log(winter) нужно закомментировать, прежде, чем применять метод concat() и оператор spread , т.к. он «вкладывает» сам второй массив внутрь первого, а не его значения.

В консоли вы увидите такие варианты объединения массивов:

Метод concat( ) объединил массивы, и то же самое сделал spread оперратор. Но что делать, если нам нужно поместить данные одного массива между данными другого массива? Т.е. нужно сделать примерно так:

В консоли вы увидите, что обычным способом мы поместили массив внутрь другого массива, а spread-оператор добавил значения массива в текущий массив.

Копирование данных из одного массива в другой

Еще один вариант применения оператора spread — это копирование данных из одного массива в другой. Если написать так:

В консоли получим такой результат:

То есть, использовав код numbers2 = numbers мы на самом деле получили ссылку на первый массив numbers . И второй массив после добавления данных в первый изменился так же, как и первый. Если же задача заключается не в использовании 2-х переменных, ссылающихся на один массив, а в сохранении в одной из переменных старых данных из массива, например, для последующего сравнения, то как раз имеет смысл использовать оператор расширения. Несколько перепишем код выше:

В консоли видим, что одинаковые массивы после добавления данных перестали быть одинаковыми, т.е. копирование с помощью оператора spread создает нам новый массив.

Можно также проверить, совпадают ли массивы

Примечание: до выхода стандарта ES6 копирование можно было сделать с помощью метода array.slice() :

Spread в качестве аргументов функции

Еще одно применение оператора spread позволяет развернуть массив для использования значений его элементов в качестве аргументов функции. В идеале количество элементов массива должно совпадать с количеством аргументов функции. Если элементов массива будет больше, то избыток проигнорируется, если меньше, то вместо отсутствующих элементов будет передано значение undefined . Например, нам нужно перемножить 3 числа:

Если элементов массива недостаточно, их можно заменить значениями по умолчанию. Перепишем нашу функцию таким образом:

Теперь функция будет выводить корректный результат умножения чисел, если их передается меньше 3-х или одно из значений в массиве undefined .

Для объекта Date

И это еще не все. Вы можете выполнить разворачивание массива в качестве данных объекта Date с помощью оператора spread и получить корректную дату:

Использование оператора spread для разбиения строк на символы

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

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

Задача: попробуйте видоизменить код таким образом, чтобы каждая из букв была ссылкой на какую либо страницу сайта flibusta.is, например, так: E | F

А теперь несколько более впечатляющий пример с использованием для каждой буквы строки обертки в виде с классом animCharacter , относительного позиционирования для него и анимации @keyframes :

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

С выходом стандарта ECMAScript 2020 стало возможным использование оператора spread для литералов объекта, например, для их копирования:

В переменной userLink мы получаем ссылку на основной объект user , поэтому после добавления в user свойства id , меняются оба объекта, ведь фактически они указывают путь к одному и тому же литералу объекта. А в переменной userCopy мы сохранили данные объекта user в его первоначальном виде.

Оператор расширения также может нам помочь в случае, если нужно объединить ряд данных, принадлежащих по сути одному объекту, но сохраненных в разных. Например, у нас есть 3 объекта, хранящие тип, возраст и цену одного и того же кота. Мы можем их объединить в один объект, но разница между использованием обычного объекта и полученного за счет оператора разворота очевидна:

В консоли видно, что оператор расширения собрал все данные в один объект из разных, а не добавил 3 объекта с похожими данными:

Ряд интересных примеров с манипуляциями свойствами литералов объектов вы найдете в статье Rest и Spread в JavaScript. Возможности, о которых вы не знали, а также в справке на MDN.

Преобразование коллекции DOM элементов

При выборе различными методами коллекций html-элементов в DOM-модели браузера мы получаем псевдомассивы, к которым далеко не всегда можно применить методы встроенного объекта Array, с помощью которых очень удобно выполнять какие-либо одинаковые операции.

Например, метод document.querySelectorAll() реализован таким образом, что возвращает коллекцию NodeList, для которой можно вызвать метод forEach() , но не другие методы массивов. А свойство document.links или метод document.getElementsByClassName() вернет коллекцию HTMLCollection, для которой даже forEach() вызвать нельзя. Чтобы воспользоваться все-таки методами массивов, применим к ним оператор расширения и посмотрим, стали ли они массивами:

Все сработало и для NodeList, и для HTMLCollection.

В примере ниже при клике на кнопках вызываются функции, которые позволяют использовать методы или циклы для работ с массивами, чтобы управлять абзацами или ссылками

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

Оператор rest

Оператор rest (оставшиеся параметры) используется для указания массива в качестве аргументов функции. Например:

В этом примере уже можно увидеть, что оператор rest при внешней идентичности делает нечто противоположное оператору spread, а именно преобразует в массив переданные через запятую параметры функции.

Топ-пост этого месяца:  Как убрать надпись «Сайт работает на WordPress» инструкция

В том случае, если вам нужно, чтобы какие-то параметры задавались и использовались в функции обязательно, можно добавить оператор rest после нужных аргументов функции.

Допустим, нам нужно сделать простой калькулятор, который позволит указать операцию (сложение, вычитание, умножение и деление), число, с которым нужно произвести вычисление и еще ряд чисел, которые будут прибавляться, отниматься или выступать множителями или делителями. Поскольку оператор оставшихся параметров выдаст нам массив переданных в функцию значений, будет очень удобно использовать для вычислений метод array.reduce() с указанным начальным значением и стрелочными функциями в качестве callback-ов.

Опять-таки с помощью метода массива array.includes() мы сделали внутри функции проверку на деление на 0. Очень удобно использовать методы массивов, не так ли?

Следует понимать, что оператор rest ( оставшиеся параметры) отличается от объекта arguments :

  • в объекте arguments содержатся все аргументы, передаваемые в функцию, а оставшиеся параметры включают только те, которым не задано отдельное имя;
  • объект arguments не является массивом, а оставшиеся параметры, наоборот, принадлежат классу Array и для них можно использовать любые методы массивов ( forEach(), map(), reduce и др.), которые ранее были доступны только с помощью call() или apply() ;
  • объект arguments имеет дополнительные свойства (например, callee ), характерные только для него .


Деструктивное присваивание

Синтаксис destructuring assignment — деструктивного, или деструктурирующего присваивания, предполагает, что в коде используется массив или литерал объекта.

Деструктивное присваивание для элементов массива

Оператор разворота spread позволял нам объединить 2 массива в один, а деструктурирующее присваивание — распределить данные между элементами массива и переменными. Например, у нас есть набор данных в виде массива и нам нужно присвоить значения его элементов, распределив их по определенным переменным. Это будет выглядеть так:

ES6 для начинающих

Чему вы научитесь

  1. Стрелочные функции (чем они отличаются от function)
  2. Let и const (и чем они лучше var)
  3. Деструктуризация и spread
  4. Модульная система ес6
  5. Строки (а именно шаблоны строк)
  6. Классы
  7. Промисы

Необходимые знания

  1. Базовые знания javascript

Для кого этот курс

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

Урок 7. ES6 (EcmaScript 6). Rest и Spread операторы

Данный курс по es6 предназначен для тех, кто хочет следовать современным трендам веб-разработки. Речь идет о новой спецификации языка javascript – es6 (ecmascript 6).

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

Мы начнем с настройки окружения с помощью webpack, для того, чтобы компилировать язык в старую спецификацию es5, для того, чтобы люди, работающие в старых бразуерах могли пользоваться тем функционалом, что мы напишем. Ну а если вы работаете в современных браузерах, то у вас все будет поддерживаться нативно.

После, мы разберем все функции, которые нам привнес es6, начиная от переменных и классов, и заканчивая промисами и генераторами.

Также мы разберем как преобразуются некоторые фичи es6 в es5 и реализуем несколько из них, чтобы понимать, как оно работает.

Урок 0. Курс по ES 6 (EcmaScript 6) для веб-разработчиков

Урок 1. ES6 (EcmaScript 6). Настройка окружения

От автора: с этого урока мы с вами начнем изучать новый синтаксис языка javascript — es6 (ecmascript 6). Так как еще не все браузеры его поддерживают нативно, то мы начнем с настройки окружения, где разберем как с помощью webpack компилировать es6 в es5.

Из урока вы узнаете, как с помощью webpack и babel-loader можно компилировать синтаксис es6 в es5 для того, чтобы все браузеры понимали, что мы написали.

В результате урока мы настроим webpack таким образом, чтобы он корректно преобразовывал нам es6 в es5.

Урок 2. ES6 (EcmaScript 6). Переменные

От автора: в этом уроке мы поговорим про то, какие появились новые способы создания переменных в es6 (ecmascript 6).

Из урока вы узнаете о новых способах создания переменных в ecmascript 6 (es6) — let и const. Вы увидите наглядное различие между старым способом объявления переменных с помощью ключевого слова var и новым способом, с помощью ключевого слова let на нескольких практических примерах.

Также мы поговорим про то, какие есть тонкости при создания переменных с помощью ключевого слова const.

Урок 3. ES6 (EcmaScript 6). Стрелочные функции

От автора: в этом уроке мы познакомимся с одним из самых главным и часто используемым нововведением в es6 (ecmascript 6) — со стрелочными функциями.

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

Помимо синтаксиса мы разберем особенности работы данных функций с контекстом на практическом примере.

Урок 4. ES6 (EcmaScript 6). Параметры по умолчанию

От автора: в этом уроке мы познакомимся со следующим очень полезным нововведением в es6 (ecmascript 6) — способ передачи параметров по умолчанию в функцию.

Из урока вы узнаете, как задавать параметры по умолчанию в функции, то есть если параметр, который нужен в функции не был явно передан, то будет использоваться какое-то определенное заданное значение, для того, чтобы код не выдавал ошибку и все работало корректно.

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

Урок 5. ES6 (EcmaScript 6). Объекты

От автора: в этом уроке мы разберем все новые пункты, которые появились в синтаксисе es6 (EcmaScript 6) для более удобной записи объектов.

Из урока вы узнаете все возможные варианты новой записи объектов. Вы познакомитесь с сокращенной записей ключей, функций и динамическим созданием ключей объекта.

В результате урока мы напишем функцию, на примере которой рассмотрим все эти возможности.

Урок 6. ES6 (EcmaScript 6). Деструктуризация

От автора: в этом уроке мы разберем такое понятие как деструктуризация в es6 (EcmaScript), которая часто сильно сокращает код.

Из урока вы узнаете, что такое деструктуризация и зачем она нужна.

В результате урока мы разберем 2 ситуации, когда применима деструктуризация — на примере объектов и массивов.

Урок 7. ES6 (EcmaScript 6). Rest и Spread операторы

От автора: в новый синтаксис javascript были введены 2 очень похожих, но при этом разных операторов, которые позволяют удобно работать с массивами. Это операторы rest и spread.

Из урока вы узнаете, что такое rest и spread операторы в es6 (EcmaScript 6). Вы поймете, чем они отличаются и когда стоит тот или иной применять.

В результате урока мы разберем 2 случая, когда применяется Rest оператор, а когда spread.

Урок 8. ES6 (EcmaScript 6). Строки

От автора: новый синтаксис javascript предоставляет нам удобные возможности для работы со строками, например, со встроенной шаблонизацией в es6 (EcmaScript 6).

Из урока вы узнаете новые возможности для работы со строками в es6 синтаксисе.

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

Урок 9. ES6 (EcmaScript 6). Циклы

От автора: в этом уроке мы с вами познакомимся с новым видом циклов, которые появились в es6 (EcmaScript 6).

Из урока вы узнаете, какое ключевое слово появилось в es6 для задания нового цикла, который является более удобной версией цикла for.

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

Урок 10. ES6 (EcmaScript 6). Классы

От автора: в этом уроке мы с вами увидим, как преобразился синтаксис для ООП в es6 (EcmaScript 6).

Из урока вы узнаете, какие ключевые слова и конструкции появились в es6. Для работы с классами, наследованием и в целом ООП.

В результате урока мы напишем простой класс, используя старый синтаксис, а потом напишем тоже самое, но уже используя новый синтаксис, и на этом примере увидим разницу.

Урок 11. ES6 (EcmaScript 6). Set и WeakSet

От автора: помимо новых синтаксических конструкций es6 привнес некоторые структуры данных, которые очень удобно позволяют работать с данными, которые мы начнем рассматривать, начиная с этого урока.

Из урока вы узнаете, что такое Set и WeakSet в es6.

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

Урок 12. ES6 (EcmaScript 6). Map и WeakMap

От автора: в этом уроке мы продолжим изучение новых структур данных и в этот раз поговорим про объектоподобные структуры map и weakmap в es6 (EcmaScript 6).

Из урока вы узнаете, что такое объектоподобные структуры данных — Map и WeakMap.

В результате урока мы разберем все возможности и методы для работы с Map объектами, и рассмотрим 2 способа создания данных объектов.

Урок 13. ES6 (EcmaScript 6). Система модулей.Модули

От автора: в этом уроке мы с вами разберем систему модулей, которая появилась в es6 (EcmaScript). Она предназначена для нативной декомпозиции модулей на javascript, которая сильно облегчает задачу определения зависимостей.

Из урока вы узнаете, как работать с нативными es6 модулями. Вы узнаете все возможные варианты связи модулей и научитесь ими пользоваться. В уроке будут разобраны такие новые ключевые слова как export import as from default.

В результате урока мы создадим 2 модуля, и рассмотрим на их примере как всеми возможными вариантами их можно связать.

Урок 14. ES6 (EcmaScript 6). Символы

От автора: в этом уроке мы познакомимся с седьмым, новым типом данных в javascript, который привнес es6 (EcmaScript 6) в язык.

Топ-пост этого месяца:  Что такое фирменный стиль, для чего нужен и что в него входит

Из урока вы узнаете, что такое символы и как их создавать. Вы узнаете зачем они используется и в чем их особенность, как нового типа данных. Вы увидите, как можно создавать собственные символы, и узнаете какие есть фиксированные, зарезервированные символы в самом языке.

В результате урока мы с вами разберем, в каких объектах уже есть символы итераторы, как работает цикл for of, напишем свою собственную функцию, которая будет делать тоже самое что и цикл. А в конце урока мы напишем реализацию функции генерации последовательности Фибоначчи, используя символы.

Урок 15. ES6 (EcmaScript 6). Генераторы

От автора: в этом уроке мы познакомимся с новым видом функций, которые появились в es6 (EcmaScript 6) стандарте — с генераторами, которые позволяют очень удобно генерировать данные, или работать с асинхронным кодом.

Из урока вы узнаете, что такое функции-генераторы в es6 и как ими пользоваться. Вы узнаете, как их создавать, их специальный синтаксис и новое ключевое слово yield. На реальном примере вы увидите, как можно создавать генератор внутри генератора для разных типов данных.

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

Урок 16. ES6 (EcmaScript 6). Новые методы

От автора: помимо нового синтаксиса и нового функционала es6 (EcmaScript 6) привнес в язык Javascript новые методы у разных типов данных, основные из которых мы рассмотрим в данном уроке.

Из урока вы узнаете, какие новые методы появились у встроенных типов данных в javascript. Мы разберем некоторые методы строк, массивов и объектов, для более эффективной работы.

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

Урок 17. ES6 (EcmaScript 6). Promise

От автора: в этом заключительном уроке мы разберем новую структуру данных, которой так не хватало в javascript. Речь идет о промисах в es6 (EcmaScript 6) — конструкции, которая очень удобно позволяет работать с асинхронным кодом.


Из урока вы узнаете, что такое Promise, как с ними работать и зачем они нужны. Вы узнаете, почему стоит использовать именно их, а не большое дерево колбэков.

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

ECMAScript 6 (2015)

ECMAScript 6 также известен как ES6 и ECMAScript 2015.

Некоторые предпочитают называть его JavaScript 6.

В этой главе мы рассмотрим некоторые новые особенности ES6.

  • Ключевое слово let
  • Ключевое слово const
  • Значения параметров по умолчанию
  • Оператор возведения в степень (**) (ECMAScript 2020)
  • Метод Array.find()
  • Метод Array.findIndex()

Ключевое слово let

Ключевое слово let позволяет декларировать переменные внутри области видимости блока, ограниченной фигурными скобками < >.

Так, повторная декларация переменной при помощи ключевого слова var может привести к проблеме:

Повторная же декларация переменной при помощи ключевого слова let решает эту проблему:

Ключевое слово const

Ключевое слово const используется для декларации переменной с константным значением.

По действию оно похоже на ключевое слово let, только значение такой переменной нельзя изменять.

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

Подробнее о ключевых словах let и const см. главы Ключевое слово let и Ключевое слово const.

Значения параметров по умолчанию

В ES6 можно определять значения по умолчанию для параметров функций.

Оператор возведения в степень

Оператор возведения в степень (**) возводит первый операнд в степень, заданную вторым операндом:

Выражение x ** y дает тот же результат, что использование метода Math.pow(x,y):

Метод Array.find()

Метод find() возвращает значение первого элемента массива, прошедшего заданную проверку в функции обратного вызова.

В следующем примере происходит поиск (и возврат значения) первого элемента, значение которого больше 18:

Функция обратного вызова принимает 3 параметра:

  • Значение элемента (value)
  • Индекс элемента (index)
  • Сам массив (array)

Метод Array.findIndex()

Метод findIndex() возвращает индекс первого элемента массива, прошедшего заданную проверку в функции обратного вызова.

В следующем примере возвращается индекс первого элемента, значение которого больше 18:

Функция обратного вызова принимает 3 параметра:

  • Значение элемента (value)
  • Индекс элемента (index)
  • Сам массив (array)

Новые свойства объекта Number

В ES6 были добавлены новые свойства объекту Number:

  • EPSILON
  • MIN_SAFE_INTEGER
  • MAX_SAFE_INTEGER

Новые методы объекта Number

В ES6 было добавлено 2 новых метода объекту Number:

Метод Number.isInteger()

Метод Number.isInteger() возвращает true, если его параметр — целое число.

Метод Number.isSafeInteger()

Безопасное целое число — это число, которое может быть представлено в виде числа двойной точности.

Метод Number.isSafeInteger() возвращает true, если его параметр — безопасное целое число.

Безопасными являются все целые числа в диапазоне от (253 — 1) до (253 — 1).
Это число безопасное: 9007199254740991. Это число не безопасное: 9007199254740992.

Новые глобальные методы

В ES6 также было добавлено 2 новых глобальных метода:

Метод isFinite()

Глобальный метод isFinite() возвращает false, если его параметр имеет тип Infinity или NaN. В обратном случае возвращается true:

Метод isNaN()

Глобальный метод isNan() возвращает true, если его параметр имеет тип NaN. В обратном случае возвращается false:

«Стрелочные» функции

«Стрелочные» функции предоставляют короткую запись для выражений-функций.

В выражении-функции больше не нужно использовать ключевые слова function, return и фигурные скобки :

У стрелочных функций нет своего значения this. И они не подходят для определения методов объектов.

Стрелочные функции должны определяться перед своим использованием. При этом для их декларации использовать ключевое слова const безопаснее ключевого слова var, потому что по своей сути функция это константное значение.

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

5 недостатков JavaScript, исправленных в ES6

Нововведения ECMAScript 6 (ES6) можно условно разделить на являющиеся синтаксическим сахаром (например, class), улучшающие JavaScript (например, import) и исправляющие недостатки JavaScript (например, ключевое слово let). В большинстве статей они комбинируются. Я хочу сосредоточиться только на ключевых особенностях ES6, исправляющих слабые стороны языка.

Ок, давайте начнем.

1. Блочная область видимости

В ES5 есть только область видимости уровня функции (т.е. необходимо оборочивать код в функцию для создания области видимости), что всегда вызывало массу вопросов. В ES6 появилась область видимости уровня блока (область видимости в пределах фигурных скобок), для этого необходимо использовать ключевые слова let или const вместо var.

Предотвращает подъем переменных за пределы области видимости

Пример ниже показывает, что переменная bonus не поднимается за пределы блока if.

Предотвращает двойное объявление переменной

В ES6 недопустимо двойное объявление переменной, если вы объявляете ее с помощью let или const в той же области видимости. Это помогает избежать двойного определения функций из разных библиотек (как функция ‘add’ в примере ниже).

Устраняет необходимость IIFE

В ES5, как в примере ниже, мы должны были использовать немедленно вызываемые функции, чтобы избежать попадания переменных в глобальную область видимости. В ES6 мы можем просто использовать для этого фигурные скобки (<>) и ключевые слова let и const.

Babel — инструмент для конвертации ES6 в ES5

В конечном итоге у нас должна быть возможность запустить ES6 код в обычном браузере. Babel — это наиболее популярный инструмент для конвертации ES6 в ES5. Он доступен как консольная утилита, модуль Node.js или online-конвертер. Я использую модуль node.js для своих приложений и online-версию для быстрого просмотра различий.

На рисунке ниже показано, как Babel переименовывает переменные, чтобы эмулировать работу let и const!

Делает использование функций в циклах тривиальным

В ES5, если у вас есть функция внутри цикла (например, for(var i = 0; i делает this лексическим автоматически.

На рисунке ниже показано, как Babel конвертирует стрелочные функции в функции ES5, чтобы они работали в текущих версиях браузеров.

3. Работа с arguments

В ES5 arguments ведет себя как массив (мы можем пройтись по нему циклом), но это не массив. Т.е. методы массивов, такие как sort, slice и т.д., не доступны.

В ES6 мы можем использовать так называемые rest-параметры. Они представляют собой многоточие и название объекта, например . args. Rest-параметр является массивом, можно использовать все методы массива.

4. Классы

Концептуально, в JavaScript нет такого понятия как класс, в отличие от объектно-ориентированных языков программирования, таких как Java. Но разработчики долгое время использовали функции, которые создавали объекты при вызове с ключевым словом new.

И поскольку JS не поддерживал классы, а лишь их эмуляцию с помощью прототипов, такой синтаксис вызывал сложности и у опытных JS-разработчиков, и у новичков, желающих использовать традиционные концепции OOP. Это особенно актуально для таких вещей как: наследование, вызов метода родительского класса и т.д.

В ES6 появился новый синтаксис, схожий с соответствующим в других языках программирования. Ниже показано сравнение классов ES5 и ES6.

5. Строгий режим

Строгий режим («use strict») помогает обнаружить наиболее общие проблемы JavaScript и повысить «безопасность». В ES5 строгий режим не обязателен, но в ES6 он необходим для большинства особенностей. Поэтому большинство людей используют строгий режим по умолчанию, а многие инструменты, такие как Babel, автоматически добавляют «use strict» в начало файла, позволяя нам писать лучший JavaScript.

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2020

Все права на материалы, публикуемые на данном сайте, принадлежат редакции сайта, за исключением случаев перепечатки чужих материалов, и охраняются в соответствии с законодательством РФ.

Добавить комментарий