Синтаксис и обзор функций ES6

Синтаксис и обзор функций ES6

От автора: введение в ES6 синтаксис и функции, такие как классы, promises, константы, деструктуризация. А также сравнение со старыми версиями JS. ECMAScript 2015 или ES6 ввел множество изменений в JS. Это обзор самых распространенных функций и различий синтаксисов со сравнением с ES5 там, где это возможно.

Смотреть на GitHub. Заметка: общепринято использовать const, за исключением циклов и переназначений. Однако в этом уроке я буду использовать let вместо var для всех примеров ES6.

Легенда

Я не фанат foo bar baz. Ниже представлена большая часть имен, используемых в этой статье.

Переменная: x

Объект: obj

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Массив: arr

Функция: func

Параметр, метод: a, b, c

Строка: str

Объявление переменных

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

ES5

ES6

Объявление констант

ES6 ввел ключевое слово const, которое нельзя переобъявить или переназначить. Оно не поддается мутации.

ES6

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

Синтаксис стрелочной функции – это более короткий способ создания функции. У стрелочной функции нет своего this, своих прототипов, их нельзя использовать для конструкторов. Также их нельзя использовать как методы объекта.

ES5

ES6

Шаблонные литералы

Конкатенация/строковая интерполяция

В строки шаблонных литералов можно вставлять выражения.

ES5

ES6

Многострочные строки

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

ES5

ES6

Заметка: в многострочных шаблонных литералах сохраняются пробелы.

Явный возврат

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

ES5

ES6

Сокращение ключ/свойство

ES6 ввел сокращенную запись для присвоения свойств переменным с таким же именем.

ES5

ES6

Сокращенное определение метода

При присвоении методов объекту можно опустить function.

ES5

ES6

Деструктуризация (сопоставление объектов)

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

ES5

ES6

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Перебор массива в цикле

Был представлен более краткие синтаксис перебора массивов и других итерируемых объектов.

ES5

ES6

Параметры по умолчанию

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

ES5

ES6

Синтаксис расширения

С помощью синтаксиса расширения можно расширить массив.

ES6

Синтаксис расширения можно использовать в аргументах функций.

ES6

Классы/функции конструкторы

ES6 вводит синтаксис class поверх функций-конструкторов на основе прототипов.

ES5

ES6

Наследование

Ключевое слово extends создает подкласс.

ES5

ES6

Модули – экспорт/импорт

Модули можно создавать для экспорта и импорта кода между файлами.

index.html

export.js

import.js

Promises/колбеки

Promises – это завершение асинхронной функции. Их можно использовать вместо цепочки вызова функций.

ES5 колбек

ES6 promise

В примере ниже чисто для демонстрации используется XMLHttpRequest (лучше использовать современный Fetch API).

ES5 колбек

ES6 promise

Автор: Tania Rascia

Источник: https://www.taniarascia.com/

Редакция: Команда webformyself.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Курс по ES 6 (EcmaScript 6.0)

Прямо сейчас посмотрите курс по EcmaScript 6.0

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree