Тодд Палмер

Этот учебник проведет вас через несколько простых шагов, чтобы начать изучать новую версию 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 года.