Начало работы с ES6, используя несколько моих любимых вещей

Автор оригинала: FreeCodeCamp Community Member.

Todd Palmer.

В этом руководстве в этом руководстве вас простые шаги для начала изучения новейшей версии JavaScript: ES6.

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

ES6 или Ecmascript 2015?

Официальное название 6-е издание Ecmascript это Ecmascript 2015, Как было доработано в июне 2015 года. Однако, как правило, люди, кажется, ссылаются на это просто как ES6 Отказ

Раньше вам пришлось использовать транспортер как Бабел даже начать с ES6. Теперь кажется, что почти все, кроме всех, кроме Microsoft Internet Explorer поддерживает большинство функций в ES6. Быть справедливым, Microsoft поддерживает ES6 в край. Если вы хотите больше деталей, посмотрите на Kangax’s Таблица совместимости Отказ

ES6 Обучение среды

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

Node.js.
Babel.io’s Попробуйте это страница

Node.js и код визуального студии

Один из лучших способов изучения приятных слоев ES6 – написать свой код в редакторе, как Визуальный студийный код а затем запустить его в 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, в том числе:

Использование Пусть и Const вместо вар
Функции стрелки
Шаблонные строки
Разрушение

const и пусть vs var

Теперь, когда вы кодируете в ES6: прекратите использование var ! Серьезно, никогда не используйте var опять таки.

Отныне используйте либо Const или Пусть Отказ Использовать Const Когда вы установите значение один раз. Использовать Пусть Когда вы намереваетесь изменить значение.

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 первый. Тогда, если он жалуется, я смотрю на мой код и убедитесь, что мне действительно нужно иметь возможность изменять переменную. Если это так, я меняю это на Пусть Отказ

Убедитесь, что вы проверяете ресурсы позже в этой статье для получения дополнительной информации о Пусть и 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));

Есть несколько вещей, которые нужно помнить о функциях стрелки:

Они автоматически возвращают вычисленное значение.
Они имеют лексику это Отказ

Впервые я увидел это, я задавался вопросом: «Что в мире мир – это Lexical это ? И, я действительно забочусь?» Давайте посмотрим на пример того, почему Lexical это так полезно, и как он делает наш код намного более интуитивно понятен:

В строках 1-31 мы определяем класс под названием Тистер Отказ У него есть две функции thisarrowtest () и Тистик () что в основном делают то же самое. Но использует функцию стрелки, а другая использует классическую функциональную запись.

В строке 33 мы создаем новый объект MyTester на основе нашего Тистер Класс и вызовите две функции в нашем классе.

const myTester = new ThisTester();console.log('TESTING: thisArrowTest');myTester.thisArrowTest();console.log('');console.log('TESTING: thisTest');myTester.thisTest();

В Тистик () Функция, мы видим, что он пытается использовать это в строке 26.

console.log('function this fails', this.testValue);

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

В конце концов, просмотрев кучу примеров, я выяснил стандартную «трюк» с помощью переменной под названием Я держать на это что мы хотим использовать. Например, в строке 17:

let self = this;

Тем не менее, обратите внимание, как в функции стрелки в строке 10 мы можем напрямую доступ к this.testValue И магически это работает:

let myFunction = (x) =>console.log('arrow "this" works:', this.testValue)

Это Лексический этот в действии. это В функции стрелки такая же, как это В окружающей функции, которая называет это. И, следовательно, мы можем интуитивно использовать это Для доступа к свойствам в нашем объекте, как this.testValue Отказ

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

Шаблонные строки (иногда называемые шаблонные литералы) – это простой способ построить строки. Они отлично подходят для многопроизводительных струн, таких как те, которые используются в угловых шаблонах. Шаблонные строки используют Назад галочка `вместо цитаты или апостроф.

Вот пример создания длинной многострочной строки:

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.`);

Шаблонные строки особенно полезны в Угловой и Angularjs Где вы создаете HTML-шаблоны, потому что они имеют тенденцию быть многострочными и имеют много цитат и апостроф. Вот какой небольшой пример углового шаблона использует обратную галочку:

import { Component } from '@angular/core';

@Component({  selector: 'app-root',  template: `    {{title}}
    My favorite hero is: {{myHero}}
  `})export class AppComponent {  title = 'Tour of Heroes';  myHero = 'Windstorm';}

Разрушение

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

ES6 ресурсы

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

Узнайте ES2015 на Вавиле Это обзор всех новых функций. Хотя это не входит в значительную глубину, это отличная страница, чтобы сохранить в качестве краткой ссылки с примерами.
Советы ES6 и трюки, чтобы сделать ваш кодовый очиститель, короче и проще читать! по Сэм Уильямс Это отличная статья в Бесплатный код лагеря Средняя публикация.
MPJ видео серии: ES6 JavaScript Особенности Если вы предпочитаете видео, MPJ – ваш парень. Он не только это хорошо технически, его вещи действительно развлекают.
ES6 в глубине Серия на Mozilla Hacks Это отличное в глубине ряда.
Эрик Эллиотт Серия Сочинение программного обеспечения Прочитайте это для реальной проблемы. Будьте предупреждены, хотя некоторые из вещей Эрика – это компьютерная наука.

Эта статья основана на лекции, которую я дал в марте 2018 года.