
Содержание статьи
Тодд Палмер

Этот учебник проведет вас через несколько простых шагов, чтобы начать изучать новую версию JavaScript: ES6.
Чтобы почувствовать язык, мы углубимся в несколько моих любимых функций. Затем я приведу краткий список отличных ресурсов для изучения ES6.
ES6 или ECMAScript 2015?
«Что в имени?»
― Джульетта из «Ромео и Джульетты» Шекспира
Официальное название в 6-е издание ECMAScript есть ECMAScript 2015, как это было завершено в июне 2015 года. Однако, в общем, кажется, люди называют это просто ES6.
Раньше вам нужно было использовать a транспиллер как Babel, чтобы даже начать работу с ES6. Теперь кажется, что многие, кроме Microsoft Internet Explorer, поддерживают большинство функций ES6. Честно говоря, Microsoft поддерживает ES6 в Edge. Если вы хотите больше деталей, посмотрите kangax’s таблицы совместимости.
Учебная среда ES6
Лучший способ изучения ES6 – написать и запустить ES6. Есть способы сделать это. Но два, которые я использую, когда экспериментирую:
Node.js и код Visual Studio
Один из лучших способов исследовать преимущества ES6 – написать свой код в редакторе, например Visual Studio Code, а затем запустить его в Node.js
Установите код Visual Studio и создайте файл под названием helloworld.js
. Вставьте следующий код:
console.log('Hello world');
Сохрани это. Это должно выглядеть примерно так:

Начиная с версии 6.5, Node.js поддерживает большую часть стандарта ES6. Чтобы запустить наш пример, откройте командную строку Node.js в папке, где вы создали helloworld.js
файл. И просто введите:
node helloworld.js
Наши console.log
оператор печатается как выход:

Babel.io
Это не так весело, как Node.js, но удобный способ запуска кода ES6 – это страница «Попробуйте» на Babel.io. Разверните Настройка и убедитесь Оцените проверяется. Затем откройте браузер Консоль.

Введите ES6 в столбец слева. Babel компилирует его в обычный старый JavaScript. Вы можете использовать console.log
и просмотрите результат в веб-консоли справа.
Некоторые из моих любимых функций
«Это несколько моих любимых вещей».
― Мария из «Звуков музыки» Роджерса и Хаммерштейна
В этом разделе мы кратко рассмотрим некоторые новые функции ES6, в частности:
- Использование
let
иconst
вместоvar
- Функции стрелок
- Строки шаблона
- Деструктуризация
const и пусть Versus var
Теперь, когда вы кодируете в ES6: прекратите использование var
! Серьезно, никогда не используйте var
снова.
Теперь используйте любое const
или let
. использование const
когда вы установите значение один раз. использование let
когда вы собираетесь изменить значение.
let bar = { x: 'x'};const foo = { x: 'x'};
bar.x = 'other'; // This is finefoo.x = 'other'; // This is fine
bar = {}; // This is also finefoo = {}; // This will throw an error
Как правило, я люблю использовать const
сначала. Тогда если он жалуется, я смотрю на свой код и убеждаюсь, что мне действительно нужна возможность изменить переменную. Если да, я изменю его на let
.
Убедитесь, что вы проверили ресурсы в этой статье, чтобы получить более подробную информацию let
и const
. Вы увидите, что они работают гораздо более интуитивно, чем var
.
Функции стрелок
Функции стрелок являются одной из отличительных особенностей ES6. Функции со стрелками – это новый способ написания функций. Например, такие функции работают одинаково:
function oneMore(val){ return val+1;}console.log('3 and one more is:', oneMore(3));
const oneMore = (val) => val+1;console.log('3 and one more is:', oneMore(3));
О функциях стрелок следует помнить несколько вещей:
- Они автоматически возвращают вычисленное значение.
- Они имеют лексические
this
.
В первый раз, когда я это увидел, я спросил: «Что такое во всем мире лексическое это? И действительно ли мне все равно? Давайте рассмотрим пример того, почему лексика this так полезна и как она делает наш код более интуитивно понятным:
В строках 1–31 мы определяем класс под названием ThisTester
. Он выполняет две функции thisArrowTest()
и thisTest()
которые в основном делают тоже самое. Но один употребляет функцию со стрелкой, а другой употребляет классическую нотацию функции.
В строке 33 мы создаем новый объект myTester
на основе нашего ThisTester
и вызвать две функции в нашем классе.
const myTester = new ThisTester();console.log('TESTING: thisArrowTest');myTester.thisArrowTest();console.log('');console.log('TESTING: thisTest');myTester.thisTest();
В thisTest()
функцию, мы видим, что она пытается использовать this
в строке 26.
console.log('function this fails', this.testValue);
Но это не удается, потому что эта функция получает собственно this
и это не то же this
как класс. Если вы думаете, что это запутало, это потому, что это так. Это совсем не интуитивно. И новые разработчики иногда тратят свою первую неделю на борьбу с this
в функциях обратного вызова и обещаниях, как я.
В конце концов, просмотрев кучу примеров, я понял стандартный «трюк» использования переменной под названием self
держаться за this
которые мы хотим использовать. Например, в строке 17:
let self = this;
Однако обратите внимание, как у функции стрелки в строке 10 мы можем получить прямой доступ this.testValue
и это удивительно работает:
let myFunction = (x) =>console.log('arrow "this" works:', this.testValue)
Это лексическое это в действии. The this
у функции стрелки такая же, как у this
в окружающей вызывающей его функции. И потому мы можем интуитивно использовать this
чтобы получить доступ к свойствам нашего объекта, например this.testValue
.
Строки шаблона
Шаблонные строки (иногда их называют шаблонными литералами) – это простой способ создания строк. Они прекрасно подходят для многострочных строк, таких как используемые в шаблонах Angular. Шаблонные строки используют тыльная галочка вместо кавычки или апострофа.
Вот пример создания длинной многострочной строки:
const myLongString = `This stringactually spans many lines.And, I don't even need to use any "strange"notation.`;console.log (myLongString);
Вы можете легко привязать переменные к своей строке, например:
const first="Todd", last="Palmer";console.log(`Hello, my name is ${first} ${last}.`)
Глядя на это назначение переменных, возникает вопрос:
«Что делать, если мне понадобится воспользоваться $
, {
или }
символов в моей строке?»
Что ж, единственное, что требует особого отношения, это последовательность ${
.
console.log(`I can use them all separately $ { }`);console.log(`$\{ needs a backslash.`);
Строки шаблона особенно полезны в Angular и AngularJS, где вы создаете шаблоны HTML, поскольку они, как правило, многострочны и содержат много кавычек и апострофов. Вот как выглядит небольшой пример шаблона Angular с использованием задней галочки:
import { Component } from '@angular/core';
@Component({ selector: 'app-root', template: ` <h1>{{title}}</h1> <h2>My favorite hero is: {{myHero}}</h2> `})export class AppComponent { title="Tour of Heroes"; myHero = 'Windstorm';}
Деструктуризация
Деструктурирование позволяет взять части объекта или массива и назначить их вашим именуемым переменным. Чтобы узнать больше о деструктуризации, посмотрите мою статью на ITNEXT.
Ресурсы ES6
Это был лишь краткий обзор нескольких новых функций ES6. Вот несколько отличных ресурсов для продолжения вашего путешествия по пути изучения ES6:
Эта статья основана на лекции, которую я прочитал в марте 2018 года.