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


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

Using Classes

ECMAScript 6 introduces the concept of class available in traditional object-oriented languages. In ECMAScript 6, the class syntax is syntactical sugar on top of the existing prototype-based inheritance model. It does not add a new object-oriented inheritance model to JavaScript.

In this unit, you create an alternative implementation of the mortgage calculator application using a Mortgage class.

Part 1: Using a Class

Since this is an alternative implementation rather than the logical continuation of the previous implementation, make a copy of index.html and main.js in case you want to go back to that version.

In main.js , remove the import statement at the top of the file.

Add the following class definition at the top of file:

Modify the calcBtn click event handler as follows:

On the command line, type the following command to rebuild the application:

Open a browser, access http://localhost:8080, and click the Calculate button.

Part 2: Using Classes in Modules

To create the module:

Create a new file named mortgage2.js in the js directory.

Copy the Mortgage class definition from main.js into mortgage2.js .

Add the export default keywords in front of the class definition. mortgage2.js should now look like this:

To use the module:

In main.js , remove the Mortgage class definition.

Import the mortgage module. Add the following import statement as the first line in main.js:

To build the project:

On the command line, type the following command to rebuild the application:

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

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

Видеокурс JavaScript Advanced. Урок 10. AJAX и HTTP протокол

В этом уроке мы познакомим вас с новым стандартом JavaScript – ECMAScript 6, который является дополнением к существующей спецификации и существенно расширяет возможности веб разработчика. Мы подготовили короткий обзор нововведений с комментариями о том, как их лучше использовать в своих проектах с учетом их поддержки браузерами. Также мы подготовим небольшую webpack сборку для работы с ES6, добавим в него babel для транспиляции из ES6 в ES5 и узнаем, зачем это все нужно.

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

JavaScript ES6 циклы: for. in и for. of

Традиционный for цикл в JavaScript — теперь в прошлом! Встречайте новые циклы for..of и forin, которые дают нам очень ясный и короткий синтаксис для последовательного прохода по всем типам итерируемых и перечисляемых значений, таких как строки, массивы и объектные литералы. Поэтому, данная статья будет неким подобием шпаргалки, к которой можно обращаться, чтобы освежить в памяти новые функции JavaScript!

for…of

Используйте данный цикл for…of для итерации по значениям в итерируемых типах, например массиве:

let animals = [‘кошка’, ‘собака’, ‘лев’, ‘тигр’];
let names = [‘Гертруда’, ‘Генри’, ‘Мэлвин’, ‘Билли’];

for(let animal of animals)
<
// Случайное имя для кошки
let name > console.log(`$— $`);
>

// Генри — собака
// Мэлвин — лев
// Генри — собака
// Билли — тигр

Строки также являются итерируемыми типами, поэтому вы можете использовать JavaScript цикл for…of для строк:

for (let char of str)
<
console.log(char.toUpperCase().repeat(3));
>

Вы также можете перебирать карты (map), наборы (set), генераторы (generator), коллекции узлов DOM и объект arguments, доступный внутри каждой JavaScript функций.

for…in

Используйте этот цикл для то, чтобы перебирать свойства объекта (ключи объекта) в JavaScript:

make: ‘Tesla’,
model: ‘S’,
year: ‘2014’

// make Tesla
// model S

Вы также можете использовать for…in для итерации по индексам перебираемого объекта, например массива или строки:

let str = ‘Turn the page’;

// Индекс T: 0
// Индекс u: 1

На этом все. Ну а, если вы совсем плохо разбираетесь в языке JavaScript, предлагаю вам ознакомится с моим видеокурсом «JavaScript, jQuery и Ajax с Нуля до Гуру»

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

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

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Топ-пост этого месяца:  Связанные материалы без плагина на сайте WordPress

    Нововведения в ES6 для новичков

    Учебник JavaScript

    Практика

    Работа с DOM

    Практика

    Некоторые продвинутые вещи

    Рекомендованное ES6

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

    Регулярки

    Разное


    Работа с канвасом

    Практика

    • урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)
      Работа с
      AJAX в JavaScript
      Работа с
      AJAX + PHP

    Контекст

    Drag-and-Drop

    • Урок №
      Введение
      в ООП в стиле ES6
    • Урок №
      Основы
      работы с ООП
    • Урок №
      Наследование
      классов в JavaScript
      Продвинутая работа
      с классами на JavaScript
    • Урок №
      Применение
      ООП при работе с DOM
    • Урок №
      Практика
      по ООП в JavaScript
    • Тут скоро будут еще уроки
      по функциональному и прототипному
      стилю ООП.

    Практика по ООП

    Ваша задача: посмотрите, попробуйте повторить.

    Практика

    Promise ES6

    Библиотека jQuery

    Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

    В 2015 году вышел в свет новый стандарт JavaScript — ECMAScript-2015 (или по-простому ES6). В нем появилось достаточно много нововведений, которые еще не работают во всех браузерах, но работу с ними уже можно изучать, чтобы быть готовым к тому моменту, когда это все заработает.

    Кроме того, эти вещи можно использовать уже сейчас, если использовать специальные программы-транспойлеры, которые конвертируют код из нового стандарта в старый.

    Команда let вместо var

    Кроме команды var для объявления переменных появилась еще и команда let. Эта команда более строгая и нужна для того, чтобы ограничить область видимости переменных фигурными скобками.

    Давайте посмотрим разницу между var и let. Посмотрите, как работает var: он не создает область видимости внутри if — если объявить переменную снаружи if, а потом переопределить ее внутри — снаружи эта переменная тоже поменяется:

    А теперь посмотрим, как работает let — он создает разные области видимости снаружи и внутри if. И, если объявить переменную снаружи if, а затем попытаться затереть ее внутри — она не изменится:

    Команда let создает разные области видимости не только в if, но и в циклах и вообще в любых фигурных скобках.

    Константы

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

    Константа объявляется командой const вместо команды var:

    Если попытаться сменить значение константы — мы получим ошибку:

    Константы-объекты

    Объекты также можно делать константами. В этом случае значения их свойств разрешено менять, так же, как и добавлять новые свойства:

    А вот затереть объект и записать туда что-нибудь другое уже не получится — вы увидите ошибку:

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

    Следующее понятие, которое появилось в ES6 называется деструктуризация. Деструктуризация — это разделение массива или объекта в отдельные переменные.

    Пусть у нас дан массив [‘Иванов’, ‘Иван’]. Давайте фамилию положим в переменную surname, а имя — в переменную name. Для этого массив присвоим вот такой конструкции: var [surname, name], вот так: var [surname, name] = [‘Иванов’, ‘Иван’].

    Эта конструкция [surname, name] и есть деструктуризация. Получится, что первый элемент массива (то есть ‘Иванов’) запишется в переменную surname, а второй — в переменную name.

    Давайте посмотрим на примере:

    Можно начать записывать в переменные не сначала массива, а пропустить некоторые значения. Давайте, к примеру, пропустим фамилию, а имя и возраст запишем в переменные. Для этого при указании переменных перед первой переменной поставим запятую, вот так: [, name, age].

    Посмотрим на примере:

    Можно пропустить не одно значение, а несколько:

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

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

    Если в массиве меньше элементов, чем переменных, то в «лишние» переменные запишется undefined:

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

    В следующем примере переменной name по умолчанию указано значение ‘Аноним’:

    А вот если для переменной name будет значение в массиве — значение по умолчанию будет проигнорировано:

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

    Интересный пример применения деструктуризации — поменяем переменные местами:

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

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

    Можно сделать так, чтобы имена переменных не совпадали в именами ключей объекта:

    Можно также указывать значения по умолчанию. К примеру, укажем для цвета по умолчанию значение ‘black’, закомментируем элемент объекта с ключом color — и теперь в переменную color положится ‘black’:

    Можно также менять названия переменных на свои при этом задавая значения по умолчанию:

    Итераторы

    В ES6 появились так называемые итераторы for-of, которые позволяют более удобно перебирать элементы массива, подобно объектам через for-in:

    Напоминаю, почему массивы нельзя перебирать через for-in — это вызовет проблемы, если с массивом поработали как с объектом и добавили в него какое-либо свойство: в этом случае это свойство также попадет в перебор (а мы этого не хотели):

    Итераторы для строк

    Итераторы работают и для строк — в этом случае в цикле строка будет перебираться посимвольно:

    Строки

    В JavaScipt в строках не должно быть переноса строки — это приведет к ошибке:

    Это поправили в ES6 — только строки нужно брать не в обычные кавычки, а в косые:

    В косых кавычках можно вставлять выражения в формате $ <имя переменной>— в этом случае туда подставятся значения переменных, а также выполнятся математические операции:

    Нововведения в функциях

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


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

    В функциях наконец-то появились значения по умолчанию. Давайте разберем их на примере: у нас есть функция square, которая возводит число в квадрат. Сделаем так, чтобы, если параметр функции не передан, она возводила в квадрат число 3, а если передан — то переданное число:

    Топ-пост этого месяца:  Как настроить Google reCAPTCHA OpenCart защищаем магазин от спама

    Значением по умолчанию также может служить результат работы другой функции:

    Деструктуризация в функциях

    В параметрах функций также доступна деструктуризация.

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

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

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

    Также можно переименовывать переменные:

    Ну, и можно комбинировать параметры по умолчанию и переименование:

    Функции через =>

    В ES6 появился упрощенный синтаксис функций через =>. Эта стрелка заменяет команду function и, если внутри функции только одна строка, — то return тоже не нужен — функция вернет результат выполнения этой строки.

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

    Если у функции несколько параметров — их надо брать в скобки:

    Если функция вообще без параметров — то нужны пустые круглые скобки:

    Если в функции несколько строк — необходим return:

    Стрелочные функции удобно использовать в качестве анонимных:

    Доступность this

    Давайте рассмотрим некоторую проблему с this. Вы уже могли с ней сталкиваться ранее, но если вдруг не сталкивались — самое время про нее узнать.

    Пусть у нас дан элемент и массив:

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

    Все переменные, определенные выше forEach — доступны и в нем:

    Однако, это не касается this — снаружи forEach он ссылается на наш элемент, а вот внутри него this будет недоступен или будет ссылаться на объект window (так устроен this — его значение зависит от контекста):

    Чтобы сделать this доступным внутри вложенной функции обычно поступают так: записывают его в какую-либо переменную снаружи вложенной функции (переменную можно назвать как угодно, обычно это that или self). Получается, что внутри вложенной функции наш this будет доступен как that:

    В вот в стрелочных функциях нет таких проблем нет — контекст выполнения не меняется и this без всяких ухищрений доступен и внутри функции:

    Что вам делать дальше:

    Приступайте к решению задач по следующей ссылке: задачи к уроку.

    Когда все решите — переходите к изучению новой темы.

    take a course ES6 (ECMAScript6) — 9 lessons

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

    Пройдено и понято 9 уроков

    Личные ресурсы

    время, терпение, энергия

    Экологичность цели

    На шаг ближе к англоязычным курсам по React и React Native

    Урок 1

    Урок 2

    Урок 3

    Урок 4

    Урок 5

    Урок 6

    Урок 7

    Урок 8

    Урок 9

    • 370 21 мая 2020, 07:30

    Не пропустите новые записи!

    Подпишитесь на цель и следите за ее достижением

    Цель состоит в группе

    Тренинги

    Вы тоже можете
    опубликовать свою
    цель здесь

    Мы поможем вам ее достичь!

    инструменты

    для увлекательного достижения

    © 2012—2020 SmartProgress.do
    Сервис достижения целей

    Виджет вашей цели

    Большой (450×150 px)

    Маленький (250×100 px)

    Чтобы вставить виджет на ваш сайт или блог, скопируйте код и внедрите его в исходный html-код вашего блога/сайта.

    Только для PRO

    Вы можете купить PRO аккаунт, либо получить его бесплатно, пригласив 3 друзей на SmartProgress

    Курс Modern Javascript

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

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

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


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

    О курсе

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

    Сила ECMAScript 6: Класс и Наследование

    This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

    Я хочу познакомить вас с серией статей о ECMAScript6, поделиться с вами своей страстью к новой спецификации и объяснить, как ES6 может пригодиться вам. Надеюсь вам понравится читать информацию изложенную в этих статьях, так же как мне нравилось её писать.

    Для начала, Я работаю в Microsoft над движком для отображения элементов в Microsoft Edge, который является сильно улучшенным движком Internet Explorer, который мы знаем (и любим?) долгие годы. Для меня самой главной особенностью данного движка, является поддержка многих нововведений ECMAScript 6. Мне кажется, что это огромный плюс при создании больших веб-приложений.

    Я люблю JavaScript, но работая над большими проектами, как Babylon.js, я предпочитаю TypeScript, который теперь используется в Angular 2, между прочим. Причина этому JavaScript (также известный, как ECMAScript 5) не обладает всеми особенностями синтаксиса, к которым я привык, создавая большие проекты на других языках. К примеру, мне сильно не хватает классов и наследования.

    Итак, без дальнейших церемоний, давайте приступим:

    1. Создание Класса

    Объектная модель в JavaScript основана на прототипах, в ECMAScript 5 есть возможность симулировать классы и наследование.

    Гибкость JavaScript функций позволяет нам симулировать инкапсуляцию, к которой мы привыкли, работая с классами. Мы можем добиться этого с помощью хитрости — расширить прототип объекта:

    Как вы можете заметить мы создали “класс” со “свойствами” и “методами”.

    Конструктором является сама функция (функция Animal ) где мы можем создавать свойства. С помощью прототипа мы можем создать функции, которые будут считаться методами экземпляра.

    Всё это работает, но для этого вы должны понимать прототипное наследование, и для тех кто работал до этого с привычными языками основанными на классах это может быть довольно запутанно. Забавно, что в JavaScript есть зарезервированное ключевое слово class, которое не используется. В ECMAScript 6 оно работает и позволяет писать более короткий код:

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

    Топ-пост этого месяца:  Как и зачем использовать пользовательские data-атрибуты в HTML5

    Кроме того, классы вводят новую семантику, которой не было в ECMAScript 5. К примеру вы не можете вызвать конструктор без new и вы не можете создавать методы с new . Также методы считаются non-enumerable.

    Интересно следующие: Обе версии ничуть не мешают друг-другу.

    В конце концов, даже с новым ключевым словом, это будет всё та же функция-прототип куда была добавлена другая функция. “Метод” в данном случает просто свойство с функцией у вашего объекта.

    Две другие важные особенности разработки основанной на классах, геттеры и сеттеры, также поддерживаются в ES6. Тем самым становится более очевидным, что метод делает:

    Не правда-ли удобно?

    Здесь мы можем заметить подводный камень JavaScript: “не совсем приватное” приватное свойство ( _age ). О данной теме, я написал статью, некоторое время назад.

    К счастью, у нас теперь есть способ лучше, сделать это с новой возможностью ECMAScript 6: символы.

    Так что же такое символ? Это уникальный и немутабельный тип данных, может быть использован как идентификатор для свойств объекта. Если у вас нет символа, вы не можете получить доступ к свойству.

    Тем самым мы имеем более “приватный” доступ к свойствам.

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

    Однако пока что это не совсем приватно, благодаря Object.getOwnPropertySymbols , конечный пользователь может получить доступ к свойству символа.

    2. Работа с Наследованием

    Как только у нас есть классы, нам также нужно и наследование. Опять же в ES5 есть возможность симулировать наследование, но это довольно сложно сделать.

    К примеру, вот как выглядит TypeScript код для симуляции наследования:

    Не слишком легко читать.

    Альтернатива ECMAScript 6 гораздо лучше:

    Благодаря ключевому слову extends вы можете указать, что класс является потомком другого класса, ссылку на родительский класс можно задать ключевым словом super .

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

    3. Почему Использование TypeScript становится даже более актуальным, чем прежде

    Со всеми новыми возможностями доступными в нашем браузере, я думаю использование TypeSciprt становится ещё более актуальным для генерации JavaScript кода.

    Для начала, последняя версия TypeScript (1.4) добавила поддержку ECMAScript 6 (ключевые слова let и const ), так что вы можете работать с уже существующим TypeScript кодом, включив опцию для генерации ECMAScript 6 кода.

    Но если вы посмотрите ближе на TypeScript, можно заметить, что он очень похож на ECMAScript 6 без типов. Так что изучения TypeScript сегодня, это отличный способ понять ECMAScript 6 завтра!

    Заключение

    Используя TypeScript, вы можете получить всё это сейчас, ваш код будет работать во всех браузерах, так как он будет сконвертирован в ECMAScript 5. Если вы хотите использовать ECMAScript 6 прямо в браузере, вы можете обновиться до Windows 10 и протестировать код в Microsoft Edge.

    Если вы только хотите взглянуть на некоторые из особенностей нового браузера, remote.modern.ie предоставляет доступ к удалённому компьютеру с Windows 10 и Microsoft Edge. Это также будет работать на Mac OS или Linux.

    Конечно Microsoft Edge не единственный браузер, поддерживающий стандарт ES6. Остальные браузеры также работают над добавлением нововведений ES6, вы можете проверить поддержку на: http://kangax.github.io/compat-table/es6/.

    Будущее JavaScript с ECMAScript 6 довольно яркое, и честно говоря я не могу дождаться поддержки во всех современных браузерах.

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

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

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

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

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

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

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

    Using Classes

    ECMAScript 6 introduces the concept of class available in traditional object-oriented languages. In ECMAScript 6, the class syntax is syntactical sugar on top of the existing prototype-based inheritance model. It does not add a new object-oriented inheritance model to JavaScript.

    In this unit, you create an alternative implementation of the mortgage calculator application using a Mortgage class.

    Part 1: Using a Class

    Since this is an alternative implementation rather than the logical continuation of the previous implementation, make a copy of index.html and main.js in case you want to go back to that version.

    In main.js , remove the import statement at the top of the file.

    Add the following class definition at the top of file:

    Modify the calcBtn click event handler as follows:

    On the command line, type the following command to rebuild the application:

    Open a browser, access http://localhost:8080, and click the Calculate button.

    Part 2: Using Classes in Modules

    To create the module:

    Create a new file named mortgage2.js in the js directory.

    Copy the Mortgage class definition from main.js into mortgage2.js .

    Add the export default keywords in front of the class definition. mortgage2.js should now look like this:

    To use the module:

    In main.js , remove the Mortgage class definition.

    Import the mortgage module. Add the following import statement as the first line in main.js:

    To build the project:

    On the command line, type the following command to rebuild the application:

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

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

    Видеокурс JavaScript Advanced. Урок 10. AJAX и HTTP протокол

    В этом уроке мы познакомим вас с новым стандартом JavaScript – ECMAScript 6, который является дополнением к существующей спецификации и существенно расширяет возможности веб разработчика. Мы подготовили короткий обзор нововведений с комментариями о том, как их лучше использовать в своих проектах с учетом их поддержки браузерами. Также мы подготовим небольшую webpack сборку для работы с ES6, добавим в него babel для транспиляции из ES6 в ES5 и узнаем, зачем это все нужно.

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

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